Mobile and tablet browsing is going through the roof. Yet, most websites look and work poorly on these new devices because they were designed to be experienced on a desktop computer with a mouse. The solution is responsive design.
Gartner predicts that “By 2013, mobile phones will overtake PCs as the most common Web access device worldwide”. While I personally think it will be a slower process, there’s no denying that mobile browsing has already reached critical mass. Any serious website can’t afford to ignore the mobile experience any longer.
So how do we design websites that work well on desktop computers, tablets and smartphones? Do we create parallel mobile sites? In some cases, yes. E.g. if we need the mobile experience to be fundamentally different from the desktop experience (mostly relevant to web applications, and not so much the traditional “content sites”). But in all those other cases – all those sites that serve up content that should be more or less identical on a mobile device and a desktop computer, only formatted differently? Well, this is where responsive design comes into the picture.
What is this “Responsive Design”?
Responsive design is a way to make your website look and work perfectly across all the new devices out there without creating and maintaining parallel mobile websites. Instead, you serve up the same website but use media queries (CSS3 technique that enables responsive design) to adapt the page’s layout to the device it’s being displayed on.
If you’re reading this blog post (on our site, not in a feed-reader) on a smartphone or tablet, you’re seeing responsive design in action. Here’s a video of how that works (link to Vimeo):
By adding some clever styling rules to your website, you can make every single page on your website look and work great on all those new smartphones (iPhone, Android phones, etc.) and tablets (iPad, Slate, Eee, etc.). Instead of offering up a limited mobile version, you give mobile users access to your full website but in a layout optimized for their particular device.
When you start implementing responsive design, there are many new design challenges to overcome. You have to approach your site’s design and content in a more holistic way.
If the device is small, you’ll most likely have to collapse that two-column layout you’re using on the desktop version. This one action will dramatically change the flow of your information since the sidebar content is no longer displayed alongside the main content.
If the device uses touch instead of a good old mouse, then you’ll likely need to rethink your navigation. Touching a small link with big, fat, greasy human fingers isn’t as accurate as clicking it with a mouse. You’ll probably want to increase hit areas, but then again, how does this affect the design of your navigation?
Big headers are acceptable on desktops because we have a lot of screen real estate, but on smaller devices these big headers can easily take up the entire screen. If the user can’t see anything unique about the page he just landed on without scrolling because your header is taking up the entire first part of a smartphone’s screen, then you have a serious design problem. Time to rethink your header…
Implementing responsive design
At first, responsive design may sound like a lot of work, and in some cases it is. However, in our experience, if you have a clean (front-end) codebase, implementing responsive design can be done in just a couple of days.
Making spoiledmilk.dk responsive only took 2 days, with an extra day’s worth of additional optimizations that made it scale even better on tablets. Another example is baymard.com, which again took only 2 days.
As mobile browsing keeps surging, ignoring the experience of this user base is going to hurt brand and business more and more. The future of the web is clearly one of fluidity, where websites adapt to the devices that are accessing them. That future that may already be here.
So the question then becomes: How can we afford not to spend those couple of extra days making sure the mobile experience of our website is a good one?
Update: Examples and Resources (added June 9, 2011)
- Book by Ethan Marcotte: a fine little book (150 pages) that I can highly recommend to anyone looking to learn about and implement responsive design.
- Article by Ethan Marcotte: an excellent introduction to responsive design.
- Article by Smashing Magazine: what responsive design is and how to use it.
- Article by your’s truly (Jamie Appleseed): what responsive design is and why / when to use it.