10:59AM January 18 2012
A More Responsive Web
The Problem
It isn’t news that people use the web on different devices – internet enabled phones have been around for a good few years and the mobile web has been The Next Best Thing for just as long. What has changed in more recent years is the quality and sheer breadth of devices that are now readily available, including PCs, laptops, tablet PCs, smartphones, and let’s not forget netbooks, gaming consoles, and older net-enabled phones. These all offer different tools through which a user can access your website.
The first step when contemplating a web design (or redesign) is to consider a few fundamental questions:
1.What’s the screen size?
2.What are the capabilities of the browser?
3.How fast is their internet connection?
The challenge these days is that the answers will differ depending on the device, how it is being used, and where it is being used. The answers can also change depending on context – depending on the whereabouts of the user, an iphone could be connected to the internet using wifi to a broadband connection or using a slower (and more expensive) 3G connection.
So how do we get around this?
The Old Solution
A traditional approach to this problem is to develop a separate mobile site in parallel to a desktop site that is optimised at a resolution suitable for a smaller screen and tested on a finite set of devices.
Devices that are deemed to be ‘mobile’ will be directed to this separate mobile-friendly site. This can be a good solution if you know all the different contexts in which a mobile user will be using the site (for example if you know all of your users will be using an iPhone).
However, in many cases you can’t know what is being used to browse your website and if you have built and tested the site with a rigid set of limitations in mind (based on the devices you have chosen to support) then controlling how the site degrades on less able devices (or indeed, how it works on more able devices) can be difficult.
Another consideration is where to draw the line concerning ‘what is mobile?’ – would you choose to direct a tablet PC to the mobile site or the desktop site? One solution to this would be to continue to silo your website(s) to cater for different devices. This isn’t really practical, cheap, maintainable, or future-proof.
So what else can you do if you want to show the same content on different devices?
A New Solution – Responsive Design
A relatively new approach, first introduced by Ethan Marcotte, is responsive web design (RWD) and he sums it up as follows:
“Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can […]progressively enhance our work within different viewing contexts.”
What this means is that only one website is built that will automatically resize to suit how the user accesses your site. It may be via a smaller desktop browser or iPhone; RWD ensures that visitors have the same quality experience no matter the screen size or device.
You can see this in action if you visit The Boston Globe and resize the browser window. The content remains accessible and useable without the page needing to reload and it will work across a spectrum of different devices.
The advantage of following a responsive web design approach is that you won’t need multiple sites all serving the same content to cater to different devices and you won’t need to worry about your content being inaccessible to your users.
There are however some disadvantages that haven’t yet been completely overcome by developers. From a design point of view, it would be challenging to deliver a rich, branded, and engaging experience across the various incarnations of the design. It also raises the question of whether or not it would be possible to achieve the levels of design complexity some clients’ business needs’ demand.
Furthermore it requires a rethink of the traditional web design and sign off process – finding the balance between technical limitations and design that meet and exceed the client’s business needs.
So….
So whilst there may be a few problems to solve, the responsive design approach may well be a better fit for some business needs than the more traditional approach. Of course, new design approaches are evolving all the time, so watch this space for new techniques to adapt to the web’s ever-changing needs.
Written by @danatello, @nickystanding and @jeremyjbourton
