Apart from the HTML5 bandwagon, Responsive Design was arguably the most discussed topic of 2011. The term was coined by Ethan Marcotte in his article Responsive Web Design from May 2010.

Exactly one year later, I visited @media conference in London where some of the best web developers had gathered. Sometimes media queries were mentioned, but not to any great extent.

New ideas spread fast and a few months later even some clients were starting to mention it. At the end of the year it felt more like a natural ingredient in all web projects. That’s how fast things happen in the web industry.

Responsive design is the concept of developing a design so it may adapt nicely to the user’s screen resolution. This is very important since mobile visitors have skyrocketed during the last years, thanks to smart-phones and pads. Mobile browsing was up to 8 % during December 2011 and it will of course continue to increase.

However, it’s not just flipping a switch to make a design “responsive”. First the designers must be able to see beyond fixed-width design, which often is a significant psychological obstacle. A completely different layout may be a greater user experience for a small handheld device. It also requires careful consideration of scaling images for best results. Remember that mobile web users have much less patience than desktop users, and mobile internet connections are often considerably slower. This makes loading time an even more major contributing factor to page abandonment, so every second counts.

Using CSS media queries to handle images is often a great idea, but remember that even images with display:none will be downloaded to a mobile device unless you use a clever workaround. Media queries are good at hiding things but not as good at removing them. Some mobile devices are also bad at handling media queries, so try to test your design on several devices.

If the concept seems overwhelming, a step on the way could be to start with what some call “adaptive design”, where you have a set of fixed resolutions. It adheres to a responsive feeling but without the scaling.

2 comments

  • avatar
    Mmm
    09 Jan, 2012

    Not to forget that things that look good on a large display can turn out to be quite bad on a smaller display even if all the pixels are there and the display ratio is the same.

    I see that quite a lot at the company I work. The designers make designs that look good on their 30″+ screens, but it suck on the 3-4″ screens it is targeted for.

    This goes beyond the web, as we see the trend of operating systems stretching over small devices, such as mobile phones, to pads, laptops and home entertainment systems on big screens.

    The learning curve is step indeed.

  • avatar
    09 Jan, 2012

    All true. Images are sometimes resized during runtime using APIs that are inferior to Photoshop algorithms, making them look a lot worse than they have to.

Leave a reply