Responsive design

written by   Arvid Janson

Every now and then a new and revolutionary technique pops up on the web, and before you know it, developers all over are rushing to be part of the new movement. The soup de jour is responsive design – designs that layout themselves to fit the users browser. While the purpose is to create more flexible designs, the real winner of this method may actually be the content.

In the beginning there was the desktop computer.

Back in the olden days, before internet was in your TV and TV was on the internet, desktop computers were gray and a 15” screen was considered a luxury. Hell, almost everything concerning computers was gray, not least the internet, which at the time was little more than a database of information. As the years went by, the number of colors was upped to millions, and screen sizes started to expand and design started to trickle out on the web.

However, as most designers at the time had a background in print–and non of them had learned the truth about the fold–websites consisted of small, scrollable, fixed size boxes.

After a while, screen resolutions started to converge, and the design community decided that somewhere around 960 pixels was probably a good place to sit width wise. 960px was appropriate for both relatively small as well as larger screens, and as mobile internet consisted of b/w screens and WAP, nobody actually cared about them. Then 2007 hit us all.

Make way for the iPhone

Even though the rumor mill was hard at work, no one knew exactly what Steve Jobs was about to unleash when he stepped on stage, much less what implications it would have on the mobile industry and the internet as a whole. A number of so-called “smart” phones had been release prior to the iPhone, but no one even came close to the device that was being presented that Tuesday night in January.

Not only did the iPhone put it’s mark on the world, but a number of other players launched competing devices, most of them backed by Google and their Android platform. Mobile browsing actually became something to care about, and to cope with this new range of devices companies set out to create mobile versions of their websites, detecting user agents for mobile devices and re-directing users to their new, skinnier, website cousins.

This was an acceptable approach as alternatives were scarce, but obviously not a great solution, as differentiating content is both an expensive, and inefficient way of working. And just about that time, another game changer came along.

Think different, again

While the iPad in practice wasn’t that much different from the iPhone, it did land itself right in between mobile phones and computers. Many people argued that the iPad was nothing more than a larger version of the iPod Touch, while others praised the very same fact. Regardless of what side you were on though, it was obvious that the way we look upon the internet had changed for good. And, as more and more devices get internet access, even more aspect ratios and screen sizes will begin to pop up.

So, should we redirect to /m or not?

The problem with the old, static, design paradigm is that it is limited to a small number of highly different devices. Previous mobile phones had a hard time coping with large amounts of data, and the screen sizes were inherently different to computers, so in practice we needed to serve them different content. But, as mobile device usage exploded, so did the technology inside.

Mobile devices grew closer to computers, and with the introduction of devices such as the iPad, the very definition of a mobile device seemed to blur. It became obvious that we needed another approach.

Instead of thinking mobile or desktop, we need to think flexible.

Enter Ethan Marcotte, and the technique he dubbed Responsive Design. As with many new techniques (hello ajax!) responsive design is not so much a new browser technology, as a clever combination of existing techniques.

The idea is as simple as it is brilliant. Instead of differentiating content for different platforms, we serve all platforms the very same things and let the layout adapt it self for different devices on the client side. While this can be done in a number of ways, I particularly like Ethans approach of using a fluent design, and then rearranging the content at specific viewport sizes, using media queries.

This allows us to deliver our content to a whole range of different visitors, perfectly formatted for their specific devices, without ever knowing the actual size of their browser: single sourcing at it’s finest.

And yes, the concept of responsive design too has it flaws and limitations, but the take away for me is that as the web in large moves toward more flexible–and obviously more functional–designs, we will once again be able focus more on the actual content. Maybe this could actually be what’s needed to get people to stop treating the internet as a single form factor, and start looking at it for what it really is–a medium for delivering content.