Apart from the HTML5 bandwagon, Responsive Design was arguably the most discussed topic of last year.
The term was coined by Ethan Marcotte in his article Responsive Web Design from May 2010. New ideas spread fast and at the end of the year it felt like a natural ingredient in all web projects.
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 smartphones 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. 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 contributing factor to page abandonment, so every second counts.
Using CSS media queries to handle images can be a good idea, but remember that images that are visually hidden with CSS will still 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 currently having poor support for handling media queries, so try to test your design on several devices.
2 comments
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.
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