I snapped pictures of the flowering cherry tree in my yard before and after it was pruned.
I took one of my office before and after I did a major cleanup.
I even got my son to pose for one before and after a haircut.
I always take before-and-after screenshots of the websites we create for our clients.
But I’ve never found a good way to display the before-and-after shots on the Blogging Bistro website. Until now.
Enter the TwentyTwenty WordPress plugin by Zurb. This plugin allows you to combine two images of the exact same size into an interactive before-and-after picture. The image is displayed split in half, as you’ll see in the three samples I created, below.
Grab the arrow icon on the slider and drag the arrows to the right to see the BEFORE shot and to the left to see the AFTER.
Here’s a helpful screencast by Corey Martin, the plugin’s developer, that shows how to install and use the plugin.
I experimented with this plugin by creating before-and-after images of three websites we recently redeveloped. In each case, we had built a custom WordPress site several years ago. The clients wanted to use responsive design, a technology that enables a website to display perfectly on smartphones, tablets, and desktop computers.
And in each case, the client wanted to retain many of the site’s original design elements and its navigational structure.
Things to remember about the plugin
To make the before-and-after images display correctly, I first cropped each image so they were the exact same size at http://www.picmonkey.com/, my go-to photo editing tool.
Next, I created a new blog post and uploaded all the images to the Media Library.
I inserted each image into the post (inserting the BEFORE picture first).
When I pasted in the snippet of code (which you’ll find in the screencast) into my post, I discovered that I did not need to use the Text (HTML) editor. I pasted it using the Visual editor. When I saved my Draft and previewed the post, the code disappeared and the before-and-after slider displayed correctly.
Let’s look at the before-and-after images I created for each of the three websites we redesigned.
Before-and-after #1: Atlantic Veterinary Hospital, Seattle, WA
Dr. Laura Monahan loved the layered images and 3D effect on her original website, and asked us to retain as much of that look and feel as possible. This is a challenge when converting a site to responsive design, as graphics must be sacrificed in favor of making the site accessible to impatient mobile users.
You’ll notice that the layered look was replaced with a more modular format that allows the elements in each “column” to slide beneath each other when users view the site on a tablet or smartphone.
Before-and-after #2: Focus With Marlene
Marlene Anderson — a counselor, life coach, speaker, and author — loves purple. But visitors to her site told her it was overwhelmingly purple. And some commented that the purple and gray color scheme, while soothing, almost put them to sleep.
Marlene wanted her brand refresh to be clean, contemporary, and to invite readers into conversation.
Before-and-after #3: Blogging Bistro, LLC
Our own Blogging Bistro site needed an upgrade to responsive design, too. Like our two clients above, I had to let go of the layers and ripped edge effects in favor of a design that enables mobile users to quickly find the content they’re looking for.
Our programmer created a cool special effect for the social media coffee mugs that display in the site’s header. View the site on a smartphone in both portrait and landscape configurations, and watch the mugs move!
What do you think?
Do you like the way this slider works? What before-and-after images would you showcase using the TwentyTwenty plugin? If you give it a whirl, be sure to share the link with us so we can check it out.