Wunderman Responsive Design
- 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.