A Beginner’s Guide to
Mobile Responsive Design

In his first season as an NFL quarterback, Peyton Manning won three games and threw more interceptions than touchdowns.

Manning would prove resilient however, adapting to the pro-style game very quickly. In eleven of the next twelve years the Colts would go on to win at least ten games per season, and make the playoffs each of those seasons.

What’s Manning’s secret? Most football experts would say it’s his ability to “audible” or adapt, no matter what circumstance he finds his team in.

Being able to easily and automatically adapt is a critical key to survival and success.

It’s true in sports, nature, business, and yes, web development.

What Is Mobile Responsive Design?

When a website is responsive, the layout and/or content responds or adapts based on the size of screen they are presented on.

A responsive website automatically changes to fit the device you’re reading it on.

Typically there have been four general screen sizes that responsive design has been aimed at: the widescreen desktop monitor, the smaller desktop (or laptop), the tablet and the mobile phone.

As you can see in the examples below, as the screen gets smaller, the content shifts and changes to the best display for each screen.

Why Should I Care About Mobile Responsive Design?

In short, you (publisher, developer, and designer) should care because you want the visitors to your website to have the best experience possible, without forcing them to adapt themselves.

There are essentially two ways you can give your audience a good experience utilizing responsive design:

The first is optimizing the layout of the content.

If a user is browsing from a mobile phone, they generally don’t have a lot of screen real estate to work with. Phones today will typically zoom out automatically, so that the entire website can be seen onscreen. This can be good, as it gives the reader access to the entire sight, but it can also be frustrating when trying to find information that is located in a tiny part of the upper right of the screen. If you could move some things around, make some things bigger and not have as many columns you’ll give your mobile reader a much better experience.

The second is to adapt the content that is shown.

If you own a restaurant and a potential customer is browsing your site from a mobile phone, chances are they aren’t that concerned with how pretty your site is — your foody blog with the awesome slideshow of delectable dishes scrolling from side to side isn’t very useful in that situation. They want to know what your hours are, where you’re located, how to make reservations, and want a look at the menu.

Your potential customer browsing from a desktop computer probably isn’t looking to eat right now, and isn’t in a hurry to see where you’re located and what your phone number is. Most likely he’s looking to see if you offer a good atmosphere and what types food are available.

These are obviously generalizations but you can see the benefits of having differing content presented to people in different screen viewing circumstances.

Mobile responsive design takes care of this all “on the fly”, and without multiple versions of your site to maintain.

How to Easily Create a Mobile Responsive Website

All of this may be new to a lot of you, and fairly intimidating since it requires not only a change in code and design, but in your overall web strategy and philosophy.

Thankfully, the team at StudioPress has their capes on and is here to help you out.

We’ve written several articles that detail how you can get started on your own responsive design, starting with the philosophy behind it and then moving on to actual coding out flexible grids and media queries:

If all that is not your cup ‘o tea, we’ve created several themes that are responsive out of the box. You can view them (and purchase them) below.

And stay tuned, we’re now in the process of making every Genesis Theme responsive…

Agency

Agency Theme

Balance

Balance Theme

eleven40

eleven40 Theme

Focus

Focus Theme

Generate

Generate Theme

Streamline

Streamline Theme

Mobile Responsive Design is The Future of The Web

Mobile responsive design is all about automatically delivering your audience the content they want, within the context that they’re viewing it.

It is revolutionary for online publishers, because (for most) responsive design eliminates the need for multiple versions of your site, or exspensive app development and maintenance.

One website, multiple versions.

Perfect simplicity for the publisher, great utility for the reader.

Comments

  1. Hi Josh
    “Perfect simplicity for the publisher, great utility for the reader.”

    Nice finish to the article – would you like to write my headlines?

    Useful article with good content and useful examples.

  2. Hi Josh,

    Thank-you for your articles on responsive design. They are so helpful. Do you know if Genesis has a skeleton child theme that is flexible for building out custom sites with?

  3. Josh,

    Just a quick question. Do you know if there are plans to update the Agent Press them to a responsive theme?

  4. Josh-

    Good article. Thanks for putting it together.

    How do you think images are best handled..for example, a long logo (wider than 320px for example)…replace w/ text, scale it, use a script like: http://filamentgroup.com/examples/responsive-images/

    Interested in your thoughts.

    • What we did on the StudioPress site is create a different logo for display on smaller devices. You can see our site logo has the “by Copyblogger Media” on it, but on smaller screens, it’s just the centered StudioPress logo.

    • This is an area that is still being heavily experimented with. The problem is what to do when the page loads initially on a mobile device – right now most people have just been loading the largest image and then relying on img {max-width: 100%;} in their css to scale it down.

      Obviously this is not ideal because you’re using up precious resources loading large images you don’t need on your mobile – so you have solutions like filament’s which seem to work pretty well but is not totally ideal – this article from A List Apart sums it all up pretty well – http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need

      Short answer – I don’t have one…yet…but neither does anybody else.

      Its wide open for someone to come in and figure out the perfect solution which would make you an internet rockstar.

  5. I’m loving the Mobile Responsive themes. It changes everything when I look at a website on my iPhone.

  6. I’m looking forward to the NEWS theme getting this update. I prefer to not dab to much into coding and will wait for the update so i’ll have less coding problems to worry about. lol

    Or i’ll bother the people on the support forum again. :P

    • I second that Derek. I’m debating going to a new theme (I’ve just started) and the News theme here is among the best. But, it sounds like it will be awhile before it’s updated to be responsive. That said, I do give kudos that StudioPress isn’t setting unrealistic expectations about this happening overnight.

  7. I wish more articles on responsive design mentioned what to do when some content CANT be responsive and resized to fit the screen without scrolling. For example, how Studiopress itself handles this page: http://www.studiopress.com/responsive/?demo.studiopress.com/focus (which by the way, doesnt work properly on my Droid 2. It cuts off some of the 1024 box). Or how you would handle a stray page on an otherwise responsive site that used an iframe.

    I learned what to do in these situations thanks to the brilliant Studiopress forums (worth ten times what I paid for access to them), but pretty much every article on responsive web design skips over these situations.

  8. Great article and I have to say I am really excited as a developer to see that all the themes are going to get a makeover for Mobile Responsiveness :) Thanks for the update and the valuable information.

  9. How do you get the preview images of the different size web views?

  10. Studiopress itself has a tool for showing sites at different sizes all on one screen:
    http://www.studiopress.com/responsive/

  11. Thanks for this post you are really explaining the benefits so clearly, and thanks for the Balance child theme I love it.

    A huge Studipress fan!

    -Mattias

  12. Hi Josh,
    I have a great read. Looking forward to other themes updatre.

  13. The article states that there are two ways to give the user a good experience utilizing responsive design. IMHO, you missed a third, very important way. The third way is to utilize functionality available on a device that is not available on other devices. Example: using your restaurant analogy, on a smart phone, utilizing the geo capabilities, could instantly give the user directions from where he is to the restaurant. Now, unless the term responsive design also includes the ability to take advantage of the functionality specific to the device, then IMHO, responsive design does not cut it!

    • Stacy Thompson :

      Josh, A great article and some great themes. Thanks for helping the community understand responsive design. Greg has a point that seems to take responsive design to a higer level. I’d also like to add to the “wish list”, “click-to-call” for any phone number that is on the website.

      -Stacy

      • On my phone, all telephone numbers are clickable. Aren’t they on yours?
        I will say that some additional styling would be good, like on Google Search results on phone – a box around a phone number, inviting you to click to call.

    • Responsive design isn’t necessarily about the functionality – its about creating an experience that enhances that functionality.

      I think you make a good point but one that would advocate for having a “mobile first” philosophy when designing and developing.

      Keeping with the restaurant analogy your responsive design could highlight the fact that your site can give the user directions and using a responsive layout could place that functionality in a more prominent location but they really are two separate pieces that work together.

      • Not that I disagree this would be beneficial, but isn’t that the point of not having to maintain multiple versions of a site? Either you have functionality and/or content specific to devices or not. Maybe there could be widget areas specific to mobile or some other way to manage custom content?

  14. I really love mobile responsive design WP themes, that’s why I decide to buy eleven40 Genesis child themes to use for my blog, wow, that’s theme is working very well. Thanks for your guide, I got it and made my blog being responsive design. Nice tutorial.

  15. Interesting article for designers.

    Now tell us when will Brian update the highly popular Lifestyle Theme to be mobile responsive?

  16. Josh,

    thank you – a good read.

    Request that Enterprise Child theme be made mobile responsive please.

    Cheers,
    George

  17. One thing I noticed about the responsive child themes available is that the responsiveness kicks in at an odd number. The sizes that responded were 1200px and 800px. The only issue with that is the .wrap is set at 960px. So when the site is in 1200px style sheet mode and the browser goes less then 960px, it stays in 1200px mode.

    On my site it started messing up things a bit. I changed it to rearrange once it hits the size of the wrapper or less, this way no matter what size the browser is in, it would always look right and you won’t have to scroll or have elements be pushed down.

    Any thoughts on that?

  18. We are about to purchase the AgentPress theme but are really hesitant as we would like to go with a responsive theme. Would we have to purchase the responsive theme later or would it be an update? Do you have any idea how much reconfiguration/redesign would potentially be needed to transition from the nonresponsive to responsive? IE are we starting over at that point? I’d hate to invest in ‘old’ technology.

    • As we update themes to be responsive, all current owners will be given the update free of charge. It’s hard to predict the exact things that will change as we update it, but we will do our best to make updating as simple as possible :-)

  19. Nanette Circo :

    Thanks StudioPress for this design element—I love and advocate Josh’s “mobile first” philosophy as well. Many of my small business clients are asking for a custom mobile website with the “click to call”, “mobile map w/ directions”, mobile site analytics….features as well.

    Right on Josh and thank you StudioPress!

  20. While it is important to adjust websites to mobile devices I think over the years it will become less important, because mobile device screens are becoming bigger and bigger and unless this site is not flash based there wont be any problem to use and view properly.
    But the site must be easy to use with touch as as well with mouse and that is very important.

  21. One of the many things I love about StudioPress is that you folks are on top of the situation before I’ve even begun thinking about it. I signed on when the business first launched–and immediately found the guidance and help I needed. Thank you!

  22. I pulled up http://www.StudioPress on an iPhone and it looks great. The only problem is, it looses the “forest view” of StudioPress and forces the user to scroll the entire length in the hopes of finding what they need to find.

    What would be the best product, IMO, would be the inclusion of a toggle button that would allow the user to see at least the home page in its entirety. That way the user can quickly see what is available (best done I think if “modular” design is used), imprint a more complete “vision” of the company, then be able to hone in on the specific area of interest more easily using the mobile responsive.

    Since mobile is used more and more, I think anyone with a web presence needs to cater to that, however, for some more than others, that presence and image of the whole site IS a large part of who and what they are and is a large part of their marketing. I’ve looked at a couple of my favorite sites, and I don’t think it would be the same experience, especially if my first exposure to them was solely what is seen on the mobile platform.

    • Thanks Ann, it’s something we’ll definitely consider adding.

    • Ann I think you are exactly right and your observation gives more credence to designing for the mobile platform first instead of adding it on later.

      Since this iteration of StudioPress was not specifically designed with mobile in mind there are going to be things that don’t work as well and as Brian said this is something we will be looking at in the future.

  23. Another great article, Josh! After reading your article last night, I installed the Focus theme and love it! Great work you guys!

  24. jeffrey gordon :

    When Agent Press gets update to mobile responsive, is it likely RealPro will be as well? Or is it completely separate? I am a bit confused about the relationship between the G theme, AgentPress and RealPro.

    wanting to pick from one or the other this month to start a new re site.

    thanks

    jeffrey