Convert a 960 Grid Website Layout to a Responsive Design

By Mike Sinkula, 2013Convert a 960 Grid Website to a Responsive DesignShh… don’t tell anyone. But, it seems that the whole world of website content design has changed. No longer can you get away with having a website that doesn’t take into account displaying the content correctly on the whole series of mobile devices.

So, what do you do? Do you start over from the ground up, or can that old website be converted to display the content correctly at all of the newer and smaller resolutions?

If you are anything like me as a web designer, you have really come to love the 960 Grid System over that past few years. And, you have most likely spent many an hour perfecting your website’s content to pixel perfectly align to it’s most amazing and simple 12 column grid.

You might even go so far as to steal their background image to re-purpose for your own use to make sure that everything is lining up to the grid correctly:

12 col grid

 

So, now what? After I’ve spent a million hours designing this website and tweaking that CSS file for what seems like forever, do I really need to redo everything? The answer, quite simply, is no. No, you don’t need to start over. All you need to do is write a little more CSS and use a touch of JavaScript to make the content and navigation display differently at the different resolutions.

However, before you begin this endeavor, I recommend reading Responsive Web Design by Ethan Marcotte. It’s something that you can read in a night and it will cover all of the basics you need to know. I read this before I turned my blog into a responsive design.

The Viewport Meta Tag

The first thing that you will need to know is that you will need to have your website inform the devices how to display your content correctly.

You will need to add the viewport meta tag into your head tag:

This will allow your website to work on all of the popular mobile devices.

But, if you don’t want your website to re-scale in that funny way on the iPhone, you should turn off user scaling by using:

Responsive Typography

If you come from a traditional print background, you are used to always having pixel perfect control over a fixed width world.

My advice to you… get over it. I did. You are now going to have to get used to using percentages and ems in your typographic design.

See Also: Why Ems? | CSS-Tricks

The first thing that you need to do to help you get through your pain is to set all base font sizes and line heights in your body tag:

This will set all typographic elements on your page to a default 16px font size and a 24px line height. From there we can start to convert everything else to ems.

You will also want to add one more line of code into your CSS if you don’t want your body copy to re-size on your iPhone:

Responsive Imagery & Media

You will also need to get used to the idea that your images and media will need to scale according to their parent elements as well.

You will need to set all image and media tags to a “max-width” of 100%:

This will allow the images and media to scale down uniformly as their parent elements scale down around them. This will also overwrite any width settings declared in the image tag.

Responsive Layout with Media Queries

When it comes to making the rest of the layout, you can still leave your measurements mostly alone at screen widths above 1024px wide instead of converting everything to percentages right away. If this sounds funny to you, my reasoning is that I have experienced some issues with elements not lining up correctly when I create percentages for widths above 1024px.

Here you see the markup code for my #header element that has two child elements of #logo and #tchotchkes:

The one change you will need to make, though, is to your parent layout elements. In this case I have reset my #header from a fixed width of 1000px to a “max-width” of 1000px. But, notice that I have left the child elements of #logo and #tchotchkes at their original fixed widths.

You can use this same methodology for all other parent layout elements that contain child elements.

Here you see the markup code for my #middle element that has two child elements of #content and #sidebar :

I have then reset my #middle element from a fixed width of 940px to a “max-width” of 940px and have left the child elements of #content and #sidebar at their original fixed widths. Notice that the background image for the #middle element is set to scale too by setting the background size to 100%:

It isn’t until you get to a resolution below 1024px wide that you will need to convert all child element widths to a percentage of their parent element widths so that they will start to responsively scale:

With all of these elements set in motion to scale responsively now, you should see your site start to scale down at smaller resolutions! However, you will also need to make some adjustments to your design at some of the smaller resolutions.

For instance, as my site scales down, there comes a point in time where having the #logo and #tchotchkes  elements and the #content and #sidebar elements floated next to each other either doesn’t fit anymore or just becomes too unbearable to look at.

Therefore, I have chosen to hide the #tchotchkes element and reset the size and placement of the #logo element. I will also need to set the #sidebar element to clear underneath the #content element.

For this design, I have chosen the break-point of 600px wide to do such a thing.

Responsive Navigation

Now, to deal with the navigation scheme.

In short, there are many different ways in which a designer can choose to deal with how the navigation scheme behaves at the smaller resolutions.

Because my blog gets separated into two distinct navigation schema of “pages” and “categories” I have chosen to go with the “select menu” approach.

In order to set this up, I will need to create the markup for the select menu navigation using the WordPress functions of ‘drop-down pages‘ and ‘drop-down categories.’ I will also need to dynamically create links from the select menu options to both pages and categories that are pulled from WordPress page and category IDs using a bit of JavaScript.

If this looks a little intense, it is because the only way to have a select menu work without a submit button is to use JavaScript:

The HTML output that the WordPress functions of ‘drop-down pages‘ and ‘drop-down categories‘ produces looks like this:

Now that I have my navigation working correctly, It is simply a matter of hiding the traditional navigation and displaying the select navigation and styling it a bit at the break point of 600px wide:

And, as Bob is your Uncle, I now have a responsively designed website for mobile devices!

I am so glad that Mike modified his website for mobile devices. Now, I can see all of the new cute pictures of Gus from my phone!

— Buddy Sinkula, Jr.

I hope this tutorial helps you to convert your 960 grid website to a responsive design that works on all of the mobile devices.

View Code: https://github.com/msinkula/mikes-desk-mess