How is responsive design the answer to mobile web consumption?

Posted by Danny Herran on Feb 13, 2012 in Frontend, Other Stuff | No comments

The number of people perusing the web on mobile devices is huge, nobody can say otherwise. Ericsson reported that in the past year, mobile traffic more than doubled. The number of users in the United States alone who use the internet via a mobile device grew 19% over the past year. The Times of India recently reported that the number of mobile phones in the United Kingdom is now greater than the number of people there; not only that, but 27% of the adult population in Britain now uses a smartphone. It’s becoming clear that mobile browsing isn’t only here to stay, but it’s here to change the way we consume media. What does this mean for content creators and designers? In short, we must adapt and begin thinking about content in a more inclusive fashion.

Responsive web design is a relatively new way of approaching the multi-device world we now live in. Previously, it was common to build two or more separate experiences for a website: desktop browsing and mobile browsing. However, this can create huge headaches for experience designers, developers, and users. Each separate experience requires its own design thinking, its own interface design, and its own development cycle. Responsive web design is about designing and building an experience once and letting the site adapt to the screen size that a user is browsing on. This means one experience with slight modifications for desktop, tablet, and mobile browsing. This greatly saves development time and allows the user to keep the same experience through multiple devices.

But do I really need a special CSS file or a different HTML structure for responsive design to work? Short answer. No. In fact, you may already have built a website totally compatible with responsive design but you didn’t even noticed it. A perfectly built website, based on standards and using the appropiate measures for cross-browser compatibility, should work on a mobile device.  Take the O2 broadband website for example, it works as it is supposed to on a desktop computer, but it also works flawlessly on my mobile phone and tablet. I can perfectly read all the contents, browse through it and find the info I need, all from my favorite device.

The question is, how far you want to go?. The O2 broadband example may work for you. You have a well made website that works just fine on any device. However, in some cases, you want to provide to your mobile users an special lighter version of your website content. If this is the case, CSS3 is your answer, specifically the technique called “mobile media queries”. This functionality was enabled in CSS2 by media types. Media Types let you specify a type of media to target, so you could target print, handheld and so on. Unfortunately these media types never gained a lot of support by devices and, other than the print media type, you will rarely see them in use. The Media Queries in CSS3 take this idea and extend it. Rather than looking for a type of device they look at the capability of the device, and you can use them to check for all kinds of things. If the user has a browser that supports media queries then we can write CSS specifically for certain situations. For example, detecting that the user has a small device like a smart phone of some description and giving them a specific layout. I wont go deep into media queries since this isn’t a very technical article, but you can find a lot about them Googling a bit.

The good news is that many desktop browsers already support media queries. Every modern desktop browser supports them, which leaves out Internet Explorer 8 and less. Support on mobile devices is even spottier; While mobile Safari supports media queries just fine, only the latest versions of mobile Opera (version 5+) can handle them. All versions except the first Android browser supports them. Only the most recent versions of the Blackberry browser support them.

That being said, even without media queries responsive web and a mobile first perspective can be incredibly valuable. Some brands are already embracing this new way of approaching the web.  If you want to start using media queries in desktop browsers then you might be interested to discover that there are a couple of techniques available which use JavaScript to add support to browsers such as Internet Explorer 8 (and lower versions) and Firefox prior to 3.5. Internet Explorer 9 will have support for CSS3 Media Queries.

Using Media Queries is one place you can really start to use CSS3 in your daily work. It is worth remembering that the browsers that support media queries also support lots of other CSS3 properties so your stylesheets that target these devices can also use other CSS3 to create a slick effect when viewed on a mobile device.

And as usual… Happy coding!