During the last two years the number of mobile devices has grown at an exponential pace, with one Cisco estimate (http://bit.ly/zVdFJD) predicting more mobile connected devices than people by the end of 2012. Due to this growth, providing a first class mobile web experience has become increasingly important and is now a paramount concern for websites. Union Square Ventures’ Fred Wilson went as far as to point out that new web apps are commonly designed “mobile first web second” (http://bit.ly/gQTtBp)
Within the last year a technique known as “responsive design” has become an increasingly popular way to tackle “mobile vs. desktop” web design issues. There have been several reasons for this rise in popularity which we’ll talk about after an abridged history of the mobile web.
How did we get here? Well it all started with WAP… Back in the dark days of the mobile web, well before the average consumer was accessing the Internet from a cellphone the majority of web content was served via a technology called the Wireless Application Protocol. Even I am to young to really have experienced it in all of its glory but the “Criticisms” page on Wikpedia should convey just how awful it was – http://bit.ly/wWxY2c Big takeaways? Imagine writing websites in XML, oh and it has to validate.
Anyway, fast forward a couple of years and vaguely recognizable devices are slowly starting to come online. From the Nokia Symbians, to Palm, and of course the venerable Blackberry mobile devices are beginning to access the nascent mobile web (yay!). The problem? The browsers on these devices were severely limited in terms of CSS and Javascript support, standards compatibility, and available bandwidth. As a result of these limitations, developers chose to basically develop “stripped down” basic HTML versions of sites to present on mobile devices.
One last trip in the DeLorean and we’re zooming from the initial release of the iPhone during the summer of 2007 to today with thousands of smart phone and tablet models and billions of connected devices. During this period, developers tended to build specific “mobile” sites which were usually an entirely separate HTML/CSS/JS(kinda?) code base from their desktop sites. Understandably, this situation was less than ideal since at the minimum it meant maintaining two code bases and the mobile site often lacked the full functionality of the desktop site. Additionally, as both desktop and mobile browser development rapidly progressed consumers began to expect a consistent experience across their devices.
So how do we address these issues and improve mobile user experience? Enter, “responsive design”. The central tenant of responsive design is that you (the designer/developer) should be able to use the same HTML, CSS, and Javascript to serve devices with different screen sizes and resolutions. The idea is that your layout should be able to respond by adapting the it’s presentation layer depending on any number of factors.
The key technology this process relies upon are Media Queries. Fully adopted by CSS3, media queries allow CSS directives to be conditionally applied depending on the result of a boolean query. In practice, this means a single CSS stylesheet can contain one set of directives for a 480px screen as well as different directives for a 1200px screen. Lets look at an example. If you open http://www.agentvita.com/ and then progressively shrink your browser window you’ll see that the elements dynamically adjust depending on the size of the screen.
Well that’s some history and a quick demonstration, now for some nitty implementation gritty details. Unfortunately, there’s no “magic bullet” to automatically take a standard desktop layout and responsively adapt it for different screen sizes. In my opinion the best approach is to start with a solid framework, keep your markup clean, and of course be cognizant that you’re planning to adapt the layout for different screen sizes. Or if you’re feeling brave, start with the mobile layout first and then progressively enhance the layout as your screen size increases.
Here are some specific resources to get started:
- http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
- http://twitter.github.com/bootstrap/ – Bootstrap 2.0 ships with some responsive defaults
- http://drupal.org/project/omega – THE responsive Drupal theme, makes a great base theme for any project
- http://www.quora.com/Responsive-Design – Ask and you shall receive