This story was written by Keith Dawson for UBM DeusM’s community Web site Develop in the Cloud, sponsored by AT&T. It is archived here for informational purposes only because the Develop in the Cloud site is no more. This material is Copyright 2012 by UBM DeusM.

Responsive Design

It is becoming a requirement that Web apps adapt to their display environment.

Web apps are emerging that adapt intelligently to the size and other characteristics of the display. This trend will only accelerate as designers think mobile first.

It's unusual to be able to date a design revolution so precisely. This one started two years, four months, and one week ago: May 25, 2010. The iPhone was 3 years old; the iPad had been introduced mere months before. Ethan Marcotte posted a piece called Responsive Web Design on A List Apart (and subsequently published a book of the same title). The way Web apps get designed and laid out began to change on that day. It was as big a change as the move from table-based to CSS layout a half-dozen years before.

The quickest way to appreciate what responsive design is about is to examine a well-built responsive site in a desktop or notebook browser. Visit Yiibu.com and resize the window wider and narrower. All the way down to the width of a smartphone in portrait mode, the page layout refreshes interactively to take best advantage of the available screen real estate.

Responsive design is not a technology. It is a cluster of design patterns -- fluid grids, media queries, and adaptable media -- that can be used together to craft a consistent and flexible way to present a Web application.

Marcotte's introductory post should be required reading for anyone working with Web apps, but especially for front-end designers and developers. Beyond that introduction, Treehouse.com offers a gentle primer on responsive design, on a page which is itself an example of the technique. Among the many collections of tools for responsive Web design, the best I have found are this article from Smashing Magazine and Brad Frost's GitHub project, This Is Responsive.

Fluid grids
Responsive design begins with a grid system for layout. Elements on the page are conceived in relation to whatever grid underlies the design. Columns, spanning headers, sidebars, navigation elements, illustrations -- all are sized in percentage terms relative to the display width, and in accord with the grid.

Media queries
These CSS3 declarations form the basis of the "break points" at which a responsive design rearranges itself for different display sizes, resolutions, etc. On progressively smaller screens, a three-column layout may go to two columns and then a single column. Fonts might resize; other font families might be introduced. A video might be replaced at smaller sizes with a fixed image. Navigation might transform from a vertical sidebar to a horizontal element at the top of the screen.

Adaptable media
Both images and video might be offered in multiple sizes and resolutions for use in different phases of a responsive design. This post at CSS-Tricks.com provides various techniques for dealing with media in a responsive design, including wrapping them in jQuery or other Javascript frameworks to mask the complexity.

Mobile-first
The hardest part about approaching responsive design is to envision what the ideal presentation of information might be at each screen size. The emerging consensus is that the best approach is to start with the design as it will work on the smallest mobile device, and scale up from there -- not the other way around. A well executed, mobile-first responsive site will look appropriate on whatever device you use to view it.

We have all seen sites and apps that look cartoonish and clunky on a desktop screen, with oversized text and big gormy buttons. This is not mobile-first design; it is mobile-only. Such a design may be appropriate for an app that will never run on anything larger than a 480-pixel screen. But for apps that reach the widest possible audience, responsive design is a better option by far.