Future ProofingDigital SitesAn introduction to a responsive and adaptive approach.

• What is the problem?

• What is responsive design?

• When should we use it?

• Why should we use it?

• How we approach it

Overview

What is the problem?How many different devices do users own?

iPad

iPod touch

iPhone

Laptop

Netbook

Desktop

TV

Smartphone

Ultrabook

How are users getting online?

Tablets

More manufacturers and more devices means we are becoming more connected to the web then ever

However this leads to more screen sizes to cater for

Mar-10 Jun-10 Sep-10 Dec-10 Mar-11 Jun-11 Sep-11 Dec-11 Mar-12 Jun-12 Sep-12 Dec-120

2

4

6

8

10

Mobile and tablet web browsing is increasing

Averaged Market Share Polynomial (Averaged Market Share)

• A four fold increase in mobile in two years• 15% of market share by end of 2012?• Full HD tablets have appeared (the new

iPad)

Sources: NetMarketShare.com 2010- 2012-monthlyStatCounter.com 2010-2012 monthly

6%

55%

27%

6% 5%

There is a wide range of resolutions on multiple devices

full HD (1080p+)HD (720p+)Medium format (1024px+)small format < 800pxmicro format < 400px

NetMarketShare.com 2012-02-01 monthly

• The traditional 1024 screen size is being rapidly reduced by:• Small screen mobile devices > 11%

growing• HD screens > 62%

Users expect brands to be ubiquitous across all devices and screen sizes

This is where responsive design can help…

What is responsive design?How is it different to other approaches?

Responsive design is:

A single website that is designed and built to automatically respond to various screen sizes and orientations

Sites built using responsive design will fluidly change layout of content, elements and site and interaction patterns, to give the user the optimum design for the device they are viewing the site on.

Responsive design can:

Produce sites that adapt for different screen sizes

http://bostonglobe.com/

Allows the unique qualities of specific device features to be utilised to deliver the best experience.

Adapt to different interaction patterns across a range of devices

Responsive design can:

Responsive design can:

Remove the need to create multiple websites for different screen sizes and devices

Potentially allows clients to have a ubiquitous and usable web presence across all platforms at a lower cost

Create a site with a consistent visual language and experience for the user across all devices

When should we use it?What type of projects could responsive design be applied to?

When to use responsive design:

Changes to an existing site that is not responsive

Projects within a non responsive framework e.g. iframes / Facebook

Projects using non responsive technologies e.g. Flash

Mobile only projects

Building new medium to large sites

Yes

N

o

Re-skinning an existing site

Why should we use it?What are the benefits of using responsive design?

Benefits of responsive design

Provides a ubiquitous and usable web presence across all platforms at a lower cost, that can adapt to changing technological landscape

Future-proofs ubiquitous web delivery

Benefits of responsive design

As it is a single site a brand need only update content once and it is published across all devices

Benefits of responsive design

Adapt on demand

New technology emerges all the time, and clients want users to be able to access their brand on the next big consumer device

Responsive sites are built in a way that makes it much easier to add a new layout for a new screen size into the sites code

This allows the site to adapt to fit future devices easily and affordably

How we approach responsive design deliveryDesigning for the many

Our approach

Responsive web design lies at the heart of our customer-focused methodology.

The focus is on responding to customer needs at every point of the customer journey

Our approach

In Responsive web design, Technology, User Experience and Creative disciplines work together to co-create solutions that work for all customers on all platforms.

The emphasis is on creating working prototypes of our solutions.

This allows us to be able to test & revise ideas, rapidly, and risk manage delivery - producing better sites faster.

If you’d like to talk further about any of the points raised in this deck, please contact your digital agency team.