Responsive design SIMPLY explained

Responsive design gives you a low cost way to make your website mobile-friendly.

The chance of someone visiting your website on their phone increases every week. By 2014 as many as half of all visits to websites are likely to be from a phone or a small screened mobile device.

Sub-optimal experience

At the moment, these people are likely to be seeing a version of your website that was design for desktop computers with large screens. This makes for sub-optimal experience: links that are hard to click, text that is hard to read, and graphics that use up precious bandwidth.

Many of our clients understand this, and immediately think “I need an app!”. But building an app is rarely the best option. Not only is it expensive, and probably unlikely to be used, it also means you have an app to manage as well as a website.

If your website just knew

Wouldn’t it be better if your website just knew what screen size everyone who visits it has. Wouldn’t it be better if your website gave each person a different version of each page suited to their particular screen size. Responsive design techniques make this easy to achieve.

Basically, we’re talking about juggling the blocks of content around on web pages to provide a better experience. The website “responds” to the screen dimensions it detects, by resizing images, stacking blocks of content rather than forcing people to scroll sideways. Responsive websites can even provide simpler ways to move around a website, from providing simpler menus, to using buttons that are big enough to hit.

Responsive design in action

Take a look at the Clear Air Challenge website. On a standard desktop screen it looks like this …

standard-desktop-1024x768

On a small screen tablet it looks like this …

tablet-portrait-600x800_450x613

And on a mobile phone, like this …

mobile-portrait-320x480

Don’t frustrate your visitors

The important thing is to make sure that you’re accommodating the needs of your website visitors, not frustrating them. Responsive design isn’t the only option, but it’s often the lowest cost option.

Posted in Tech