wunderman - responsive design
TRANSCRIPT
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.