Does your website have these elements of responsive web design?

Responsive UX:
Does your website user experience
have these elements of responsive
All contents © Copyright 2013 Experience Dynamics Inc.
1
have these elements of responsive
design?
An Experience Dynamics training
WEB SEMINAR
With Frank Spillers, MS

About Your Speaker
Frank Spillers
• Masters Cognitive Science
• 15 years User Centered Design experience
• Founder, Experience Dynamics- leading User Experience
consulting firm
2
consulting firm
• Works with Logitech, Nike, Microsoft, Intel, IBM, HP and more.

Agenda
With 50% of Americans now owning smartphones, and much of our Web browsing occurring on
mobile devices, websites are running into a common issues affecting the underlying user
experience: how does our design look across devices? How compatible or pleasant is it to view,
read and browse? To solve this problem, many organizations including the largest companies in
the world, are turning to Responsive Web Design. At its core, the responsive approach embraces
a core user experience goal: interoperability and design compatibility across platforms.
Considered a buzz word, a new Internet trend or a nice to have, Responsive Design is
increasingly being viewed as a must have wherever possible.
3
1. Designing for Responsive: building the case
2. What would happen if you did or didn’t go responsive
3. Responsive vs adaptive web design (CSS3 and HTML5)
4. 5 ways your UX can be enhanced with responsive web
design
5. Responsive Design top 10 tips for improving UX issues
6. Q & A

1. Designing for Responsive: building the
case
4

Today’s Design Environment
It often starts on mobile
44% (61% web calls) 51%
(April 2013)
74% App revenue 20%

• And moves to Desktop---often as a logged in
Web App
• That might start on a site

And go back to mobile (iPad)

And it’s Social…

“Rather than tailoring disconnected designs to
each of an ever-increasing number of web
devices, we can treat them as facets of the same
experience. We can design for an optimal
viewing experience, but embed standards-based
technologies into our designs to make them not
only more flexible, but more adaptive to the
9
only more flexible, but more adaptive to the
media that renders them. In short, we need to
practice responsive web design.”
Ethan Marcotte, Responsive Web Design

102010Microsoft Tag infographic

Done!
We’re all in the Mobile UX arena now…
11

44% (61% web calls) 51%
(April 2013)
74% App revenue 20%
12

75%
connected
Globally
(2012 World
Bank)
13
70%
Android
Globally
(Strategy
Analytics Q1
2013)

Why orgs are going ‘responsive’
GOOD UX REASONS:
• Fixed resolutions offer sub-
par experience
• Pinch and zoom fatigue on
mobile (m. sites)
• Scale to a Mobile App-like
experience rapidly
experience rapidly
• Boost conversion rates
(Hint Video is part of that story-
see right)
14

2. What would happen if you did or didn’t
go responsive
15

If you Did Go Responsive
ONE SET OF CODE TO:
-MANAGE (one change to all)
-DESIGN (adapts per device)
-DEVELOP (one version of code)
BETTER MOBILE UX STRATEGY:
16
BETTER MOBILE UX STRATEGY:
-AVOID ‘NEEDING’ AN APP
-AVOID CRAPPY M. site
-SCALE TO FUTURE DEVICES/ VIDEO
PROVIDE A BETTER EXPERIENCE:
-ADDRESS ACCESSIBILITY
-ADDRESS INTER-OPERABILITY
-OFFER GREATER CONTEXT SENSITIVITY

If you Didn’t
MORE CODE TO MANAGE/DEV/TEST
LESS ACCESS TO CSS 3 ENHANCEMENTS
LESS STRATEGIC UX OPTIMIZATION
RESOLUTION MADNESS INTENSIFIES
17
RESOLUTION MADNESS INTENSIFIES

18

19

20

It’s not all a cake walk
CSS 2 to deal with (use multiple stylesheets)
Old Versions of IE to support , or not
21
Old Versions of IE to support , or not
Still lots of testing (and cost)
Over-downloading to deal with (Optimization of download speed)
Eg. Apple loads regular images then replaces high resolution images
with JavaScript.

3. Responsive vs adaptive web design
(CSS3 and HTML5)
22

Responsive Design

Responsive Design
http://mediaqueri.es/See more responsive design examples:
Read more on Adaptive vs Responsive: http://tinyurl.com/a8sg5hp
Summary: Device friendly design without having to code a new site for each device.

Adaptive Design
Text of a Page
(Copy well written)
HTML semantics
(Tags H1, strong, quote)
1
2
Audio-Visual
CSS-images, audio, video
Interactive
JavaScript, Flash, Java
3
4
Adaptive Design
Possible CSS3
Levels of Adaptive Design:
HTML 5 + ARIA (Accessible Rich Internet Applications spec)
What’s the difference? (Circle R for Responsive and A for Adaptive)
a) Adapt to changing devices A R
b) Adapt to resolution changes A R
c) Adapt to context of use A R
d) Show or hide functionality A R
e) All of the above
Answer=R,R,A,A
Read more book Adaptive Web Design by Aaron Gustafson
HTML 5 + ARIA (Accessible Rich Internet Applications spec)

Adaptive Design
+
26
Summary: Design to cater to device/ context/ UX.
+

4. 5 ways your UX can be enhanced with
responsive web design
27

WAY 1: Show “all” content
28

WAY 2: Support mobile UX tasks
29

WAY 3: Cater to mobile contexts
•Enable greater precision in task
success
•Enable greater conversions
30
•Enable greater conversions
•Enhance the social nature of mobile

WAY 4: Support Mobile Usability
31

WAY 5: Do Accessibility, finally!
32
See http://www.slideshare.net/wearesigma/accessibility-in-responsive-web-design

5. Responsive Design top 10 tips for
improving UX issues
33

1. Optimize your media queries
34

2. Use Progressive Enhancement
35
Use CSS to maximize the native browser’s capabilities.

3. Use Responsive Typography
36
Tip: Check out Typecast for responsive typography testing.
See
And http://letteringjs.com/ for even controlling indiv. letters!
http://jbrewer.github.io/Responsive-Measure/
Hat tip to WooThemes

4. Push users toward their or your
goals
37

5. Use Flexible & Adaptive Images
Adaptive your visitor's screen size
and automatically creates, caches,
and delivers device appropriate re-
scaled versions of your web page's
embedded HTML images. No mark-
up changes needed. It is intended for
use with Responsive Designs and to
38
Tip: Using CSS sprites to optimize for Retina displays
See http://adaptive-images.com/
use with Responsive Designs and to
be combined with Fluid
Image techniques.

6. Make Navigation Easy
39

7. Prioritize and distill content
usability
•More focused content=
better attention span
40
•Comprehension is 50%
less on mobile than
desktop (Singh et all 2011)

8. Make your Tables responsive
41
http://dbushell.com/2012/01/05/responsive-tables-2/
http://css-tricks.com/examples/ResponsiveTables/responsive.php

9. Decide on your Break points
eg break at 320 px Phone 768 px Tablet
42
But build flexible grid based layout to blur break edges…

10. Detect enviro + decision needs
43

5. Q & A
44
http://www.experiencedynamics.com/shop/mobile-user-experience-training
For more join us on a Mobile UX training coming up:

thank you!
45
thank you!
1-800-978-9183
www.experiencedynamics.com
Frank Spillers, MS
Frank.Spillers@experiencedynamics.com

About Experience Dynamics:
Experience Dynamics is a professional usability design research firm. Through its User Centered
Design services, Experience Dynamics assists organizations with removing the frustration and
confusion that plagues most website and software development projects. Companies benefiting from
Experience Dynamics actionable usability recommendations include AutoNation, IBM, Hewlett
Packard, Intel, Verizon, Microsoft, Four Seasons, Washington Mutual, Bank One, Target, Land Rover,
Providence Health System and KeyBank.
About Experience Dynamics web seminars:
About Experience Dynamics web seminars:
Experience Dynamics offers a recurring set of usability web seminars on hot usability topics. The web
seminars provide an overview and quick review of key issues and opportunities related to best
practices in usability research.
The seminars are presented by Frank Spillers, MS, a recognized expert in the field of usability
engineering and user experience design. Experience Dynamics seminars are complimentary and are
attended by companies including Intel, Citigroup, KeyBank, The Hartford, Fujitsu, Intuit, EMC Corp,
Chase, US Bank, Apple, Amazon.com, Business Objects, Mentor Graphics, GM, Toyota and others.

Does your website have these elements of responsive web design?

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (10)

Similar a Does your website have these elements of responsive web design?

Similar a Does your website have these elements of responsive web design? (20)

Más de Experience Dynamics

Más de Experience Dynamics (13)

Último

Último (20)

Does your website have these elements of responsive web design?