Responsive web design

Following in the footsteps of Channel 4 and the BBC, The Guardian are using responsive web design as part of their web platform redevelopment. They are taking a mobile first approach and have released a public beta version of the work in progress.

Currently, The Guardian has separate desktop and mobile sites. The mobile site has a static layout with a fixed width of 320px and uses different URLs to the desktop site. Using responsive web design will give The Guardian an adaptive, fluid layout which will cater for almost any screen size. New devices are being released all the time so it's important for websites to keep up with changing needs. Using responsive design will also keep maintenance simple: as developers only need to update a single codebase and content authors only need to add content in one place, so new features can be released just once and be made available on all devices simultaneously.

It's really good to see The Guardian taking a mobile-first approach; this should place more focus on delivering a great mobile experience from the outset, which includes keeping a close eye on performance and optimisation. Developing down from the desktop can sometimes lead to bloated mobile solutions which suffer from performance issues and high page load times (especially when accessed over a slow data connection). Techniques such as progressive enhancement can be used to offer a richer experience on larger devices which tend to have faster data connections, faster processors and more memory.

Read more about the Guardian redevelopment and reasons on The Guardian website.

If you would like to see another example of responsive web design, take a look at our client Betta Living's site, or read our Betta Living case study.


Interactive TV