Your SlideShare is downloading. ×
Delivering a Great User Experience with Responsive Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Delivering a Great User Experience with Responsive Design

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


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
123
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
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
  • Update with agenda information
  • Use this slide to separate subjects
  • Social WendyContents magazineTennantAthleteTrackerWaterTracker
  • Use this slide to separate subjects
  • Use this slide to separate subjects
  • Use this slide to separate subjects
  • Use for case study template
  • Use for case study template
  • Use for case study template
  • Use this slide to separate subjects
  • Use this slide to separate subjects
  • Transcript

    • 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. 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. What is Responsive Design?Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
    • 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. Why should you care?Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
    • 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. 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. 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. 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. How Responsive Design solves the problemAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
    • 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. 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. ExamplesAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
    • 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. Social WendyWordPress made responsiveAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
    • 16. WaterTrackerMobile-first Responsive DesignAvtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
    • 17. Questions?Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
    • 18. Thank you!Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
    • 19. Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012