Simplifying the buzz word “Responsive Design”

Every so often there is a new buzz word in the web development/design industry.  A few years ago it was HTML5 and CSS3.  Now it seems to be “responsive design”.  And of course this makes a lot of sense.  With more and more Internet users accessing the content on their laptop or desktop PC, tablets, and mobile phones, websites need to be able to be ready to serve up the content in an appropriate fashion.

In this article, I want to take a step back and help simplify this process because by stopping and thinking just a little bit, it doesn’t need to be complicated.  In fact it’s quite simple.

At the time of writing this article, my blog is only about 50% responsive, I am planning a new design soon that will take it to the next level.

First things first, do NOT change how you are already designing websites!  Designers please continue making your fixed sized designs in Photoshop.  This is the best way to get started.

Once your design is ready, slice and dice it as usual.  Set up your grid layout, get your fonts right, etc…  Once you’re done that, a few subtle changes need to happen to make it responsive.  The first thing is removing those pixels and replacing them with percentages.

Let’s look at the following grid example:

The above picture is a pretty basic grid; it contains a header that spans the full length and two boxes below, one slightly larger than the other.

Basic HTML and CSS would probably look something like this:

[code]
<div id=”page”>
<div id=”header”></div>

<div id=”content”></div>
<div id=”sidebar”></div>
</div>
[/code]

And the CSS:

[code]
#page {
margin: 0 auto;
width: 960px;
}

#content {
float: left;
margin-right: 30px;
width: 600px;
}
#sidebar {
float: left;
width: 330px;
}
[/code]

This grid will work perfectly on the desktop; however, if you look it on a mobile device or even just resize your browser, you will quickly notice that left and right scrollbars start appearing.

Let’s now remove the pixels and convert this to percentages, luckily only the CSS changes:

[code]
#page {
margin: 0 auto;
width: 90%;
}

#content {
float: left;
margin-right: 3.125%;
width: 62.5%;
}
#sidebar {
float: left;
width: 34.375%;
}
[/code]

Using the above CSS, as you resize your browser you will see that our grid automatically adjusts to make the new site and no horizontal scrollbars appear.

How did I come up with these numbers?  It’s quite simple; I took my pixels and did some math.

• The 90% is simply trial and error/personal preference for what works well
• The content and sidebar is basic math: 600 / 960 * 100 = 62.5% and 330 / 960 * 100 = 34.375%
• The margin right is the remainder: 100 – 62.5 – 34.375 = 3.125%

This covers the most complicated part of responsive design.  The next part is dealing with the “left overs”.  I like to think of it in 2 different ways.  Firstly you need to deal with the smallest of devices and secondly you need to deal with the largest of devices.  For the former I typically think of 320 pixels in width (standard iPhone or Android width).  And for the latter, I think of desktop PCs or laptops that exceed 1200 pixels in width.

In most scenarios your base design should handle well on tablet devices or when the phone is in landscape mode.  A few small adjustments might be required, but this needs to be addressed on a case-by-case basis.

When you look at the smallest width, in most scenarios your grid layout will no longer work.  There simply is not enough room to divide the grid in two.  Instead I suggest using media queries and make some slight adjustments to your CSS:

[code]
@media screen and (min-width: 320px) {
#content, #sidebar {
clear: both;
float: none;
width: auto;
}
}
[/code]

With the above CSS in place, my sidebar will no longer float left.  Instead the content will take the full width of the window and the sidebar will live directly beneath the content.

Similarly when dealing with screen sizes larger than 1200 pixels, we have the inverse problem.  There is typically too much white space or our content stretches so far that as the reader attempts to transition back to a new line it’s easy for them to lose their place.

To solve this problem, another media query can be used that perhaps brings a third column into the grid so the main content doesn’t exceed that sweet spot of 60-80 words across:

[code]
@media screen and (min-width: 1200px) {
/* make a third grid */
}
[/code]

This of course is not the only option, if you are in a situation like my current blog is and it’s not easy to make a third grid item, I instead played around with the 90% that I used above in the outer grid size.  Instead I reduced it something more reasonable like 70% allowing more whitespace on the outside of the grid.

Summary

The bottom line I want to reinforce in this article is that responsive design is not hard, but it does require additional thought.  As I am not a designer, I truly don’t have all the answers, but I can help you pose the right questions.

Once you’ve implemented your base flexible grid, adjust your browser or load your website on the various devices and critic your layout.  Is there too much whitespace?  Is the grid too small and content unreadable?  Is a font size you’ve chosen for larger designs taking over on smaller devices? Etc…

These and other questions simply need answering and by using media queries and making several minor adjustments your website will begin to scale smoothly and easily.