The responsive revolution

The rise of responsive web design means that for the first time, websites are responding to the user and not the other way around.

mark osborne 96black responsive web designEvery now and then something new comes along that completely changes the way you think about something you thought you already knew. Someone stands up and says "hey, you're doing it wrong!”

Responsive web design is very much that elephant in the room in regards to website design – but it is an approach that is definitely here to stay.

Whether you know it or not, your customers are now interacting with your website on countless different devices. In New Zealand, smartphone ownership is up to around 32 percent and tablets at 7 percent, but usage of both is growing quickly. Because of this, a multi-device web experience is fast becoming one of the most demanded features of any website.

If your business' web presence doesn't cater for the multi-device world, then I’m here to tell you that "you're doing it wrong!”

So what is responsive design?

Responsive web design is a new approach to designing websites that is about delivering an optimal user experience across a myriad of devices and screen sizes.

Pinching and panning around your desktop sized website just doesn't cut it anymore and these days I’m sure your customers will waste no time in telling you this.

Instead, every user experience should be optimised to the device being used, be it a desktop computer, laptop, netbook, tablet, mobile or even TV. Mobile friendly sites have been around for a long time but what sets responsive design apart is its focus on not just mobile, but all devices in between and an effort to keep the user experience as unified for everyone as possible.

It is important to note that responsive design is not a single piece of new-fangled technology, but rather, a set of approaches, techniques and ideas that form a whole. In order to design responsively, we must change the way we approach the whole design process rather than treating mobile or other devices as an afterthought.

So how does it work?

Cascading Style Sheets (CSS) are what 'styles' the web and even since the early days of CSS 2.1 (circa 2004), CSS has enjoyed some measure of device awareness through media types. This allowed us to target specific styles to things like printers as opposed to screens. For example:

<link rel="stylesheet" type="text/css" href="main.css"

  media="screen" />

<link rel="stylesheet" type="text/css" href="print.css"

  media="print" />

Later came CSS 3, which brought with it media queries, improving on this device awareness by not only allowing us to target a certain class of device, but also inspect some of the physical attributes of the device itself. At our disposal now are attributes such as device-width/height, aspect-ratio, orientation, colour and resolution. Extending our example above to target, say, a mobile phone only, is as simple as:

<link rel="stylesheet" type="text/css" href="mobile.css"

  media="screen and (max-device-width: 480px)" />

Here we apply the styles contained within mobile.css only if the device viewing the website has a horizontal resolution of no more than 480px, otherwise the whole stylesheet is ignored.

Now we can easily invoke style changes at any myriad of break points, allowing us to show and hide elements that are of importance to a particular device, shrink and grow elements to better suit the viewport available, or add/change functionality to better suit the input device (i.e. mouse vs touch).

Why was it created?

Designing for the web has always been a challenge, particularly when you come from a print industry where every media you work with is generally fixed in its size and shape. Now that the web is accessible across so many devices this problem has compounded. Now, not only must we think about proportion and layout across infinitely more devices, but also the technical capability of them.

With this level of device detection available, we can fine-tune the experience to exactly match the requirements of the user and the device they are using. We can deliver a small contained experience to feature phones, a rich JavaScript-enhanced solution to smartphones or tablets and a lean-back experience to TVs, all from the same URL.

Why is it such a revolution?

It all comes down to engagement. In a world where websites are more of a requirement than a strategy, we are constantly trying to find new ways to make our customers' experiences online better.

Responsive sites are easier to navigate, easier to read, and their user experiences are consistent across all devices. This in turn leads to more time spent on site and customers who are more likely to engage with content – and crucially, more likely to purchase online.

For the first time, our websites are responding to the user and not the other way around.

Mark Osborne is director of 96black Ltd, an award winning digital agency that specialises in web design and development as well as online communications. 96black is made up of a team of talented individuals focused on building world-class user experiences online for brands globally

Idealog has been covering the most interesting people, businesses and issues from the fields of innovation, design, technology and urban development for over 12 years. And we're asking for your support so we can keep telling those stories, inspire more entrepreneurs to start their own businesses and keep pushing New Zealand forward. Give over $5 a month and you will not only be supporting New Zealand innovation, but you’ll also receive a print subscription and a copy of the new book by David Downs and Dr. Michelle Dickinson, No. 8 Recharged (while stocks last).