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 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.