Responsive Web Design Basics

Posted: July 3, 2011 under Web Design

Every once in a while, someone has a big idea. With responsive web design, Ethan Marcotte has provided us with perhaps the biggest idea in web design since Jeffrey Zeldman first began to champion web standards. Marcotte's idea is really an act of synthesis, combining existing techniques into a single design approach that elegantly addresses one of the most pressing challenges facing web creators today. 

Increasingly, those that design websites have to work in an environment where the sites they create will be viewed on an ever larger range of devices. A website will be viewed on anything from a smart phone to a large screen television, making the challenge of presentation more difficult than ever.

One solution designers have applied to this problem is to create multiple versions of sites, one for mobile and another for larger screens. The argument has been that people on mobile devices want quick information (directions for example) or to perform a simple task. The assumption made is that mobile users haven't been interested in much more than utilitarian web browsing.

In this scenario the creation of a mobile-only site that is stripped to the essentials is the best solution. But as Marcotte points out is his book, Responsive Web Design, that's making a pretty big assumption. He illustrates by discussing how he often uses his mobile devices - lounging around on the couch. I know I use my 'mobile' devices the same way. So the question arises, do mobile users really want a stripped down web experience?

Another solution has been to set a layout using a fixed width grid. The standard grid is 960 pixels to accommodate the browser viewport used as a baseline, 1024 pixels. One problem with this is that it often doesn't scale very well to mobile devices, which are a very fast growing segment of web traffic. It also can cause the browser to render scrollbars for users with a larger display that have chosen to resize their browser to a smaller resolution, providing a less than ideal experience for them.

So what's the solution? According to Marcotte, the first step is the flexible grid.

The Flexible Grid

For many years there have been designers who have preferred to build sites using a 'liquid layout'. It was driven by a desire to create a more accessible site that made fewer assumptions about the capabilities of a particular user's browser. A liquid layout for a site typically uses percentage values to set the size of page elements relative to each other.

For example, a page container might be set to 90% of the browser window (viewport) and one column might be set to 75% of that and another column set to 25% to give you a two column layout that changes size based on the width of the viewport but whose elements remain proportional to each other. Text sizing is handled by setting the size values in ems rather than in pixels, allowing the text to size appropriately as the viewport expands or contracts.

This is fine provided the site is viewed over a certain range of viewport sizes. If the viewport becomes too large, common with the big displays of many desktops, the lines of text can become too long to be comfortably read.  Additional layout issues can arise, for example, when fixed width elements like images or video are added. A wide viewport might make an image look awkward in its placement relative to the text, for example. This design awkwardness leads most designers to prefer the previously mentioned 960 grid.

The flexible grid uses the same basic elements as a liquid layout, but adds in the CSS 'max-width' property. The max-width property is pretty straightforward. It simply tells the browser, 'don't let the element get any bigger than this'. Although the max-width property isn't something new, it was overlooked because Internet Explorer 6 didn't support it (insert IE rant here). With IE6 finally in decline and not a concern for many sites, max-width can now be used to create a flexible grid that will respond to different viewport sizes, but also have some upper limit to prevent layouts from breaking in larger viewports.

Flexible Images

One snag Marcotte points out with the flexible grid concerns images. So, imagine you have your nifty little flexible grid working just smashingly and you decide to add a large image to a page on your site. Let's further imagine the image is big, say 600 pixels. If you drop it into one of your fluid-width columns, that image may simply flow right outside the bounds of the containing column if the user's viewport is set at a lower resolution, breaking the layout in the process.

The solution? Again, the max-width property comes to the rescue. By setting the max-width property of the image to 100%, the image will stay within the bounds of its parent container. In fact, this neat little solution will work for video elements as well. Sweet!

But of course, there's always IE, right? Again, IE6 doesn't like this property. Marcotte goes on to elaborate on the workarounds which I won't detail here, but I highly recommend you check out his post on flexible images that goes over some nice solutions to the problem. Suffice it to say, with flexible images your path to a responsive web design will be almost complete.

CSS Media Queries

Media queries are the last major element of responsive web design. So, we have this wonderful max-width property to keep our layouts somewhat in check. But when we really start testing our layouts at a wide range of resolutions, we'll often find they aren't scaling as well as we'd like. Perhaps our two column layout is cramped on smaller screens or maybe the white space on large displays is far too generous. Using media queries is the solution.

Media queries work by defining a media type and a query. Take a look at the code below:

@media screen and (max-width: 480px) {
     div.section {
       padding: .75em;
   }
}

The above code does two things, it defines the media type, in this case 'screen', and the query 'max-width:480px', which sets a test for the browser. In this example, the query tells browsers that are rendering the viewport at larger than 480 pixels to disregard the rule that follows. But for those less than or equal to that size, we add a rule that adjusts the padding on a div with a class of 'section'.

These media queries are placed just like any other CSS rule, and with a few of these babies sprinkled throughout our style sheet, we can create a layout that flexibly responds to the different devices that may be accessing our site. 

Again, I'll not wade into the all the details of media queries, but instead simply note they have very good browser support and workarounds for non-modern browsers. I recommend reading this nice post on media queries for more details on implementing them in your designs.

So now that you've added media queries to your bag of tricks, you've got responsive design nailed, right?

Mobile First

One of the elements of Marcotte's book that gets less attention is his discussion of the 'mobile first' philosophy. Marcotte gives credit to Luke Wroblewski who first challenged designers to create sites using a 'mobile first' outlook in 2009. Th basic idea is simple: instead of designing for the desktop first and working backward to mobile, design for the mobile experience first and then move forward to larger resolutions.

The thing I find so compelling about this approach is that it focuses thinking on the essential elements of a given site or page. If something isn't essential for mobile users, it bears asking, 'Is this element something we should include for other users?' With so many sites filled with junk content, this can be an extremely useful approach.

Beyond the content considerations, and perhaps more to Marcotte's point, it's also an excellent way to keep accessibilty front and center. But I have to wonder how widely the 'mobile first' philosophy will be adopted. I see potential resistance from clients who may feel protective of some of their 'extra' content. But I also have to say I see a real opportunity for this approach to combine with the other big wave breaking over the web, content strategy. The two together have the potential to transform websites in a way that is great for both users and clients.

Walking the Walk

I know I'm firmly on the responsive design bandwagon and currently have a Drupal 7 theme under development that will take this approach. I give a big thanks to Marcotte and all the others whose work informed his big idea.

I'd like to recommend that you read his original article that got the responsive design wave started. I also highly recommend you invest in his book, Responsive Web Design. Not only does Marcotte provide the technical details needed to create your own responsive designs in this little gem, but he is a wonderful, funny writer. If you do much reading on web design and development, you know how rare it is to find a book in this genre that is a true pleasure to read.

Right now, most sites aren't responsive. Within a couple years, I'll wager that if you aren't using responsive design, your clients will be pressing you, "Why not?"

About the Author

John Hannah

I’m John Hannah, a frontend developer, avid Drupalista and the guy behind Friendly Machine. When I'm not building websites, I travel as much as possible and enjoy hanging out with my wonderful family. My favorite place to spend my coffee breaks is Twitter, so please feel free to connect with me there.