A RESPONSIVE

DESIGN WORKSHOP
WITH KAREN McGRANE
& ETHAN MARCOTTE

30 August 2017 / UX Week

WHAT YOU’RE IN FOR TODAY
9:00 –9:45 Our multi-device future
9:45 - 10:30 Responsive design: a flexible foundation
10:30 –11:00 Break
11:00 –12:30 Content strategy for mobile
12:30 –1:30 Lunch
1:30 –3:00 Fundamentals of responsive layouts
3:00 –3:30 Break
3:30 –4:15 Process and performance
4:15 - 5:00 Rollout and governance
Getting to know you
• Who are you?
• What is your role?
• What do you hope to get out of this workshop?
• What are you most worried about?
WHY GO RESPONSIVE?
You’ve probably heard this before, but it
really was a no-brainer to go responsive.

–Sarah Thompson, Seventh Generation

1. Mobile growth

The explosion of growth in mobile has not come at the expense
of desktop use.
2. Device diversity

We can’t reliably target designs by screen size or device class.
3. User behavior

People expect a consistent experience across devices.
4. Unified processes

Resource-constrained teams cannot manage and maintain
multiple web properties.
5. Business value

Responsive sites deliver more value to the organization.
MOBILE GROWTH
MANY INDUSTRIES SEE ABOUT 50% OF THEIR
TRAFFIC FROM MOBILE DEVICES
SEARCH TRAFFIC IS ALSO ABOUT 50% MOBILE
 FACEBOOK AND TWITTER BOTH SEE 80% OF THEIR
DAILY/MONTHLY ACTIVE USERS ON MOBILE

http://www.businessinsider.com/facebook-daily-active- http://www.statista.com/chart/1520/number-of-monthly-active-
users-q4-2014-2015-1 twitter-users/
 MOBILE USE HAS NOT COME 

AT THE EXPENSE OF DESKTOP USE
WE SPEND ABOUT 2.5 HOURS PER DAY ON BOTH
DESKTOP AND MOBILE DEVICES
DEVICE DIVERSITY
 18,796 DISTINCT ANDROID DEVICES

http://opensignal.com/reports/2014/android-fragmentation/
 WE HAVE NO
reliable way
TO DETECT DEVICE TYPE
 Nexus S XOOM iPad 2

http://www.slideshare.net/guypod/performance-implications-of-mobile-design-perf-audience-edition
 WE HAVE NO
reliable way
TO DETECT INPUT

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
 Web developers want
bandwidth media queries to be
able to serve image resolutions
according to their users’
network conditions.
 WE HAVE NO
reliable way
TO DETECT BANDWIDTH

https://www.smashingmagazine.com/2013/01/bandwidth-media-queries-we-dont-need-em/
Icons by Geovani Almeida, Rémy Médard, Icons Mind
THE ONLY THING WE CAN
reliably know
IS THE SIZE OF THE 

BROWSER WINDOW
 Responsive design is not about
“designing for mobile.” But it’s not about
“designing for the desktop” either.
Rather, it’s about adopting a more
flexible, device-agnostic approach to
designing for the web.

Ethan Marcotte
Mobile Device Diversity
• Many sites see about 50% of their traffic from mobile
devices.
• Email, search, and major social platforms are 50% mobile
or higher.
• Desktop usage remains consistent, mobile hasn’t
cannibalized the desktop.
• Mobile devices offer a seemingly infinite variety of screen
sizes, form factors, input mechanisms, and functionality.
USER BEHAVIOR
THE MYTH OF MOBILE CONTEXT
 “MOBILE” ISN’T ONLY ON-THE-GO—MOBILE
SEARCHES PRIMARILY HAPPEN AT HOME OR WORK

Google, Mobile Search Moments

 90% OF PEOPLE START A TASK ON ONE DEVICE,
THEN COMPLETE IT ON ANOTHER

Google, Navigating the Multi-Screen World

http://www.exacttarget.com/sites/exacttarget/files/deliverables/etmc-2014mobilebehaviorreport.pdf
“
By far, access to content “any way I want” is
consumers’ most important criteria when
rating mobile brand experiences. In fact,
91% of consumers say access to content
any way they want is important to them.

http://www.exacttarget.com/sites/exacttarget/files/deliverables/etmc-2014mobilebehaviorreport.pdf
“
83% of consumers also say a seamless
experience across all their devices is
important to them—and this number
increases when considering just those who
own both a smartphone or a tablet (87% of
consumers who rated this factor as
important owned both devices).

http://www.exacttarget.com/sites/exacttarget/files/deliverables/etmc-2014mobilebehaviorreport.pdf
CUSTOMERS WILL USE MOBILE DEVICES IN EVERY
CONTEXT, IF YOU MAKE IT EASY ENOUGH
“
We’ve been pleasantly surprised by
people’s willingness to complete complex
financial transactions on all the form
factors, even on a phone.
—Stephen Turbek, SVP User Experience Design, Fidelity

http://responsivewebdesign.com/podcast/expedia.html
Mobile-dependent users shouldn’t get
less information or different information
Certain groups of Americans rely on smartphones for
online access at elevated levels, in particular:
• Younger adults — 15% of Americans ages 18-29 are
heavily dependent on a smartphone for online access.
• Those with low household incomes and levels of
educational attainment — Some 13% of Americans
with an annual household income of less than $30,000
per year are smartphone-dependent. Just 1% of
Americans from households earning more than
$75,000 per year rely on their smartphones to a similar
degree for online access.
• Non-whites — 12% of African Americans and 13% of
Latinos are smartphone-dependent, compared with
4% of whites.

http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/
Users don’t want different
information on different devices
• People who own multiple devices say having a consistent
and seamless experience is important, especially because
people use multiple devices to complete a task.
• “Mobile” doesn’t mean you’re on the move. People use
mobile devices in every context (especially when they’re at
home or at work.)
• Some Americans depend on their smartphones for
internet access—don’t give them a subpar experience.
BUT WHAT ABOUT APPS?
WEB PROVIDES MORE GROWTH FOR MARKETING
UNIFIED PROCESSES
“
The reason a separate mobile website is
dangerous is that, in general, you want to
avoid creating multiple versions of your
website. It’s called forking, and it’s a forking
nightmare from a maintenance
perspective.
If you fork your website into separate
mobile and desktop versions, then you’re
stuck updating both every time there’s a
change.
—Content Strategy For Mobile
Build a separate mobile site ✘
Cut features and content not
core to the mobile use case ✘
Send users who need more
info to the desktop site ✘
paltry subset of features and content
you don’t get to decide which device
someone uses to visit your m-dot
NO FORKING WAY.
“
Take it from experience: we had a separate
mobile website with a different tech stack
and it turned out to be a lot of work to
maintain. It fell really out of date—totally
diverged from the desktop—and you don’t
want that. Mobile is so important to your
business that you can’t afford to be sending
people to a poor experience. My advice is to
avoid building a separate web application
just for mobile sites. Just go responsive.
— Dave Augustine, Airbnb
“
A framework of responsive web gave us the
opportunity to respond more quickly to
device changes and to make sure our
content was updated across all platforms.
Reducing the management costs and
maintaining a more consistent presence
was perhaps the most winning point we
made in our discussions.
—Tina Alexander, Celebrity Cruises
BUSINESS VALUE
http://v1.aberdeen.com/launch/report/knowledge_brief/9084-KB-responsive-design.asp
“
Responsive will be competing with
optimized mobile web. Our first head-to-
head contest was literally two or three
months ago, and I think the analytical/
technical term was “responsive kicked its
butt.”
— Scott Kelton Jones, Expedia