Mobile Responsive Design: The Flexible Grid

I know I’m a little late to the game, but I’ve recently started watching The Wire. I’m into season three now and just watched episode four titled “Hamsterdam.”

In that episode Major Colvin is faced with the task of reducing violent crime in populated neighborhoods. Knowing he has limited manpower and resources, he decides to re-locate the dealers and users from communities inhabited by innocent people to three different zones where there are vacant buildings.

The major tells the dealers that they are free to sell in these zones without penalty from the police. They will not be arrested or harassed as long as they abandon their current street corners and move to this new territory.

A minimal number of police are then stationed around the borders of these zones, creating boundaries for the dealers to operate.

In the TV series the idea works, until the press gets wind of it and blows it up to the public. This whole scenario intrigued me, and the question I had is, “what fundamentally made this work?”

What Does This Have to do With Responsive Design?

The reason the Major’s plan worked is because he was willing to give up control and be flexible – yet still set boundaries. We are going to do this with our websites. We’re going to give up control, be flexible, but still have some boundaries.

Now I know you all are asking the same question a low level dealer named Fruit asked.

Why ya got to go and [mess] wit da program?

And the answer to that question is, “Because there is a better way to do things”.

We as designers and developers face a similar situation. No, you won’t receive a beating because you rolled up on another dev and jacked his code, but we do have to manage our resources – and we need to keep our users happy while delivering a good experience.

Words of Wisdom from a Technology Icon

Steve Jobs said that the customer doesn’t know what they want, and we need to design and control their total experience. This is the world we have typically been living in. But with the influx of mobile phones, tablets, and other devices, it would require multiple sites or massive style sheets and scripting to cover every possible situation a user might encounter.

We’re talking browser to device to orientation to operating system and on and on. Frankly, that’s impossible. We don’t have the manpower to place on those street corners.

So the answer is to give up control, be more flexible, but still set some boundaries to keep the peace. This is responsive design.

Origins & Ingredients of Responsive Design

In 2010 Ethan Marcote wrote an article for the web magazine A List Apart, where he coined the term “Responsive Design.” In the article, Marcote argues that we need a better way to present content to the variety of canvas sizes we are being asked to design for (including mobile phones, tablets, netbooks, large screens and others).

Food Sense screenshot

The site Food Sense changes layout based on screen width using responsive design. According to Marcote, there are a couple of ingredients needed to effectively create “Responsive Design.”

  1. A flexible grid – including layout and images
  2. Media queries

Flexible and fluid grids have been around since the beginning of the web, and were very popular at the beginning. Only when people wanted to start having more control over the design and look of the web did table and fixed width layouts become popular.

While media queries are the real secret to making your site responsive, you can save yourself a lot of work and code by using a flexible grid approach. By using a flexible grid you can ensure your site will re-size on its own without having to have media queries. You can then use media queries to fix all of the little details that will make the site shine.

We’re going to look at five components that make up a flexible grid and how to use each.

  1. Flexible Type
  2. Flexible Containers
  3. Flexible Margins
  4. Flexible Padding
  5. Flexible Images

Flexible Type

The most common approach to styling type today is to use pixels. Again, this gives the designer exact control over how large or small the type will be, but we want to start thinking proportionately.

But why? Don’t modern based browsers handle pixels just fine?

Yes – but here is a great example of managing our resources, i.e., our time. Using proportionate values in our text will save us many lines of code in our media queries. If we want to have smaller or larger text based on screen size we only need to change the parent element. Because we are using proportionately sized type the one change in our media query will affect all of the type in our base css file.

(If none of this makes sense yet keep reading. By the end of the article you’ll slinging around responsive nomenclature like you’re a real dev.)

So, if we’re not using pixels, what are we using? We’re going to use ems. And to be able to use them effectively in our design we’re going to have to do a little math. Don’t freak out – we’re talking fourth grade stuff here – basic division. Here is our formula:

target ÷ context = result

Target – the font size we ultimately want to be displayed by default
Context – the base font size our browser recognizes (typically 16px for most browsers)

So if I wanted a headline in my site to be seen by default at 32px, and I wanted to express that size in em’s, I would plug that into our formula.

32px ÷ 16px = 2

In Marcotte’s book he makes a couple of suggestions. When you use the formula and you come out with some crazy long decimal point – keep the whole thing. The computer can calculate it for you and it will be more accurate. He also suggests to note the formula next to the font size in your css for easy reference in case you want to change something later.

font-size: 2em /* 32px/16px */

Flexible Containers

The beauty of the formula we just learned is that not only will it work on type, but it also works nicely for our divs that make up the layout of our site.

We’re going to use the default Genesis theme as an example. In the graphic below you can see that our design has a width of 960px – broken up into a header with two containers and a body with three containers all separated by gutters of 20px. We’re not dealing with the navigation at this point for simplicity.

Here is the basic HTML for our structure:

<div id="wrap">
    <div id="header">
        <div id="title-area"></div>
        <div class="widget-area"></div>
    </div>
    <div id="inner">
        <div id="content-sidebar-wrap">
            <div id="content"></div>
            <div id="sidebar"></div>
        <div id="sidebar-alt">
    </div>
</div>

And here is the basic CSS for our structure:

#wrap {
    width: 960px;
}

#header {
    width: 960px;
}

#title-area {
    width: 400px;
}

#header .widget-area {
    width: 540px;
}

#inner {
    width: 960px;
}

#content-sidebar-wrap {
    width: 790px;
}

#content {
    width: 470px;
}

#sidebar {
    width: 300px;
}

#sidebar-alt {
    width: 150px;
}

The Base Width

Knowing our target values, the first thing we have to establish is our base width. This could be another article in itself, because as far as I know there is no standard by which to determine this. In fact Marcotte admits to coming up with his base width for the examples in his book arbitrarily.

When looking at the default Genesis theme on my 13″ MacBook Air, my browser viewport is approximately 11″ wide. There is 1.75″ of space on either side of my content. This means that when using a base width of 960px, it takes up approximately 70% of my viewport width.

We could use this figure as our base width, but it kind of defeats the purpose of our site being responsive. We would like our site to be able to scale up to accommodate a larger monitor as well as scale down to fit on mobile devices.

A lot of people, including Marcotte, are using a figure around 90%. This seems to fill the viewport but still leave enough white space so that a centered layout doesn’t feel cramped.

With that decision made we’ll set our base container #wrap to be 90%. And we’ll plug in our formula for the other widths to come up with our proportional sizes.

Applying the Formula

Remember, the contextual width set in the initial design for all the inner containers was 960px – so we’ll use that figure in our formula.

The only difference in our formula is that since we are expressing our figures in percentages, and not ems, we need to multiply our result by 100 (or simply move the decimal point 2 slots to the right in our final calculation).

For example, to figure out the proportional width of our title area, we take our target which is 400 and divide that by the context which is 960 to come up with .41666667. Since we are expressing our result as a percentage we need to multiply by 100 and are left with a percentage of 41.666667. Again, it is suggested that you leave your long numbers in your style sheets as they will be the most accurate.

#wrap {
    width: 90%;
}

#header {
    width: 100%; /* 960px/960 */
}

#title-area {
    width: 41.666667% /* 400px/960 */;
}

#header .widget-area {
    width: 56.25% /* 540px/960 */;
}

#inner {
    width: 100% /* 960px/960 */;
}

#content-sidebar-wrap {
    width: 82.291667% /* 790px/960 */;
}

#content {
    width: 48.958333% /* 470px/960 */;
}

#sidebar {
    width: 31.25% /* 300px/960 */;
}

#sidebar-alt {
    width: 15.625% /* 150px/960 */;
}

Now that we have our containers flexing and bending to our will, we need to clean it all up by applying the same thought to the widths of our padding and margins.

While the formula is the same, the context for each is slightly different.

Flexible Margins

When determining the context for margins, you are going to use the width of element’s container. We’ll use our alternate sidebar as an example. We have an unordered list that has a margin-left set to 25px. Our element’s container is set to 150px, so that determines our context.

.widget-area ul {
    margin: 10px 0 0 25px;
}

.widget-area ul {
    margin: 10px 0 0 16.666667%;
}

So our formula would read: (target) 25px divided by (context) 150px, and the result is a margin of 16.666667%.

Flexible Padding

When figuring the context for padding, you are going to use the width of element itself. For example, in our sidebar we have a widget that has its paragraph padding set to 5px 10px 0. The width of the paragraph is being cascaded down from the sidebar which is 300px.

.enews p {
    padding: 5px 10px 0;
}

.enews p {
    padding: 5px 3.33333% 0;
}

So our formula would read: (target) 10px divided by (context) 300px, and the result is a padding of 3.33333%.

Flexible Images

The last thing we have to do is get our images to work with us. Thankfully, there is a very simple solution. There isn’t even any math involved. Simply set the max-width on your image container to be 100%. That’s it.

img {
    max-width: 100%;
}

Looking Forward

This is the first step in making our sites truly responsive. In our next article we’ll hit up media queries which are the real power behind responsive design.

Resources

Comments

  1. Josh, this is an excellent article that gives simple examples on how to think responsive design. I have been reading many articles that talk about responsive design, and they usually make it seem much more complicated than this. Thank you for breaking it down and making it very simple to understand and apply. I’ll be looking forward to the next articles!

    • Glad it was helpful and easy to read for you – that is always a major goal of my writing. No need to take something and make it seem more complicated.

  2. First: The Wire is like the greatest show ever.

    Second: This is a seriously top-to-bottom killer article, huge step for Genesis.

  3. Hey Josh, thanks for the details explaining the move forward… Both You (+ Steve) are right, the end user’s (customer) experience is the real reason for improvements in responsive web design.

    • Yes and something I didn’t point out in the article is that when you do responsive design right you end up controlling more of the user’s experience in a way that benefits them.

  4. Nice article Josh. Responsive design seems to be a very popular topic at the moment (rightfully so!). Its nice to see the workings out behind what you are doing.

  5. Very nice. I have to study this some more when I get to the Web Design part of my new venture.

    Having taken advantage of the Sale ending yesterday buying the Pro package I have the basis, but still have to finish everything up I guess :-)

    Will this also play a part in you redesigning all the child themes and if so will this be built in so to speak?

    I am asking as I read that it was planned to make all themes work on most devices and that the first theme would be ready soon.

    Since that would make my part easier I have to ask when you think the first one will be done?

    • We are in the process of making our themes responsive for mobile and other devices. It is a time consuming process though so I don’t have a time frame in which they will be converted. The first theme that will be responsive for mobile and other devices will be the new Agency theme.

      • Hey Josh … met with a prospective client last night and I mentioned to them that StudioPress was in “the process” of redesigning all of their themes to be design responsive. His question to me was, “If we pull the trigger now on a StudioPress Theme how hard will it be to convert the same theme to a design responsive redesign when the template we chose is indeed redesigned?” How would answer his question?

        • It really depends on how much you modify the theme. If you don’t do anything it should for the most part be very simple – because we are not really adding any markup to the themes. There might be an occasion where that is necessary but I don’t foresee it at this point.

          If you add in your own markup (a div here are there) it could cause problems because obviously we won’t have any idea what everyone is modifying.

  6. Very well written & 100% agree with the decision to adopt responsive design. Looking forward to whats to come!

  7. Loved the article and am looking forward to the migration of the studiopress themes to a responsive design.

    I did notice an error in the article. . .

    ” . . . multiply our result by 100 (or simply move the decimal point 2 slots to the left . . . .”

    You move the decimal point 2 slots to the right when multiplying by 100.

    Love the work.

    • Hi Alan, thanks for pointing that out – my masters in mathematics dad would frown at me for not checking my work :)

      I have updated the post.

  8. Extremely well written article Josh.

    A very difficult topic to discuss, and you did it well, breaking it down into pieces. I fully support responsive design @ Genesis and look forward to the future…

  9. Hi Josh:

    Superbly written article! I am still fairly new to WordPress development having signed on last year with the Pro package yet was able to understand every word you wrote. You guys at StudioPress are amazingly progressive. I’m happy to be part of this development community.

    Thanks for your efforts.
    Rudy in Ottawa

  10. Excellent article that does an exceptional job at laying a great foundation for moving forward with responsive design. Looking forward to the next article. Thanks for sharing.

  11. Great article Josh! This is by far the best explanation I’ve read on implementing responsive web design. Looking forward to the next one. Keep it up!

  12. I think that is the single best article and tutorial (so far) on the SP website, including all the ones at dev.studiopress.com – excellently done Josh. Although it covers content which is available elsewhere online, the technique is definitely under-used, and you’ve guided new and experienced users through it in a way that will benefit everyone. Bravo :-)

  13. Thanks Josh. When someone mentioned responsive design I started freaking out. I feel much better now.

    Mike

    • Glad I could be a calming influence! :) I think you’ll appreciate Thursday’s post as well – it will hopefully pull everything together for you.

  14. Gary’s right, this is really clear and well written, thank you!

    I don’t claim to be an expert on the subject, and could have it totally wrong myself… From what I’ve read on the subject however my understanding has been that what this article covers is really just flexible/fluid layout which may lay the ground work for responsive design but is not alone doesn’t’ really qualify as “responsive design”.

    My understanding however was a design really becomes responsive when the elements on the page actually change or rearrange according to screen size and calling a “fluid layout” which has been around much longer than “responsive design” responsive kind of muddies the definitions.

    Again, I mean to be posing this as a question, perhaps the semantics are still getting hashed out or perhaps they are solid and I just flat out misunderstand them.

    • Jon you are correct – this is a two part series in which we’re laying the groundwork in this post with flexible grids. Thursday we’ll put up another post that details how to use media queries which are the real power behind responsive design.

  15. Very good read on responsive design with nice tips … I was looking for this … thanks!

  16. Josh,
    Super tut! I just took the Sample Child theme and made it shrink nice and gracefully. I even stuck in a media query to make the sidebar vanish past a certain minimal size.

    It’s been SO long since I’ve attempted flexible layout, and this made it remarkably easy!

    Now all I have to do is get my more OCD clients to buy into the non-fixed-width scheme. When they see the dollar signs for getting 3 or 4 layouts in 1, I think they’ll relent!

    Thanks again! Dave

  17. What’s the plan – especially the timeframe – for the incorporation of these techniques into the Genesis child themes? I’m not clear whether I should try to adapt my customised child theme or wait for Studiopress to do it.

    • We’re hopefully going to release the updated Agency theme very soon which will have this CSS included. It’ll be a while before we have the chance to incorporate all of our themes with it, as it will take some time to get it right wich each theme.

  18. TV is so ’60s; there is good cause for the name: “the boob tube”.

    There are proven valid reasons to place certain parts of websites in defined locations.
    I disdain sites that move around (whether during loading or after).
    I use 9 different computers in my office; I expect web pages to be consistent across all even tho’ screen size and OS vary. Browser variations are more than 15, with little respect for IE (but I have 5, 6 and 7 available if needed). I want to tightly control the look of my sites.

    Chance doesn’t intrigue me, except for Powerball. :-) I am not sold on this approach.

  19. I can’t wait to see this whole new line of responsive themes implemented.

    What can we do as users to help encourage the process?

    Make a video on how to do one and others could try to help out?

    I was thinking maybe have volunteers help modify CSS files and what not.

  20. This really is a great article!, only I was still wondering one thing. What are the best resolutions to develop a website when you want to make it for smartphones, tablets, laptops and monitors?? At some places I see 4, or 7 resolutions but some people say it is even up to 14 resolutions. Is there anyone who knows the standard resolutions in that??

    • Hi Marco,
      It really depends on your user base and what devices you want to spend the time developing for. This is something we are still working out ourselves.

      When I did freelance work I used Andy Clark’s Hardboiled CSS3 Media Queries as a guide. That article has a list of the most common resolution and devices to design for.

  21. Josh, This was such a wonderful post… I love the analogy of “The Wire” – a really cool show btw.
    I am happy to see that studiopress is moving in this direction, but more importantly, impressed with how you shared the news. This is a perfect example of why Studiopress is so successful and has a loyal fan base and customer base. Keep up the great work. Thanks again for such a well written educational post.

    • Thanks for the kind words. I’m into season five of The Wire now and I agree it is a very cool show – one of the best ever in my opinion!

  22. I’ve been trying to get my head into responsive design for the past week. This is a great introduction!

  23. Hey Josh,

    Ok thanks a lot for your time. I will first spend some time on getting the design right.
    After that I will have a meeting with my colleagues of this project.
    Thanks a lot for the reply and the useful article.

    Grtz Marco

  24. You mean all the complicated maths work we did in high school might actually come in handy now!!? :)

    I’m so glad I invested in Genesis!!

  25. I totally love this! Great explanations and completely rebranding CSS conventions. I know I love working in pixels because of the preciseness but with all the different medias coming out, I think it’s important that web designers begin to adapt and get used to coding like this. It’s definitely the future.

  26. Great article. I made html5 patisserie template with 1140 css grid great for making a responsive design that is optimized to work on any device: iphone, ipad, small tablet, small phone. It can be used for variety of themes. Link: http://www.marijazaric.com/category/responsive-design-template/

  27. How does Responsive Theme Design blend in with Google or Adbrite Ads?

  28. Thanks for this post – I had just begun working on a responsive design child theme for Genesis and was deconstructing the basic CSS. I’d already done some of the math, but you saved me some time and made that a lot easier. I’m really glad that StudioPress is moving in this direction. This type of design also helps in making sites more accessible and that’s a very worthy – and soon will be mandatory – objective.

  29. Are we just supposed to make the horizontal widths responsive because nobody seems to be converting top/bottom margins/padding? Wouldn’t it look funny to have a 20px margin on a 320px wide display (smartphone size)

    • It really depends on your design. Typically a larger margin and padding works better on a smaller device because the more whitespace the easier it is to read and distinguish content. So typically when coming down from a large screen design those values are acceptable.

      Also you don’t have to worry about running out of screen real estate vertically.

      Now, that said – we are evaluating best practices going forward and some of the leading voices advocate designing for mobile first which would force you to choose your layout widths and heights specifically for the mobile device first and then adjust for larger screens.

      • Josh, with the principle of designing for mobile first, what should we be aware of if we are using idx plugins for displaying listings? Will these tend to break the design?

        • From what I’ve seen the idx listings are not flexible but as long as the widths are not calculated inline you should be able to override the css with your own calculations and styles.

Trackbacks