Responsive Web design: A primer

Advertisement

To say responsive Web design is the new black would be cliché. But there’s plenty of hype bubbling up around this emerging digital design technique, in which page layouts adjust automatically to a viewer’s screen size – PC, tablet or smartphone – to improve the user experience.

The Boston Globe is the latest and perhaps highest-profile proponent of responsive design, having built its new BostonGlobe.com premium site around the concept. As the Globe and other publishers have discovered, a cross-platform design strategy is becoming an imperative. Research firm IDC predicts that mobile Internet users in the U.S. will outnumber PC-based Web users by 2015.

For better navigation and general readability, websites need to be optimized for all different screen sizes and viewing modes, not just widescreen desktop monitors. Responsive design, which leverages a mix of HTML5, CSS3 and JavaScript technologies, is a significant step toward automating that optimization process  

If you’re not familiar with responsive design, here’s a primer, culled from the designers and bloggers who are immersed in it.

What is responsive design?

Responsive design is the practice of creating a website that can automatically adapt its key presentation elements – layout, typography and imagery – to properly display on any screen, regardless of its size or orientation (landscape or portrait).

Ethan Marcotte, who literally wrote the book on responsive Web design, describes the thinking behind the concept in his seminal article for A List Apart:

“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.”

Responsive design provides what some consider a better – and less costly – alternative to creating custom designs for every new browser and mobile device that comes along. Smashing Magazine’s Kayla Knight explains:

“The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.”

How it works

Early websites were designed in many ways like print publications – with fixed column widths, static images, etc., that targeted a standard screen resolution (e.g., 1024x768). If your browser or monitor did not meet those minimum requirements, you were forced to scroll left or right to view an entire page. A few years ago, Marcotte began experimenting with flexible or fluid grids, replacing fixed column widtsh with percentage-based values of defined “target” widths.

Responsive design increases this flexibility, largely through use of a new CSS3 feature called the media query. Media queries build on the media types defined in earlier CSS versions as a way to target classes of Web-ready devices.

“A media query,” Marcotte writes, “allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work.” He adds:

“Designers have experimented with resolution-aware layouts in the past. … But the media query specification provides a host of media features that extends far beyond screen resolution, vastly widening the scope of what we can test for with our queries.”

Media queries, Marcotte writes, allow a designer to alter more than just image placement:  

“We can introduce new, alternate layouts tuned to each resolution range, perhaps making the navigation more prominent in a widescreen view, or repositioning it above the logo on smaller displays. …  Media queries [also] allow us to practice some incredibly precise fine-tuning as our pages reshape themselves.”

For flexible typography, percentage measures can be applied to ems (which define font proportions), enabling fonts to resize as the browser window increases or decreases.  

Examples of responsive design

The Boston Globe is the first tangible example we’ve seen of a major media site using responsive design. (Marcotte consulted on the project with The Globe, which also worked with two Boston-based design firms, Filament Group and Upstatement.)

Here's the home page in portrait mode on the iPad:

  

iPad landscape mode:

  

iPhone portrait:

  

iPhone landscape:

There is a growing collection of blog sites and design agencies that are implementing responsive designs. Prakash Ghodke at WebDesignLedger.com has collected 30 examples. Patrick McNeil of HOW Interactive Design offers 10 of his own. And for sheer volume, Splashology offers 70 examples.

Tools and resources

The following resources will let you dig much more deeply into the topic:

And of course, there are responsive design tools. Dozens and dozens of tools.

Here’s a demo:

Demonstration of Responsive Web Design from Peter Murray on Vimeo.

Sponsored Resources


Join the discussion

Log In or leave an anonymous comment.