Responsive Design: For the Rest of Us

Responsive Web DesignOver the past year or so, responsive web design has got really big! If I had to boil this down to just one person, I would most likely say Ethan Marcotte made a huge push for responsive design. But, in reality, the push for responsive design is being seen everywhere online and is also being adopted in premium themes such as Genesis and Thesis.

If you’re anything like me, you’re tired of all of the fads that come and go. But, responsive design is not something that you can ignore.

Mobile is Getting Big

Facebook ScreenshotLet’s consider Facebook as a case study. An article on TechCrunch states that Americans now spend more time on the mobile version of Facebook than the desktop version. This statement came from data from a comScore report.

An article from CNN Tech also states that:

“more mobile Facebook users are posting by using the mobile site m.Facebook.com (a service that’s friendly to Web-enabled feature phones, the next step down from smartphones) than all of Facebook’s smartphone and tablet apps combined.”

In an article written in June 2012, The Guardian states that Android hit 900,000 activations daily.

The question is no longer, “Can I ignore mobile visitors? You should now be asking yourself, “How can I begin serving my mobile audience more effectively?”

There are two main ways you could go about this. You could design mobile apps for all of the major devices, ie. Android, iOS, etc. Or, you could design a responsive website, that would automatically adapt itself to the device it is being viewed on. The second option is called responsive design.

So, How Does Responsive Design Work?

Responsive web design, at its core, is built using CSS media queries. These media queries act very much like an if statement in general programming. Look at the following CSS as an example:

@media screen and (max-width: 600px) {
  // If screen is less than 600px, any css in here gets applied. 
  .class {
    background: #ccc;
  }
}

Art of Blog Responsive ScreenshotAs the comment above says, this media query works for screen sizes less than 600px. Any CSS you want applied for that screen size needs to go between the first bracket and the last one.

But, one media query by itself is not usually enough to make our website responsive. What ends up happening is we layer on these media queries as we progressively increase the screen size. Below is something you might see on an actual website:

@media screen and (min-device-width : 320px) and (max-device-width : 800px){
     //This would apply to most smartphones
}
@media screen and (device-width: 768px) and (orientation: portrait){
     //This would apply to iPad Portrait
}
@media screen and (max-device-width: 1024px) and (orientation: landscape){
     //This would apply to iPad Landscape
}
@media only screen and (min-width : 1224px){
     //This could be a normal size screen
}
@media only screen and (min-width : 1824px){
     //This could be a large sized screen
}

Right away, I want you to know that this is not the only way to set up your media queries. This is just one way that you can make it happen. Above, I am using a method known as mobile first. This way we start by loading the stylesheets for mobile, and then progressively begin to override styles for larger screens.

Is this a bit too much? It definitely will be at first. I still have to constantly resize my browser to test if my styles are applying correctly.

There’s Got to Be an Easy Way, Right?

Well, yes there is. Our two favorite WordPress theme frameworks, Genesis and Thesis, both have options that will get you on your way with a responsive theme for your website. As of now, Thesis does not have responsiveness built in, but Alex Mangini released a responsive skin for Thesis. Genesis includes many child themes that have responsiveness built in.

There are also several free WordPress themes that have built in responsive styling. Most notable is the Bones theme by Eddie Machado. I was introduced to Bones in January of 2012, and have seen this theme really grow since then. Warning: Although Bones is an amazing theme, it does not have the same options that Genesis or Thesis do. I recommend this theme for experienced WordPress theme hackers/developers/designers.

Get Involved

Do you have any questions or input that would help this discussion? If so, leave a comment below.

Do you recommend another responsive WordPress theme? Leave a comment below and let us know.

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Eric Binnion

Eric Binnion is a computer science student at Midwestern State University. When Eric is not online, he is usually volunteering in his community or enjoying time with his family. You can find Eric on Twitter.

Comments

  • Joel Schmidt says:

    Hi Eric. We have been getting by with the WP Touch plug-in for a couple years. However, we’re looking to up the ante on our site design, so we’re exploring switching to Genesis. StudioPress has put out some really sweet mobile responsive themes lately. I admit I’m a hack, but you’ve got me curious about Bones. I’ll check it out. Any cautions or tips? Thanks!

    • Eric Binnion says:

      Hey Joel,

      As far as caution goes with Bones, just be forewarned that if you want to go with Bones, that it will take a lot more customization than Genesis or Thesis. As Keith says in his comment, 15 of Genesis’s are mobile responsive. ;)

  • Keith Davis says:

    Hi Eric
    I’m a Genesis man and 15 of their latest themes are mobile responsive.
    When you think of how little a theme costs and compare that with the time you would have to put in to create a responsive theme…. it makes for an easy decision.

    Thanks for the media queries info.
    Always good to understand a little of what happens in the background.

    • Eric Binnion says:

      Hey Keith,

      Thanks for the comment! Genesis definitely is a good buy for the money, and with 15 responsive themes, it’s a good place to start when going mobile.

      No worries with the media queries. It’s a basic introduction, but at least it’ll give you a heads up when you start playing with the code yourself :)

  • Kurt Swann says:

    Eric,

    Just started a website and noticed the font I used for the header looks a little blurry in Firefox. I designed everything in Safari and it’s okay there. I’m using a theme called “Canvas” from WooThemes that says it is responsive. Since I’m a “rookie” I don’t know what causes the font issue. But after reading your post I realize my blog may look fine to me but not look too good to other people with different devices etc. Any thoughts?

    Kurt

    • Eric Binnion says:

      To test out the responsiveness, you could try to resize your browser. This should let you see what your website will look like at different sizes. Another tool for testing out what your website looks like in different browsers is Adobe Browser Labs.