Why You Need a Responsive Blog Design Instead of a Mobile-Friendly One

When you read a blog, what’s your preferred method – desktop browser or mobile (say, smartphone or tablet)?

According to our analytics here at For Bloggers By Bloggers, our mobile browsing traffic accounts for around 3,500 visitors per month (or around 10% of our visitors), and they tend to stay on the site longer than desktop visitors.

So it makes sense for us to ensure these visitors are looked after. Because we run on WordPress, we’re automatically mobile-friendly (meaning visitors on mobile browsers will get a nice replication of our design on their phones).

We could also install a plugin like WPtouch Pro, to optimize the mobile experience even more. But I’m not a fan of either of these approaches – instead, I much prefer a responsive design for mobile visitors. Here’s why.

You Keep Important Information

If you visit a site that’s running a mobile plugin, you usually see this kind of display (taken from WPtouch Pro), or similar.

As you can see, it gives you a nice, clean look and feel and breaks the blog posts down into easy-to-manage excerpts that you can click through to. Run the pro version of the plugin, and it also gives you more theme  designs to play with as well as an iPad-specific setting.

The problem is, if you have a lot of call-to-actions (CTA) on your blog, you lose them with a mobile plugin. Sidebar ads, for example, disappear. Subscription boxes also disappear.

Now, you can set up description options on the plugin, but this isn’t as seamless a flow as having a pop-up box reminder or dedicated after-post box to encourage your readers to click your CTA.

You Don’t Need to Hold, Click and Stretch

One thing I really hate about sites that are simply mobile-friendly is that I have to either double-tap, or hold the screen and stretch it, to read what I’m interested in.

Because a mobile-friendly site just replicates your web design but on a much smaller scale, there’s no way you’ll see all the information in the same way you would on a standard browser.

Take this screen grab of the BBC website – it does a good job of replication, but you just know that’s going to involve a lot of manipulation when you start to click on articles:

Now, this may not be an issue for some folks but, again, if you – the blogger – are using your blog to make money and sell ads, etc, you’re going to lose a lot of your CTA when readers zoom into your main content.

As your blog post zooms into view, your sidebar disappears off-screen, until you scroll over that direction. If, indeed, your reader can be bothered to do that.

Responsive Design is More Than Just a Mobile Browser Solution

While there’s no doubt in my mind that responsive design is the best solution for mobile browsers, it offers a bit more than that. Because responsive design adapts to any screen size, it’s also great for widescreen displays as well as smaller desktop or laptop screens.

The layout of a responsive design identifies your display and adapts accordingly. It also keeps your CTA’s, whether at the top of the screen or below the main content.

It’s a smooth transition from web browsing to mobile responsive browsing – and for me, that beats any other option hands down.

Also, for any blogger that cares about the community experience when on-site, responsive design also means your blog adapts around your reader, as opposed to them having to adapt to you – an immediate plus for you over other bloggers.

So, now you know why you’d want responsive, how do you make sure your blog is leaning this way?

Taking Your Blog Responsive

The good news is, there are a variety of ways to make your blog responsive, and they’re all suited to your needs – whether you want to buy a custom-made solution, or dabble with some coding and CSS work yourself.

The Custom Solution with Studiopress

I’m a huge fan of the Studiopress developer house. They’re the guys that build the Genesis framework, used on this site with the Focus child theme (affiliate links).

Because Studiopress knows the value of user experience and site-wide design, they have a roster of responsive themes ready to install on your WordPress blog immediately. They even have a handy theme chooser tool, to let you see the currently available responsive designs, and help you choose the right one for you.

I use the Studiopress designs on every blog I create now, and I also make sure I go with one of their responsive designs – and the feedback from readers and subscribers validate that choice.

The CSS Coding Solution

CSS is the script that site developers use to create everything from styling to specialized areas, call-outs and much more. CSS3 is the latest version, and that update introduced the concept of media queries.

This is essentially the piece of code that changed everything, and made responsive design a reality. By implementing media queries into your design, you can choose which query you prefer, based on the device you want to make your site more palatable for.

Studiopress founder Brian Gardner has a great piece on media queries over at his blog, along with links to some other useful resources, so it’s definitely the place to start of you’re thinking of coding responsive design into your site.

How about you – have you made the switch to responsive yet? What’s been your experience when visiting responsive sites versus mobile-friendly ones? Let’s talk below.