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


Share on LinkedIn

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

According to the analytics for this blog, my mobile browsing traffic accounts for just over 6,000 visits per month (or around 10% of my traffic), and they tend to stay on the site longer than desktop visitors.

So it makes sense for me to ensure these visitors are looked after. Because I run on WordPress, my blog is automatically mobile-friendly (meaning visitors on mobile browsers will get a nice replication of my design on their phones).

I 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.

WPtouch Pro

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:

Mobile friendly

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.

Responsive Themes by StudioPress

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 blog (affiliate link).

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 if 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.

A version of this post originally appeared on For Bloggers By Bloggers.

Republished with author's permission from original post.

Danny Brown
Danny Brown is partner at Bonsai Interactive Marketing, a full service agency offering integrated, social media and mobile marketing solutions. He is also founder of the 12for12k Challenge, a social media-led charity initiative connecting globally and helping locally.


Please use comments to add value to the discussion. Maximum one link to an educational blog post or article. We will NOT PUBLISH brief comments like "good post," comments that mainly promote links, or comments with links to companies, products, or services.

Please enter your comment!
Please enter your name here