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 that I use here, here and here (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.

Get my latest posts as soon as they're published

Join 12,346 smart subscribers and receive my latest posts as soon as they're published - simply enter your email below (I respect your privacy and will never spam you).

Alternatively, click here to subscribe to the RSS feed instead.

64 comments
Trish
Trish

Thanks for the great post! Out of the box, I'm not a big fan of StudioPress for responsive design. Most notably, header images and sliders are not responsive in many of the child themes that are marketed for their so-called responsive designs. It takes a good bit of work to make many of these look decent on mobile devices - enough so that I feel marketing them as "responsive" is a bit deceptive. I need to work with WPTouchPro more to see if I can work through some of the glitches I am encountering (displaying the mobile design on desktop devices). :( But overall, I can't see how using this solution is going to be a positive for conversions.

Danny Brown
Danny Brown

@Todd OHey there Todd, Thanks for such a thoughtful comment, and agreed, the overhead is something that needs to be taken into consideration (although with pre-built responsive designs out on the market, it can still be inexpensive depending on budget). I'm not taking away from what you guys do (besides, I don't have the dev smarts that you do!). This post is from personal use and experience. With regards the WPTouch vs. Responsive CTA, it depends on the framework. The one I use here keeps my header ad above the fold, as well as my CTA (the blurb about strategies and insights) - there's no need to scroll down. If I wanted to change the blurb for a more visual CTA, I could. However, I wouldn't see that with WPTouch. There are definitely pros and cons to each side, which I tried to cover here, but again from personal experience. At the end of the day, it comes down to what's best for each site (and I completely agree you don't need to transfer the whole browser site to a mobile one). Cheers, sir!

Lior
Lior

Hey Danny,

I've recently released a new development tool that may help those who worry about overhead costs and development time for responsive designs.  The tool is called JOY! Responsive CSS Preprocessor.  JOY! takes the load off doing the math, making it easier for developers to keep their original stylesheet clean and uncluttered making change and development a breeze.  Check out JOY! at http://joyresponsivecss.com

Lior
Lior

Hey Danny, I've recently released a new development tool that may help those who worry about overhead costs and development time for responsive designs.  The tool is called JOY! Responsive CSS Preprocessor.  JOY! takes the load off doing the math, making it easier for developers to keep their original stylesheet clean and uncluttered making change and development a breeze.  Check out JOY! at http://joyresponsivecss.com

Danny Brown
Danny Brown

Hey there Todd, Thanks for such a thoughtful comment, and agreed, the overhead is something that needs to be taken into consideration (although with pre-built responsive designs out on the market, it can still be inexpensive depending on budget). I'm not taking away from what you guys do (besides, I don't have the dev smarts that you do!). This post is from personal use and experience. With regards the WPTouch vs. Responsive CTA, it depends on the framework. The one I use here keeps my header ad above the fold, as well as my CTA (the blurb about strategies and insights) - there's no need to scroll down. If I wanted to change the blurb for a more visual CTA, I could. However, I wouldn't see that with WPTouch. There are definitely pros and cons to each side, which I tried to cover here, but again from personal experience. At the end of the day, it comes down to what's best for each site (and I completely agree you don't need to transfer the whole browser site to a mobile one). Cheers, sir!

Todd O
Todd O

Yep, a LOT of discussion about responsive design but not a lot of talk about the kind of overhead (both development time and processing time) that responsive design results in.

Keeping in mind that our company makes its living by designing and building websites - both traditional and mobile - for our respective clients using the Wordpress CMS, we have chosen to use WP Touch Pro along with Genesis as our go to development tools of choice.

Even though Genesis now provides child themes that are supposedly "responsive", we've found them to be extremely lacking in terms of how they are visually represented across various browsers. The testing and resulting development fixes that are required are immense and definitely eat into our bottom line on a project by project basis.

It's funny that you mention that WP Touch eliminates sidebars and therefore potentially important CTA's but a responsive design on a mobile device is essentially a one column design...which means that you need to keep that in mind in terms of priority. What good is a responsive design if your CTA's are pushed to the bottom?!!

WP Touch is a tool that enables the designer to specifically design for mobile...thinking that everything that is on a traditional site should go on a mobile site is an oversight...pun intended. Also keep in mind that WP TOuch is a server side solution meaning that it has the ability to perform better than an "all-in-one" responsive design.

Don't get me wrong, I'm believer that a design of a website should morph to the size of the screen of the device without the user having to do sideways scrolls, pinching and the like....I'm just not sold on the whole responsive design movement from a pure development perspective.

At our company, we live and breath design AND development every day and we are tasked with providing our clients with great design while developing code in a cost efficient manner.

I just don't think that the responsive "design" movement has considered the impact, from a development perspective, very seriously.

Todd O.

http://www.originalginger.com

Todd O
Todd O

Yep, a LOT of discussion about responsive design but not a lot of talk about the kind of overhead (both development time and processing time) that responsive design results in. Keeping in mind that our company makes its living by designing and building websites - both traditional and mobile - for our respective clients using the Wordpress CMS, we have chosen to use WP Touch Pro along with Genesis as our go to development tools of choice. Even though Genesis now provides child themes that are supposedly "responsive", we've found them to be extremely lacking in terms of how they are visually represented across various browsers. The testing and resulting development fixes that are required are immense and definitely eat into our bottom line on a project by project basis. It's funny that you mention that WP Touch eliminates sidebars and therefore potentially important CTA's but a responsive design on a mobile device is essentially a one column design...which means that you need to keep that in mind in terms of priority. What good is a responsive design if your CTA's are pushed to the bottom?!! WP Touch is a tool that enables the designer to specifically design for mobile...thinking that everything that is on a traditional site should go on a mobile site is an oversight...pun intended. Also keep in mind that WP TOuch is a server side solution meaning that it has the ability to perform better than an "all-in-one" responsive design. Don't get me wrong, I'm believer that a design of a website should morph to the size of the screen of the device without the user having to do sideways scrolls, pinching and the like....I'm just not sold on the whole responsive design movement from a pure development perspective. At our company, we live and breath design AND development every day and we are tasked with providing our clients with great design while developing code in a cost efficient manner. I just don't think that the responsive "design" movement has considered the impact, from a development perspective, very seriously. Todd O. http://www.originalginger.com

Ari Herzog
Ari Herzog

Googling the topic brought me all over the place -- but I never heard of responsible web design until right now. Thanks for keeping me on my toes.

Lisa B. Marshall
Lisa B. Marshall

Hi Danny,

I just created a new site for my upcoming book using a responsive template from Studiopress. I am loving everything about it, except I worry about the overhead slowing it down. Any thoughts on this?

Lisa B. Marshall
Lisa B. Marshall

Hi Danny, I just created a new site for my upcoming book using a responsive template from Studiopress. I am loving everything about it, except I worry about the overhead slowing it down. Any thoughts on this?

Tony Escobar
Tony Escobar

Responsive blog design is a must! I agree, much better than WPtouch, although WPtouch can be pretty convenient. I'd say using responsive design instead of WPtouch adds to cross-branding content too, since readers see the same design across platforms.

digital12
digital12

It'a really interesting, Good job! :)

geofflivingston
geofflivingston

Completely agree, Danny. I totally want to get a responsive design for my blog in its next iteration.

Justin Brackett
Justin Brackett

Danny, Danny, Danny. You never cease to amaze me! I was just working on a blog post like this, then found yours. LOVE LOVE LOVE it. With the lunch of my new site it was the first factor in the design. I never really liked the "Mobile Versions" of sites with the advent of the responsive design, I'm in love again.

I agree with @lisagerber:disqus why would you NOT want to use responsive design? Really?

Great job buddy!

Justin Brackett
Justin Brackett

Danny, Danny, Danny. You never cease to amaze me! I was just working on a blog post like this, then found yours. LOVE LOVE LOVE it. With the lunch of my new site it was the first factor in the design. I never really liked the "Mobile Versions" of sites with the advent of the responsive design, I'm in love again. I agree with @lisagerber:disqus why would you NOT want to use responsive design? Really? Great job buddy!

Bhaskar Sarma
Bhaskar Sarma

Haven't swung by your place for some time and I can see you have yet another new coat of paint, with all the furniture moved about. Do you do the same in your home, mate? :P

I have the WPTouch thing going on in my site and you are right- I don't look like it AT all. Thanks for pointing me towards the Brian Gardner post---will need to get my hands dirty.

I just checked out your post on my smartphone on Opera Mini and didn't see the comment section. Same thing happens with my blog. Is there a bug somewhere or is this the problem with Disqus?

Bhaskar Sarma
Bhaskar Sarma

Haven't swung by your place for some time and I can see you have yet another new coat of paint, with all the furniture moved about. Do you do the same in your home, mate? :P I have the WPTouch thing going on in my site and you are right- I don't look like it AT all. Thanks for pointing me towards the Brian Gardner post---will need to get my hands dirty. I just checked out your post on my smartphone on Opera Mini and didn't see the comment section. Same thing happens with my blog. Is there a bug somewhere or is this the problem with Disqus?

Bruce Aristeo
Bruce Aristeo

Great Stuff! I was in the market for a mobile solution that would help a number of my clients, and I'm glad I sold us posted. Thanks again Danny for helping me along with clear information and good advice.

I hope I get a chance to connect with you again, it's been sometime and much has changed. Even your blog!

Take care, Bruce

ps. How does the "STAR" operate? (upper right corner of my comment) A click seems to have different results which left me with not clicking...

Bruce Aristeo
Bruce Aristeo

Great Stuff! I was in the market for a mobile solution that would help a number of my clients, and I'm glad I sold us posted. Thanks again Danny for helping me along with clear information and good advice. I hope I get a chance to connect with you again, it's been sometime and much has changed. Even your blog! Take care, Bruce ps. How does the "STAR" operate? (upper right corner of my comment) A click seems to have different results which left me with not clicking...

Lisa Gerber
Lisa Gerber

I'm going to refer back to my ski industry background - I'd compare the arrival of responsive design to that of shape skis. Some people think it's a fad, others know it's the new way of web design.

I advise my clients to go that route. I can't even see why one wouldn't????

My site is responsive using Genesis and I'm very happy with it!

and PS, I love the new clean design here!! (been meaning to say so.)

Lisa Gerber
Lisa Gerber

I'm going to refer back to my ski industry background - I'd compare the arrival of responsive design to that of shape skis. Some people think it's a fad, others know it's the new way of web design. I advise my clients to go that route. I can't even see why one wouldn't???? My site is responsive using Genesis and I'm very happy with it! and PS, I love the new clean design here!! (been meaning to say so.)

andrea
andrea

I thought I had commented, but my comment has not appeared...

Anyway, in short, what are the DOWNsides of a responsive theme?

andrea
andrea

I thought I had commented, but my comment has not appeared... Anyway, in short, what are the DOWNsides of a responsive theme?

Danny Brown
Danny Brown

Hey there Trish, Thanks for dropping by and sharing your thoughts. I think the thing that's good about what Studiopress are doing is bringing a responsive solution to anyone that wants one, without the need to shell out thousands of dollars to implement (I've seen examples of designers taking advantage of ill-informed customers to ramp up the cost of building a responsive design). While it's not perfect, the header issue usually comes into play when people upload their own and don't work to the recommended sizing. This can be worked around using a Responsive Header plugin, or some extra CSS. The same goes for the slider - Studiopress recommend using their Responsive Slider, by Nathan Rice, and I haven't seen any issues with that when used. Like most things, while not 100% perfect, I'd choose Studiopress over WPtouch any day, especially given the loss of CTA that the latter forces upon you.

Danny Brown
Danny Brown

Lior Hey there Lior, cheers for the link, i'll check it out - anything that can help site owners move with the times is alright in my book. :)

Danny Brown
Danny Brown moderator

Hey there Todd,

Thanks for such a thoughtful comment, and agreed, the overhead is something that needs to be taken into consideration (although with pre-built responsive designs out on the market, it can still be inexpensive depending on budget).

I'm not taking away from what you guys do (besides, I don't have the dev smarts that you do!). This post is from personal use and experience.

With regards the WPTouch vs. Responsive CTA, it depends on the framework. The one I use here keeps my header ad above the fold, as well as my CTA (the blurb about strategies and insights) - there's no need to scroll down. If I wanted to change the blurb for a more visual CTA, I could. However, I wouldn't see that with WPTouch.

There are definitely pros and cons to each side, which I tried to cover here, but again from personal experience. At the end of the day, it comes down to what's best for each site (and I completely agree you don't need to transfer the whole browser site to a mobile one).

Cheers, sir!

Danny Brown
Danny Brown

Hehe, "responsible web design" - it should be called that, shouldn't it? :)

Danny Brown
Danny Brown

To be fair, Lisa, I haven't really seen any load time issues yet - and the guys at Studiopress certainly seem to be amongst the best when it comes to making sure that's kept reasonable. I know their plans with the next iteration of Genesis is to make it even more clean, so hopefully it will be even less of a concern soon. :)

Hope that helps!

Danny Brown
Danny Brown

To be fair, Lisa, I haven't really seen any load time issues yet - and the guys at Studiopress certainly seem to be amongst the best when it comes to making sure that's kept reasonable. I know their plans with the next iteration of Genesis is to make it even more clean, so hopefully it will be even less of a concern soon. :) Hope that helps!

Danny Brown
Danny Brown

You know, I didn't even think of that, but great point, mate - and that branding element is so key when you're looking to stand out from others. Cheers for the reminder!

Danny Brown
Danny Brown

It seems like such an easy answer, doesn't it? And yet... But, yeah, for any business, blogger or marketer that's using their blog as a business tool or lead gen platform, it doesn't make sense to hide these CTA's because of a design decision that seems to make itself.

Cheers, sir!

Danny Brown
Danny Brown

It seems like such an easy answer, doesn't it? And yet... But, yeah, for any business, blogger or marketer that's using their blog as a business tool or lead gen platform, it doesn't make sense to hide these CTA's because of a design decision that seems to make itself. Cheers, sir!

Danny Brown
Danny Brown

Hi mate,

Oh, no, it's my wife that's the furniture person in my house - I just do the heavy lifting. :)

I've found that sometimes Disqus doesn't load immediately on mobile - I know they're aware of it and looking into it. Generally, though, there is a "reload Disqus" option when the initial load doesn't kick in, just in case.

Danny Brown
Danny Brown

Hi mate, Oh, no, it's my wife that's the furniture person in my house - I just do the heavy lifting. :) I've found that sometimes Disqus doesn't load immediately on mobile - I know they're aware of it and looking into it. Generally, though, there is a "reload Disqus" option when the initial load doesn't kick in, just in case.

Danny Brown
Danny Brown

Hey there mate,

It has been a while - hope you're well! The little star is a Disqus feature that's kinda like a "favourite post" option, like Twitter has. I think it's just there for effect. :)

Danny Brown
Danny Brown

Hey there mate, It has been a while - hope you're well! The little star is a Disqus feature that's kinda like a "favourite post" option, like Twitter has. I think it's just there for effect. :)

Danny Brown
Danny Brown

Exactly, miss - and considering mobile browsing especially is only going to grow, if you're not ready for it then you're not ready for more customers. Cheers!

PS - Your design is awesome!

Danny Brown
Danny Brown

Exactly, miss - and considering mobile browsing especially is only going to grow, if you're not ready for it then you're not ready for more customers. Cheers! PS - Your design is awesome!

Lior
Lior

Danny Brown Lior Thanks Danny!  I hope you find it as helpful a tool as I do.

andrea
andrea

THanks for that. I've had a look and it seems that my site is not one of those that should worry (not that I understood most of what he was saying, but I think I got the gist of it...).

However one question (that perhaps I should put to the Genesis people), some of your pictures do not get rescaled. For example, look at the Oracle post and the picture towards the end of it. Also in the Livefyre one most of the pictures are not really visible from a mobile.

Something else to be considered is where the ads (if present) are going to be positioned. For example, on a mobile you have the "subscribe" box right at the top, but the rest of your side bar end up right at the bottom. Did you choose that or is the theme doing what it thinks is best?

andrea
andrea

THanks for that. I've had a look and it seems that my site is not one of those that should worry (not that I understood most of what he was saying, but I think I got the gist of it...). However one question (that perhaps I should put to the Genesis people), some of your pictures do not get rescaled. For example, look at the Oracle post and the picture towards the end of it. Also in the Livefyre one most of the pictures are not really visible from a mobile. Something else to be considered is where the ads (if present) are going to be positioned. For example, on a mobile you have the "subscribe" box right at the top, but the rest of your side bar end up right at the bottom. Did you choose that or is the theme doing what it thinks is best?

Danny Brown
Danny Brown

Thanks for that heads up, will check it out!

Responsive Media
Responsive Media

Hi for your images you can use http://adaptive-images.com/ which works well and solves the hassle of uploading multiple size images. I use the bootstrap framework and integrate concrete5 which gives a nice result. One thing to understand is that when designing , work from mobile up , something that took me a long time to get used to.

Danny Brown
Danny Brown

The picture resizing is my "fault", as I sometimes use images that have sizes that are outside the scaling of a responsive design. I can resize when uploading but for now I haven't done that.

With regards the ads, it depends on the coding of the theme. Although you can edit to reposition - I just prefer having the content first.

Danny Brown
Danny Brown

The picture resizing is my "fault", as I sometimes use images that have sizes that are outside the scaling of a responsive design. I can resize when uploading but for now I haven't done that. With regards the ads, it depends on the coding of the theme. Although you can edit to reposition - I just prefer having the content first.

Trackbacks

  1. […] sure your site is mobile friendly – consider revamping its design now. Ideally move to a responsive design that automatically resizes the screen and supplies the optimal user experience for your […]