Clicky chart - lower bounce rate with responsive theme

On August 5, I decided it was time to implement what I learned at BlogHer ’13 about responsive websites. Over the next 72 hours, I changed the theme of this website several times.

Half of the time over these few days, the website looked terrible. The colors were wrong. The header was missing or the wrong size. The home page slideshow wasn’t working.

Even with all of the chaos my visitors discovered when they landed on Future Expat, there was a dramatic bump in how many of the visitors bounced (left quickly without clicking on another page). The total time that visitors spent on the site also dramatically increased. At the same time, there were actually fewer total visitors than the week before so this change did not have to do with more website traffic.

SEE ALSO: Lower Your Website Bounce Rate INFOGRAPHIC

Every Website Needs a Mobile Version:

I’ve changed the themes on my websites before and never seen such a dramatic impact on traffic.

The reason the theme change had such an impact this time was because I changed from using the WP Touch mobile plugin for WordPress websites to a responsive theme.

What do this mean?

WP Mobile plugin for WordPress websites

The mobile plugin changes the look entirely of websites. With the plugin, my website was hard to navigate and some of the information didn’t display properly on the smaller mobile phone screens.

A few years ago I attended some training sessions on the need for mobile versions of your website. The instructors insisted that you shouldn’t try to duplicate your entire website on a cell phone. Instead, you should think about what people using their phone would want to do, and only include that information.

I followed the advice on my real estate website, Arch City Homes. This meant that I included information about my home listings, but left out the blog articles.

On this website, most of the information was displayed on my mobile website. I did leave out the travel map because it didn’t display properly.

But times have changed. More and more people are using their phones for much of their internet needs. They interact on social media sites and read articles they discover through shared links.

Unfortunately, when these people click through and land on a WP Touch mobile website, they don’t want to stick around.

Simply put…websites using WP Touch or similar methods to convert a regular website to a mobile website just don’t look pretty. Visitors quickly realize the site is hard to read or navigate and they hit the back button instead of exploring the website. 

SEE ALSO: Converting Your WordPress Website to a Responsive Theme

Responsive Themes Result in Website Visitors Sticking Around:

Mobile version of responsive website Future Expat

In contrast, responsive websites resize all of the images and design elements so it displays properly on any size device.

As the screen gets smaller, the website changes from having multiple columns to a single column. The image and text size is adjusted for the device to make it easily readable.

The menu displays all of the same content as you would find on a desktop computer and it is easy to navigate. Even the blog sidebar remains, though it is moved below the main content so people have to scroll down to find it.

According to Steve and Shannon Fisher, who led the responsive design breakout session I attended at BlogHer ’13, 30% of today’s internet users report that they access the internet ONLY from a mobile device. These people NEVER use a full size computer.

This number is likely to increase in the coming years. In addition, many people who currently use both a full size computer and mobile devices will shift more of their online time to the smaller mobile screens.

Bottom line…every website will need to have a great mobile website or it will start losing traffic. 

What Does Your Website Look Like on a Mobile Phone?

I found a handy website, The Responsinator, which shows you ANY website on multiple devices. You can look up your website or any other website. Just click the link above and change the website URL to your website. Give it a few seconds to reload the website on each device.

The Responsinator gives you a live demo on each device, so be sure to click around to different pages on each device to see what works and what doesn’t display properly.

How Do You Convert Your Website to Responsive Design?

If you are as convinced as I was when I sat in the training session, then your next question is likely how to change your website to a responsive design without spending a lot of money.

If you have a WordPress website, the answer is pretty simple. Check back next week for a step by step guide on how to make the change using free and upgraded themes. I’ll share with you which themes worked for me and which I abandoned even after I spent some money to upgrade.

SEE ALSO: Converting Your WordPress Website to a Responsive Theme