Project Enquiry

What is responsive web design?

Back To All Posts

By Karen Oliver

The challenge

You never know how your website/blog/e-shop/extranet/intranet will be viewed. Your visitors could be using any one of the following;

  • a desktop PC or laptop (average 15″-17” screen ~ 1024×768 pixels resolution)
  • a small netbook (11” / 1024×768 or more)
  • giant net-enabled TV (50″ / around 1920×1080)
  • a smartphone (typically 3.5″-4” / 640×960)
  • tablet (7”-10″ / 1024×768 or 2048×1536 on the latest iPad)
  • games console (about 4” / 480×272)
  • Nokia 6000 series mobile phone (yes, their tiny 128×128 screens are still around)

Even on desktops, users might not use the full screen for their browsers but resized to share space with other applications.

This means your carefully crafted home page might look quite different on their screens, raising questions about the visibility of your key messages and the appeal of your website. Your online presence might not be as effective as it could be.

What can you do?

The traditional response to the challenge of a multi-device web has been to create “versions”, optimised for the devices making the bulk of visits to the average commercial website: desktops & smartphones. However, the speed of technological change means the number of versions would need to increase to the point they become less cost-effective and hard to manage. Also, by the time the alternative versions are completed, there’s likely to be a new device about to be released.

Enter – responsive web design

The concept of responsive web design (RWD) has been explored for the last 2 years as the solution to the requirements of different viewing devices. Starting from a brilliant article on A List Apart (a website specialising in discussing the future of web design) the notion of RWD has become one of the dominant trends in the field.

responsive-diagram

It involves a number of techniques and coding practices based on the idea that a web publication should be flexible and respond to the viewer using a single content source, mostly centred on the latest version of front end technology, such as HTML5 and CSS3, as well as newer JavaScript frameworks, which allow modern browsers to change the interface depending on the available screen space. Thus, mobile users are presented with a narrower layout that requires less scrolling or zooming in and bigger screens can benefit from larger images.

This approach is often combined with “Mobile First”, a strategic view for designing and building user interfaces, based on starting with the simplest layout for basic and small devices, with enhancements for more sophisticated platforms added later in the process.

But with greater power…

Although it makes a lot of sense, the main implication of responsive web design is the need for additional planning and investment, particularly when it comes to deciding how visual elements will be presented on ever-changing screens. This will present different challenges to existing and new web projects but it also offers exciting opportunities to those willing to adapt their presence and ensure their message comes across effectively for all their visitors… Except for the Nokia 6230 – but nobody’s perfect!

Previous Post 10 Reasons to have a great Web Site Design Next Post WordPress or Umbraco for web design?