Mink Machine

The onslaught of Responsive Design

Apart from the HTML5 bandwagon, Responsive Design was arguably the most discussed topic of 2011. The term was coined by Ethan Marcotte in the article Responsive Web Design, 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.

Post a comment

Your email address will not be published. Required fields are marked *

Featured stories

Roaming the cobblestones of Istanbul

"Inside the church there are still traces of rune inscriptions made during the Viking age by Varangians, an elite guard made up of Scandinavian immigrant warriors."

A journey through Iran

"I woke up freezing on a Persian rug with aching back. Behind a corner I saw the damned rooster that kept me awake during many hours."

Chilling in Chile

"My weary feet has reached Valparaiso. After almost a month of traveling across the South American continent I realize that this is as far south as I will come, due to weather conditions."

The urban maze of Tangier

"There are exciting things waiting around every corner and my bucket list is long, but the Medina has a mindset of its own regarding time and space."

Sessions in Seville

"I end my journey in front of the tomb of Columbus, located inside the world’s largest Gothic cathedral."

Wazzup in Vaduz

"Vaduz Castle is overlooking the town from a hill, a short walk from the center. It’s really a postcard view with the alps in the background, which I’m sure the prince enjoys as he sips his morning coffee while towering above his loyal subjects."