Successfully reported this slideshow.
Delivering a Great User Experience     with Responsive Design                                                             ...
Agenda•      What is Responsive Design?•      Why should you care?•      How Responsive Design solves the problem•      Ex...
What is Responsive Design?Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regenc...
Defining Responsive Design• A way to adapt your  site or application  to mobile devices• Build one version  that works on ...
Why should you care?Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Mi...
Goin’ mobileThe Internet isn’t just for desktops any more• By 2014, mobile web usage is expected to  exceed desktop web us...
It’s Madness!Why should you care?The Internet isn’t just for desktops any moreAvtex Customer Conference 2012The Intersecti...
User ExpectationsJust in case it weren’t complicated enough….• The device being used shapes expectations:         – Phone:...
What if I do nothing?It’s an option.                                                 • For tablets, you’ll be sort-of okay...
How Responsive Design                  solves the problemAvtex Customer Conference 2012The Intersection of Technology and ...
Responsive vs. the competition• The alternatives: Apps or mobile-only sites• One code base means:         – lower maintena...
The Responsive Design approach• Liquid layouts combined with designated breakpoints• “Progressive enhancement”         – S...
ExamplesAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |1...
Tennant CompanyRetrofitting a complex SharePoint site to be ResponsiveAvtex Customer Conference 2012The Intersection of Te...
Social WendyWordPress made responsiveAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceH...
WaterTrackerMobile-first Responsive DesignAvtex Customer Conference 2012The Intersection of Technology and Customer Experi...
Questions?Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis ...
Thank you!Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis ...
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
Upcoming SlideShare
Loading in …5
×

Delivering a Great User Experience with Responsive Design

292 views

Published on

This session reviews the key consideration for design and development of web sites in a mobile and/or flexible screen size world. Mobile devices offer new capabilities, but also pose limitations. In this session we'll review both good examples and well as a few cautionary tales and offer some guidance on where to start your mobile readiness review.

  • Be the first to comment

  • Be the first to like this

Delivering a Great User Experience with Responsive Design

  1. 1. Delivering a Great User Experience with Responsive Design Steven Ray Avtex User ExperienceAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012Avtex Customer Conference 2012 The Intersection of Technology and Customer Experience Hyatt Regency | Minneapolis |10.25.2012
  2. 2. Agenda• What is Responsive Design?• Why should you care?• How Responsive Design solves the problem• ExamplesAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  3. 3. What is Responsive Design?Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  4. 4. Defining Responsive Design• A way to adapt your site or application to mobile devices• Build one version that works on any device• Design for screen size, not specific devicesAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  5. 5. Why should you care?Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  6. 6. Goin’ mobileThe Internet isn’t just for desktops any more• By 2014, mobile web usage is expected to exceed desktop web usage (Morgan Stanley)• The number and type of viewing devices is growing geometrically – tablets, phones, TVs, in-car systems… even Google Glasses.• Each with different operating systems, browsers and capabilitiesAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  7. 7. It’s Madness!Why should you care?The Internet isn’t just for desktops any moreAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  8. 8. User ExpectationsJust in case it weren’t complicated enough….• The device being used shapes expectations: – Phone: no keyboard, bigger buttons, careful use of limited screen space – Tablet: hybrid of phone and desktop – Mobile devices in general: Internet connection usually slower and more limited• Not just for websites – Users increasingly want to use multiple devices and screen sizes to access intranets, internal applications, etc.Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  9. 9. What if I do nothing?It’s an option. • For tablets, you’ll be sort-of okay. • But on small screens it becomes a terrible user experience. Lots of pinching, zooming and scrolling, and too-small buttons that are hard to hit • Most users won’t bother • If you change your mind, retrofitting is more expensiveAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  10. 10. How Responsive Design solves the problemAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  11. 11. Responsive vs. the competition• The alternatives: Apps or mobile-only sites• One code base means: – lower maintenance costs – Consistent content across platforms – No need for redirects, or trying to persuade users to download your app• Designing for specific screen sizes means: – Future proof – No need for elaborate device-detection codeAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  12. 12. The Responsive Design approach• Liquid layouts combined with designated breakpoints• “Progressive enhancement” – Start with mobile view and go up – Helps ensure design is thoroughly thought out• “Graceful Degradation” – Start with traditional view and shrink down – Usually simpler to think through – Risks “dumbing down” mobile versionAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  13. 13. ExamplesAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  14. 14. Tennant CompanyRetrofitting a complex SharePoint site to be ResponsiveAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  15. 15. Social WendyWordPress made responsiveAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  16. 16. WaterTrackerMobile-first Responsive DesignAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  17. 17. Questions?Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  18. 18. Thank you!Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
  19. 19. Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012

×