As a result of the exponential growth of mobile Internet traffic, a brand can no longer afford to fall behind and offer their visitors a slow website the size of a postage stamp. It’s practically essential, then, that there’s one design for the BlackBerry, another for the iPhone, another for the iPad, and so on. The solution to this is what is called responsive design.

What is it?

Responsive design is an approach based on the notion that design and development should respond to a user’s behavior and environment based on screen size, platform, and orientation of their device. 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.

Why use it?

A few years ago, when flexible layouts were almost a “luxury” for websites, the only things that were flexible in a design were the layout columns and the text. Images could easily break layouts, and even flexible structural elements broke a layout’s form when pushed enough. Flexible designs weren’t really that flexible; they could give or take a few hundred pixels, but they often couldn’t adjust from a large computer screen to a netbook.

Now, images can be automatically adjusted, and we have workarounds so that layouts never break. While it’s not a complete fix, the solution gives us far more options. It’s perfect for devices that switch from portrait orientation to landscape in an instant or for when users switch from a large computer screen to an iPad.

What now?

One major problem that needs to be solved with responsive web design is working with images. There are a number of techniques to resize images proportionately, and many are easily done. Creating fluid grids is fairly common practice, and there are a number of techniques for creating fluid images:

• Hiding and Revealing Portions of Images

• Creating Sliding Composite Images

• Foreground Images That Scale With the Layout

To get a sense of what all this is really about without all the technical mumbo-jumbo, James Mellers has come up with a clever interactive demo called "Responsive Design, Responsively Illustrated." It doesn’t do a whole lot: It shows a blank mockup of a desktop screen with a bold cue in the bottom left corner inviting you to resize. If you do, the graphics on the page change. The desktop screen morphs into a laptop screen, then a tablet, and finally a smartphone as the browser window gets smaller. If you make it taller than it is wide, the tablet or smartphone graphic rotates from landscape to portrait view. This is responsive design. Want another example? Visit  the homepage of a certain mobile design company, and try adjusting the width of your browser window. Cool, huh? The website responds to you, rather than making you deal with it. Easy peasy, or, you know, almost.

(Image sources: Food Sense, Boston Globe)