Future ProofingDigital SitesAn introduction to a responsive and adaptive approach.
Overview• What is the problem?• What is responsive design?• When should we use it?• Why should we use it?• How we approach it
What is the problem?How many different devices do users own?
How are users getting online? Smartphone iPad Desktop Netbook iPod touch TV Tablets iPhone Laptop Ultrabook
More manufacturers and more devices means we arebecoming more connected to the web then ever However this leads to more screen sizes to cater for
Mobile and tablet web browsing is increasing16141210 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)
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%
Users expect brands to be ubiquitous across all devicesand screen sizes This is where responsive design can help…
What is responsivedesign?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/
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.
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
When should weuse it?What type of projects could responsive design beapplied to?
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
Why should weuse it?What are the benefits of using responsive design?
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
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 designAdapt on demandNew technology emerges all the time,and clients want users to be able toaccess their brand on the next bigconsumer deviceResponsive sites are built in a way thatmakes it much easier to add a newlayout for a new screen size into thesites codeThis allows the site to adapt to fit futuredevices easily and affordably
How we approachresponsive designdeliveryDesigning for the many
Our approachResponsive web design lies at the heart of our customer-focused methodology.The focus is on responding to customer needs at every point ofthe customer journey
Our approachIn Responsive web design,Technology, User Experienceand Creative disciplines worktogether to co-createsolutions that work for allcustomers on all platforms.The emphasis is on creatingworking prototypes of oursolutions.This allows us to be able totest & revise ideas, rapidly,and risk manage delivery -producing better sites faster.
If you’d like to talk further about any of the pointsraised in this deck, please contact your digital agencyteam.