Responsive design is an approach to building websites that automatically adapts content and layout to different screen sizes and devices. It allows a single website to be accessed from any device without needing separate mobile sites. The benefits are that it future-proofs sites, provides a consistent user experience across devices, and reduces costs by only needing to update content in one place. When deciding whether to use responsive design, it is suitable for new medium to large sites and site redesigns, but not for existing non-responsive sites.

1. Future Proofing
Digital Sites
An introduction to a responsive and adaptive approach.

2. Overview
• What is the problem?
• What is responsive design?
• When should we use it?
• Why should we use it?
• How we approach it

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

4. How are users getting online?
Smartphone
iPad Desktop
Netbook
iPod touch
TV
Tablets
iPhone Laptop Ultrabook

5. 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

6. Mobile and tablet web browsing is increasing
16
14
12
10
8
6
4
2
0
Mar-10 Jun-10 Sep-10 Dec-10 Mar-11 Jun-11 Sep-11 Dec-11 Mar-12 Jun-12 Sep-12 Dec-12
Averaged Market Share Poly. (Averaged Market Share)
Sources:
NetMarketShare.com 2010- 2012-monthly
StatCounter.com 2010-2012 monthly
• 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)

7. There is a wide range of resolutions on multiple
devices
6% 7%
5%
27% full HD (1080p+)
HD (720p+)
Medium format (1024px+)
55%
small format < 800px
micro 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%

8. Users expect brands to be ubiquitous across all devices
and screen sizes
This is where responsive design can help…

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

10. 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.

11. Responsive design can:
Produce sites that adapt for different screen sizes
http://bostonglobe.com/

12. Responsive design can:
Adapt to different interaction patterns across a range of devices
Allows the unique qualities of specific device features to be
utilised to deliver the best experience.

13. Responsive design can:
Remove the need to create multiple websites for
different screen sizes and devices
Create a site with a consistent visual language and
experience for the user across all devices
Potentially allows clients to have a ubiquitous and
usable web presence across all platforms at a lower
cost

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

15. When to use responsive design:
Yes
Building new medium to large sites
Re-skinning an existing site
No
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

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

17. Benefits of responsive design
Future-proofs ubiquitous web delivery
Provides a ubiquitous and usable web presence across
all platforms at a lower cost, that can adapt to
changing technological landscape

18. Benefits of responsive design
As it is a single site a brand need only update content
once and it is published across all devices

19. 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

20. How we approach
responsive design
delivery
Designing for the many

21. 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

22. 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.

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