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