A responsive world 03 August 2012

Responsive digital design is the single biggest change to the internet in several years. It’s a phrase you may have heard many people using recently, but what does it actually mean?

In short, it relates to a website that changes its layout and design to fit the viewer’s screen.

This may sound fairly obvious but it’s something the internet has been lacking ever since its creation. Until very recently a website was... a website. It looked one way, it functioned one way, and that was that. It wasn’t concerned with whether you were on a 24" iMac or navigating herds of people on Oxford Street or Queens Road Central in rush hour whilst desperately trying to will your sluggish iPhone 3Gs to load a page; only to tragically discover the site is built in flash and all you see is a blank screen.

HTML5

So what changed? Well, a combination of user habits and improvements in technological capability certainly. The sudden appearance of "media queries" in CSS gave our more modern browsers the ability to choose what styling the page should use. The beauty of this was that it would work on tablets and mobile devices. It meant that developers were finally able to display a site in different ways. This was aided by advances in HTML5. Finally we have native browser support for various media, such as video and audio. This means we no longer have to rely on third party plugins such as flash, which Apple refuse to allow on iOS devices such as iPhones and iPads.

In addition to this, users’ hardware improved enormously. With the tablet market surging into reality, more and more people began to access the web on a halfway device. It’s classed as mobile, but the display can be the same size as small laptops.

The 'App generation'

So what's wrong with a standalone mobile site? As a site they're fine, but combining them with a desktop website throws up one big issue: maintenance. One simple change to the website means having to make the same change again for a dedicated mobile site, which doubles the amount of maintenance time. A responsive site means that the one website will, by default, automatically update the content for all devices.

But what about an App?

There are many similarities between mobile apps and mobile sites. HTML5 is becoming the platform of choice with many native apps now being developed with it. These apps are essentially webpages that run on a user’s phone or tablet. The main difference is an App has direct access to the device, so it can use GPS, camera and any other hardware/software that is loaded onto it. It can also store data offline, so content can be viewed with no internet connection. There are many tools available to load a HTML5 website into a blank App shell that will work across many platforms. This means you can focus on the functionality and content of the App and let the tool worry about whether it’s an iPhone, iPad, or one of the many Android phones or tablets.

The downsides...

As always, though, there are bound to be drawbacks to responsive design. The first is cross-browser compatibility. However, this is an issue with almost every new innovation with the web, so this is not unexpected. The fact that Internet Explorer is the main culprit will most likely also come as no surprise. Media queries will simply not work in IE versions 8 and below. This means that Javascript workarounds (as always) are required, which will increase page loading times, and hinder the performance of the page.

The second drawback is what happens to design and development timings. There are so many variations possible for each page layout that testing and bug fixing alone can take as long as building the site in the first place, which means that development time can double, if not triple, ultimately impacting on budget.

And finally, loading times. Desktops, tablets and mobile devices do not always use the same high-speed broadband connection. Using phones and tablets on the move may often result in a limited signal. This means that it is imperative to ensure that larger files, such as hi-res images, are scaled down appropriately for the mobile audience. This can, again, increase development time. After all, there’s no point in have a lovely new mobile site that simply won’t load. This could mean that people looking at your site may become frustrated quickly and leave the site.

Our conclusion

Responsive design is fantastic and is certainly going to play a big part in the future of web design. HTML5 enables developers to provide a platform for rich content and media and as long as you are prepared for the additional work involved, the rewards can be huge; for web designers and developers like us and our clients.

Responsive views