The adaptation of responsive design

Apart from the HTML5 bandwagon, Responsive Design was arguably the most discussed web topic of last year. And like most things that become fashionable in our industry, it went remarkably quickly from interesting new idea to essential ingredient that apparently everyone had been doing all along.

The term was coined by Ethan Marcotte in his article Responsive Web Design in May 2010. Ideas travel fast on the web, particularly ideas that promise to solve several unpleasant problems at once. By the end of 2011, responsive design had become difficult to ignore.

The basic idea is simple enough: build a design that adapts gracefully to the size of the user’s screen rather than assuming everybody is sitting behind the same respectable desktop monitor.

This matters greatly because mobile traffic has exploded during the last years, courtesy of smartphones and tablets. Mobile browsing reached around 8 percent in December 2011, and there’s little reason to believe people will suddenly put their phones down and return obediently to their desktop computers.

Of course, making a website responsive isn’t a switch you flip somewhere in CSS while congratulating yourself on being modern. First, designers have to abandon the comforting certainty of the fixed-width canvas. That can be surprisingly difficult. For years we have carefully arranged pixels into obedient little grids, only to discover that users insist on viewing them on screens ranging from enormous desktop monitors to devices barely larger than a cigarette packet.

The best layout for a small handheld device may not simply be a miniature version of the desktop site. It may need to be something substantially different. Less decoration. Different priorities. Fewer things fighting for attention. In other words, actual design decisions.

Images are another small minefield. Scaling them elegantly is one thing. Delivering them efficiently is another. Mobile users tend to have even less patience than desktop users, while their connections are often considerably slower. It’s a charming combination: less bandwidth, more impatience. Every second counts.

CSS media queries can help with the images, but they also contain a nasty little trap. Hiding an image with CSS doesn’t necessarily stop the browser from downloading it. The user may never see the image, but they can still enjoy waiting for it. Media queries are very good at making things disappear. Making the bytes disappear is another matter entirely.

And then there are the devices themselves. Support for media queries is still uneven on some mobile browsers, which means testing remains essential. Not testing it on your expensive desktop while resizing the browser window and declaring victory, but testing on actual devices.

Different screens. Different browsers. Different connections. Different ways for everything to go wrong. Responsive design is an elegant idea. The implementation, as usual, is where things become dirty. Welcome to the web.