Wunderman Responsive Design
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
803
On Slideshare
803
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Future ProofingDigital SitesAn 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 arebecoming more connected to the web then ever However this leads to more screen sizes to cater for
  • 6. 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)
  • 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 devicesand screen sizes This is where responsive design can help…
  • 9. What is responsivedesign?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 weuse it?What type of projects could responsive design beapplied 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 weuse 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 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
  • 20. How we approachresponsive designdeliveryDesigning for the many
  • 21. 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
  • 22. 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.
  • 23. If you’d like to talk further about any of the pointsraised in this deck, please contact your digital agencyteam.