Mobile Responsive Design 101

Mobile Responsive Design 101

Reader Comments (56)

  1. Mobile Responsive design was a trend in 2012. Now, it’s a must for every blogger to have his mobile optimized for search engines.

    I think that a blog without responsive design isn’t a blog, because It loses a lot.

  2. I’ve seen a few tools to measure mobile usability. Chuck Martins book really pointed me to importance of mobile.

    Dara

  3. Well, I am not totally sure about it. I am measuring my visitors but I am no receiving so many visits from mobile devices. I know that it is a huge trend but at least, based on my analysis it seems to me that it depends on the niche you are involved. But of course, it is valuable optimize your site for mobile… period!

  4. I have been anxiously awaiting for the Agent Press Theme to be mobile responsive. We use this for our local Real Estate Brokerage. Do you have an ETA for the launch of all the themes being mobile responsive? I know our mobile traffic keeps growing and I feel I am falling behind.

    • Email clients are a whole different ballgame because they render content differently, support different standards and almost every major client does it differently. So in order to get things to look nice we have to code to the lowest common standards which don’t include support for responsive design.

      Hopefully in the future email clients will bring their standards up.

  5. Thanks Josh for a great post! But I think when we are talking about responsive designs & smartphones speed is one of the big factor which we can’t miss. People want the site to load super-fast on mobile devices.

    Responsive design is great but on another thought what do you think about mobile apps? Ebay, Etsy, Amazon all are using providing apps for better mobile experience. Donโ€™t you think Android or iPhone apps provide better mobile commerce experience than mobile sites or responsive designs?

    Not only mobile commerce even for the engaging users/readers online magazines like Mashable, TechCrunch, Huffington Post provides apps for better mobile friendly environment.

    What about mobile sites? Facebook, Twitter, Google, LinkedIn everyone are testing/using/experimenting both mobile site & mobile app.

    So between responsive design, mobile sites & android app which one will you choose and why?

  6. I recently built a new site with quotes. I used Bootstrap (from Twitter team) and Masonry (for Pinterest style pages). If anybody have questions for the integration of this, let me know.

    By the way, thanks for the Chrome Extensions.
    Just discovered a little bug because of it.

  7. Thanks for another great post Josh! For what it’s worth, and in case anyone isn’t convinced yet, I relaunched my kitesurfing website using CopyBlogger’s Magazine theme, which is… you guessed it… responsive… ๐Ÿ˜‰ We saw a substantial increase in mobile traffic, and most importantly a massive decrease in mobile bounce rate, and the time onsite for mobile has almost gone up to what it is for desk top traffic. All in all, well worth the effort of upgrading to Genesis…

    And because of that success, I decided to upgrade my money site to be responsive as well. It’s a flower and gift e-Commerce site, and we launched it just before Valentine’s Day. Results? Through the roof! Mostly because we were excluding mobile traffic almost entirely with a flash website prior to that… LOL

    The scary part is that since we launched the site on the 10th of Feb, mobile now makes up 20% of our traffic with a conversion rate almost equal to that of our normal traffic, so you can imagine what we were missing out on all these years. Oh, and the bounce rate for our mobile traffic is only 8% higher than our desktop, a sign that our responsive design must be working relatively well for our customers.

    So, if you’re wondering if it’s worth it… stop wondering and GET ON IT!

    …just my 2 cents.

    • Great thoughts Brendon – these are the kind of metrics that need to published to show the effectiveness of responsive design.

  8. Great post Josh! I’ve been harping about the importance of responsiveness to my clients for a while now. They’re starting to get it.

    Now with frameworks like Zurb’s Foundation 4 and Twitter’s Bootstrap making responsive themes for WordPress is easier than ever. I almost feel like I’m cheating.

    Keep preaching!

    -charlie
    “Another husband, father, follower of Christ and insane Bronco fan.”

  9. I believe strongly in responsive design, and all my sites are responsive (and all in Genesis too, for that matter) HOWEVER you do need to be aware that not all the ad networks (specifically Google AdSense) have caught on to this trend; despite the rest of Google’s strongly recommending responsive design for serving mobile traffic, there is no officially sanctioned solution for serving AdSense on a responsive (and staying responsive). So if that’s one of your monetization strategies, you need to plan accordingly.

      • Right. As recently as this week I asked my AdSense rep about this, and could not get a confirmation or permission to use this solution on a US site. The most they would say is that their position on responsive ads “was evolving” and hopefully they’d be coming up with something sooner than later. I suspect that not everyone within AdSense is on the same page yet, and I’d be wary of running that solution without a specific go-ahead (in your country) from Google.

  10. Good guide! I’ve made my site responsive recently and it is definitely worth it. Works and looks much better on mobile/tablets than it used to be while I was using one of the mobile plugins.

  11. Mobile responsive design isn’t the FUTURE of the web, it’s the present. And if you’re not responsive, you’re behind. (oh, snap, we’re behind).

  12. The mobile version of our new project is something that could definitely use improvement. Mobile is getting bigger and bigger so it’s pretty much become essential to be responsive and provide the best user experience you can on mobile devices. I’m sure that in the near future sites without responsive design will see a traffic hit from the search engines for not keeping up with current trends.

  13. Mobile responsive design is incredibly important especially for restaurants and their reputation as you mentioned. It is also important for those concentrating on local business and managing to bring in more clients through mobile search. One thing I did not see in the article that you should add is that having a push to call mobile friendly number that is in HTML format as well as directions that are easy to read or can open up in a map application in a users smart phone. So in that respect I disagree with your points made on section 2.

  14. Great Blog! Responsive design is one of the most crucial aspects to any website now due to the rise in people accessing web browsers through tablets and mobiles. Due to this it’s interesting to see how websites are adapting to this need and how the layouts are changing. What’s even more interesting is how it seems Facebook are creating a mobile app with the web in mind rather than the other way around.

  15. I actually don’t have to worry about the responsive design. I use Genesis Framework and am a huge fan of Brian Gardner. He’s awesome. I wonder how creative he is, to design such amazing themes. I badly love his latest re-design for his personal blog. It so awesome.

  16. Just for the record, I was there that fateful day and just reading the first few lines of this post gave me goosebumps. Candlestick Park ERUPTED like volcano and it didn’t take long for us to spill onto the field in hot joy.
    If any website I work on can have even a whiff of that kinda greatness, I’d be a made man.

  17. StudioPress does a good job of providing responsive themes. Unfortunately it seems to be very Apple centric, so the whole responsiveness is directed at iDevices.

  18. Mobile response design is essential. Relevant data shows that in 2013 more people will use mobile devices rather than computers to access the internet. This is the future.

  19. I guess lots of people (based on comments) are discussing this.

    We have a small network of WP sites, recently starting updating some with responsive themes. I think it’s a great solution. Mobile is continuing to grow, but I’m not quite ready to commit a lot of resources into it. Responsive is a great median.

  20. Definitely mobile is gonna be the future and everyone should have their websites designed as per the trends are. Looking at the trends that Smart phones and androids are going to rule.

  21. Hi,

    This might be a stupid question but bear with me cos I’m not as techy as most of you folks ๐Ÿ™‚
    Are wordpress responsive themes customizable?
    Can i change the layout? am i able to tweak and still get the responsiveness?
    Any idea how much work goes into it?
    Thanks

  22. I can agreee that responsive design is now not just a trend but a must learn technique for all designers, as more and more clients come to me requesting cross platform sites.

    There is no sure way to do this without some headache and a clear plan of action is needed as not all devices display sites the same. as is the failure of IE to keep up with css3 and html5 it’s launch of IE10 beta was just a fix for the issues all designers faced in IE9.

    I am excited about the future of web design and future technologies although some are hip at the time but rarely used like flash, but thats another discussion that can get heated.

  23. Good stuff…especially for local sites where a significant percentage of click throughs are from potential customers ‘roaming on mobiles’ – a MUST to stay competitive nowadays.

  24. Responsive web design is not only about adjustable screens and automatically resizable images, but rather about a whole new approach to web design. Given the rapid adoption of tablets and smartphones, web designers and developers want to eliminate the need for a different design and development phase for each new device. I use this tool to test my sites: http://herramientas-online.com/responsive/responsive-design-test-online.php in order to certificate them.

    Let’s try it. bye.

  25. Just a follow up question. We have the agent press site installed for many of our agents and across various platforms. Including a couple of remax specific sites.

    Any idea as to when agent press will be added to obtaim a respomsove update? or am i kus being a dreamer?? ๐Ÿ˜‰

    ReMax’s Paris91 Team

  26. Hiya,

    Slightly off topic, but can you or anyone direct me to where I can download those desktop/tablet and mobile screen images/framed for displaying web designs…as per your image at the top of the article?
    Thanks!

This article's comments are closed.