** Update 28th June 2012** Useful post from Econsultancy here on why responsive design is good for Google and for site visitors.
Change happens more quickly than perhaps we might like when it comes to the web. But one thing remains the same, customers demand the ultimate experience when they interact with your brand, whether on the web, in store, via their mobile phone or iPad. As a website owner, designer or developer, this has its challenges. Can we continue to support each new device, input mode and browser with its own bespoke design and experience? Surely this will become unmanageable and impractical as the number of devices increases, requiring endless new designs and resolutions. So what’s the answer?
Responsive web design is one approach. It suggests that the design and development need to respond to the user’s behaviour and environment based on screen size, platform and orientation. By designing responsively you also take into consideration what might be just around the corner and let’s face it, there are bound to be a number of new gadgets we need to cater for over the next few years without compromising on experience.
Practice responsive web design – Although responsive web design has been around for some years it is now coming into its own as the number of devices and different browsers are on the increase. In the next few years it will become increasingly expensive if websites aren’t designed responsively. How many different sites are you prepared to pay for? For those retailers that want a distinctly different experience on the website or mobile then this may still be the answer, but not everybody will be able to afford this.
So what is responsive web design? Not to be confused with “fluid” designs, it’s when the layout and design of the website “responds” to the user’s device. Instead of tailoring disconnected designs to the web, mobile or any other device, designs are treated as facets of the same experience. If they are designed optimally using standards-based technologies like HTML5 and CSS3 they will be flexible enough and adaptable enough to cope with any device that renders them, be that a PC, iPhone, iPad, iPod or TV.
As a case in point, Salmon have introduced Halfords to this on their mobile site. www.halfords.com. When you view the product details page in both landscape and portrait on an iPhone or Android phone the components move around to make use of the available space, optimising the layout to changes in window size and device resolution.
Halfords also cleverly uses HTML5 - when customers enter personal information like an email, postal address or telephone number, the keypad automatically changes to provide customers with the relevant data needed such as an @ sign, full stop, letters or numbers, without being prompted. To really see the benefits of responsive web design you need to view the same content on different devices, another good example is the website of designer Simon Collison.
Although designing responsively has huge possibilities allowing you to target devices and serve different crisper sites to each device, it is still in its infancy and isn’t without its challenges. Take testing as an example. No longer will you simply test the design on Internet Explorer or Firefox, but the iPhone, iPad, TV and whatever device is next will all need to be considered.
Designers will need to write much cleaner code and retailers will need to buy into the fact that some small compromise on design when viewing the site on Internet Explorer will in fact be worthwhile as they will be getting a future-proof design across all devices.
For more information on the concept of responsive web design, Ethan Marcotte wrote an article about the approach for A List Apart and another book worth reading is Hard-boiled Web Design by Andy Clarke.
Stop