Our Thinking

Responsive Web Design

Posted by Suzanne Ferguson on Sep 9, 2013 3:00:26 AM

Sales of smartphones and tablets continue to outstrip sales of laptop and desktop computers. As web designers, we must assume that a growing portion of our audience will access our websites on these mobile screens. In this post, we’ll look at responsive web design – what it is and why it’s important. 

Let’s start by looking back. It’s 2006, the first iPhone has yet to be released, and most people are browsing the internet on desktop or laptop computers. Web designers are feeling confident in their 1024 by 768 pixel resolution designs – confident that those designs will create an optimum experience for most people. Fast forward to today and consider the many devices used to consume web content. Are you reading this on your desktop or laptop computer? From your iPad or Kindle Fire? Perhaps from your iPhone or Android smartphone? Or, as Chelsea Odell asked in her recent post (The Multi-Device Web), perhaps even from the screen on your refrigerator?

It’s clear that we can no longer predict what type of device will be used to consume the web content we so carefully craft. We also can’t predict the context. You might be sitting at your desk, lounging on your sofa, commuting to work by train or bus, or walking down the street. You may have a lightning fast wi-fi connection or you may be relying on spotty cellular service. You may have started reading a news story at home on your laptop but are trying to finish it on your smartphone while you wait in line at the grocery store.

So, how do we design our websites to adapt to these many devices and circumstances? Surely we can't create a custom experience for every new device that comes along! I believe we need to design our sites to be responsive and adaptable so that content is easily consumable on screens of any size. That in a nutshell is responsive web design.

There are three core ingredients required to create a responsive design:

  • a flexible, grid-based layout
  • flexible images and media
  • media queries

Let's look at each of these in more detail.

A Flexible Grid

Not that long ago, we were comfortable defining our layouts in pixels. Pixels work well if we are certain of our screen size, but designing in pixels just doesn't give us the flexibility we need. To create a responsive layout, we need to shift our thinking from absolute to proportional. In other words, our pixel values (absolute) can be expressed in relative values (proportional). Every element we define can be expressed as a percentage of the size of the containing element. This will allow our layout to resize itself as the screen size changes.

Flexible Grid

Flexible Images and Media

Text will reflow smoothly within our flexible containers, but what happens when we drop an image into the mix? What we need now is a way to prevent our images from exceeding the width of their containers. The good news is that this is remarkably easy to do with a little CSS:

img {

          max-width: 100%;

}

With this one handy rule, any image that is wider than its container will be forced to adopt the width of the container. Since most modern browsers resize images proportionally, our work is pretty much done. (Not surprisingly, our old friend IE6 requires special treatment, but that won't be covered in this post.) There's more good news, too. With a few additions to our CSS, we can apply the same rule to video and other rich media, like so:

img,

embed,

object,

video {

          max-width: 100%;

}

And media objects that are narrower than the width of our container will of course render themselves at the size we specify.

Media Queries and Viewports

Our flexible grid and images do much of the heavy lifting as our design adapts to different screen sizes, but sometimes a little fine tuning of styles is in order. Enter media queries which are a CSS tool that allow us to identify both the type of media (e.g. screen) and the physical characteristics of the devices and browsers that render our content. Consider this:

@media screen and (max-width: 320px) {css styles here... }

This query asks two questions: first, is this a screen and second, is the browser's viewport no more than 320px wide? (Each query begins with a media type followed by the actual query which consists of a feature and a value.) Let's revisit our flexible grid:

div.column {

          float: left;

          width: 25%;

}

On a narrow screen like an iPhone for example, our columns are going to look a bit squished and probably unreadable if we leave them sized at a width of 25%. Our users will be much happier if we make our columns wider and, using a media query, we can do just that.

@media screen and (max-width: 520px) {

          div.column{

                  width: 75%;

         }

}

Media Queries and Viewports

One last essential piece – the viewport. On a mobile device (e.g. an iPhone), by default the pixel width of the mobile browser (e.g. Safari) might not equal the pixel width of the display. By using the viewport tag (in the head of our HTML), we override the default behavior and force the browser to adopt the width of the screen, like so:

<meta name=”viewport” content=”initial-scale=1.0, width=device-width” />

With that in place, all query aware browsers can make use of our min-width and max-width media queries making our designs friendly and responsive on smartphones, tablets, desktops and laptops.

We’ve touched on the basic tools for responsive design: a flexible layout, flexible images (and other media), and media queries. We're off to a great start and (in another post perhaps) ready to consider some of the other questions that arise when designing responsively: breakpoints, page weight, whether a separate mobile experience is better, and how we can benefit by considering mobile first.

For further reading, I highly recommend two excellent books: Ethan Marcotte's Responsive Web Design and Luke Wroblewski’s Mobile First.

 

Topics: Design, Mobility, Usability

Our Thinking - The Online Blog is a source for insights, resources, best practices, and other useful content from our multi-disciplinary team of Onliners.

Subscribe to Blog Updates

Recent Posts