Responsive design is a way to build websites that automatically adapt to different screen sizes like mobile phones and tablets. It involves using fluid, proportional layouts and CSS media queries to detect screen size and orientation. This allows a single website code base to be accessed on any device without needing separate mobile sites or apps. As mobile usage grows, responsive design solves the problems of inconsistent content and poor user experience that come from not supporting different screen sizes. Examples shown include sites built with responsive design techniques that work well on any device.

1. Delivering a Great User Experience
with Responsive Design
Steven Ray
Avtex User Experience
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt Regency | Minneapolis |10.25.2012
Avtex 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
• Examples
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt Regency | Minneapolis |10.25.2012

3. What is Responsive Design?
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt 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
devices
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt Regency | Minneapolis |10.25.2012

5. Why should you care?
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt Regency | Minneapolis |10.25.2012

6. Goin’ mobile
The 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 capabilities
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt Regency | Minneapolis |10.25.2012

7. It’s Madness!
Why should you care?
The Internet isn’t just for desktops any more
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt Regency | Minneapolis |10.25.2012

8. User Expectations
Just 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 2012
The Intersection of Technology and Customer Experience
Hyatt 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 expensive
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt Regency | Minneapolis |10.25.2012

10. How Responsive Design
solves the problem
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt 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 code
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt 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 version
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt Regency | Minneapolis |10.25.2012

13. Examples
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt Regency | Minneapolis |10.25.2012

14. Tennant Company
Retrofitting a complex SharePoint site to be Responsive
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt Regency | Minneapolis |10.25.2012

15. Social Wendy
WordPress made responsive
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt Regency | Minneapolis |10.25.2012

16. WaterTracker
Mobile-first Responsive Design
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt Regency | Minneapolis |10.25.2012

17. Questions?
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt Regency | Minneapolis |10.25.2012

18. Thank you!
Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt Regency | Minneapolis |10.25.2012

19. Avtex Customer Conference 2012
The Intersection of Technology and Customer Experience
Hyatt Regency | Minneapolis |10.25.2012