delivering a great user experience with responsive design
DESCRIPTION
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.TRANSCRIPT
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
Delivering a Great User Experience with Responsive Design
Steven RayAvtex User Experience
Avtex Customer Conference 2012 The Intersection of Technology and Customer Experience Hyatt Regency | Minneapolis |10.25.2012
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
Agenda
• What is Responsive Design?• Why should you care?• How Responsive Design solves the problem• Examples
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
What is Responsive Design?
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
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 devices
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
Why should you care?
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
Goin’ mobile
• 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 capabilities
The Internet isn’t just for desktops any more
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
Why should you care?The Internet isn’t just for desktops any more It’s Madness!
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
User Expectations
• 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.
Just in case it weren’t complicated enough….
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
What if I do nothing?
• 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 expensive
It’s an option.
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
How Responsive Designsolves the problem
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
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 code
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
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 version
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
Examples
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
Tennant CompanyRetrofitting a complex SharePoint site to be Responsive
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
Social WendyWordPress made responsive
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
WaterTrackerMobile-first Responsive Design
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
Questions?
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012
Thank you!
Avtex Customer Conference 2012The Intersection of Technology and Customer ExperienceHyatt Regency | Minneapolis |10.25.2012