In a couple of days work, I managed to turn Spoiled Milk’s website design fully responsive so it adapts nicely to whatever device it is rendered on.
Nowadays, people access the Internet from an ever-growing range of devices with very different screen sizes and controls (mouse vs fingers).
This poses some very real design and usability issues because most websites are only designed to be viewed on big screens and navigated by mouse. This is clearly the old way of doing things – residue from an age where you could make reasonable assumptions about the user’s screen size.
Modern websites will have to adapt for all kinds of screens and controls. Websites should look and work just as well on an Android-phone and an iPad, as they do on a desktop computer. The modern website fits the device, instead of commanding that the device fits the website.
Luckily, we have an elegant and straight-forward way of achieving this dream – it’s called responsive web design.
Responsive Web Design
A List Apart has written an excellent introduction to the topic. In short, responsive web designs adapt the layout of the page depending on the screen size of the device that renders the page.
In practice, this is done by clever use of media queries – a part of the CSS3 specification. Media queries allow you to conditionally apply subsets of CSS styles depending on the media – the device – that renders the page. Including screen size.
This means your website can respond to the screen size of the device that renders it – rearrange elements, increase or decrease font-sizes, etc. so the design looks and works just as good on an smartphone as it does on a desktop computer. That’s responsive web design.
Designing for Multiple Devices
The most obvious aspect of responsive web design is handling varying screen sizes. On a desktop computer you may want a three-column layout, whereas on a smartphone the limitations of the small screen often force you to fall back on a one-column layout. Images will have to be scaled down and up nicely. And so on and so on.
However, there’s more than just screen size to think of when doing a responsive web design. You’ll also want to think about the way the user controls your website – by mouse or with their fingers? Incidentally, the controls on most smartphones are much less precise because they are controlled with a touch screen instead of a mouse.
This forces you to put links and buttons at a certain distance from one another so user’s don’t click the wrong one by accident. Site navigation often has to be rethought.
Another big difference is that you can no longer expect hover to be available since touch devices don’t offer this functionality (not yet, anyways). So your site must be usable and accessible without hover.
Is It Worth It?
Mobile browsing is exploding these days and the percentage of visitors on most sites is getting too big to ignore (at Baymard.com it’s already above 10%). And mobile Internet usage is only going one direction, and that’s up.
At first, responsive web design sounds like a lot of work. However, compared to creating a dedicated site for smartphones, and one for tablets, and one for desktops, simply altering the layout of a single site is much easier to implement and (just as importantly) maintain.
Responsive web design definitely forces you to approach your web designs in a different way. However, once you get the hang of it, responsive design is actually fairly straight-forward. I’ve implemented responsive designs on Baymard’s and Spoiled Milk’s website in just a couple of days.
Considering all you need is a couple of days to turn your website into an iPhone-, iPad-, Android-, Blackberry-optimized website, I feel safe saying “Yes, responsive web design is worth it.”
Responsive web design is the future, and betting on the future is hardly a bad idea.
Agree? Disagree? Feedback?
