This document discusses the differences between responsive and adaptive design approaches. Responsive design adjusts the layout of a website based on screen size using CSS media queries, serving the same content to all devices from a single URL. Adaptive design serves different content and layouts tailored for different devices by detecting device attributes on the server-side before page load. While adaptive provides more customization, responsive is more cost-effective as it requires less development and maintenance resources. The document argues that in most cases, a responsive-first approach covering common tasks across devices, with potential for limited adaptive additions, provides the best user experience over separate mobile sites or apps.

1. ADAPTIVE
content, context, and controversy
@karenmcgrane

2. —W3C
One Web means making, as far as is
reasonable, the same information and
services available to users irrespective of
the device they are using.
http://www.w3.org/TR/mobile-bp/#OneWeb

3. Content URL
Codebase Team
Release
Schedule
ONE

4. —Everyone at Marriott
I need more than a responsive site,
I need it to be adaptive.
https://medium.com/@livlab/responsive-versus-adaptive-is-not-a-thing-b712eefaf313

7. RESPONSIVE ADAPTIVE M-DOT
aka“SeparateMobileWebsite”

8. http://responsivewebdesign.com/

9. paltry subset of features and content

10. https://blog.radware.com/report-2014-state-of-the-union-for-mobile-ecommerce-performance/

11. RESPONSIVE ADAPTIVE M-DOT
?
?
?

13. ADAPTIVE MEANS
SERVING SOMETHING
different

14. http://blog.froont.com/9-basic-principles-of-responsive-web-design/

15. http://www.liquidapsive.com/

17. https://medium.com/bridge-collection/modern-design-tools-adaptive-layouts-e236070856e3

18. http://opensignal.com/reports/2014/android-fragmentation/

19. ADAPTIVE MEANS
SOMETHING DIFFERENT
serving

20. aka“DynamicServing”
also“RESS”
RESPONSIVE ADAPTIVE M-DOT
Same URL? ✓ ✓ ✗

21. “
Responsive design is client-side, meaning
the whole page is delivered to the device
browser (the client) and the browser then
changes how the page appears in relation
to the dimensions of the browser window.
http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html

22. “
Adaptive design is server-side, meaning
before the page is even delivered, the
server detects the attributes of the
device, and loads a version of the page
that is optimized for its dimensions and
native features.
http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html

23. —Google Webmasters
Responsive design is Google’s
recommended approach for building
mobile websites.
Mobile SEO

24. RESPONSIVE ADAPTIVE M-DOT
Same URL? ✓ ✓ ✗
Same Design? ✓ ✗ ✗

25. SERVE A DIFFERENT PAGE

27. If we go responsive, can we serve
a different homepage?

29. responsivewebdesign.com/podcast/codepen/

30. http://www.business2community.com/mobile-apps/a-mobile-responsive-landing-page-is-crushing-your-conversion-rate-01241051

31. SERVE A DIFFERENT FEATURE

34. CONDITIONAL LOADING

35. Adjust layout fluidly
on the client side

36. RESPONSIVE ADAPTIVE M-DOT
Same URL? ✓ ✓ ✗
Same Design? ✓ ✗ ✗
Same Content?
✓ ✗ ✗

38. COPE:
CREATE ONCE,
PUBLISH EVERYWHERE
COPE: Create Once, Publish Everywhere
COPE:
Create Once,
Publish Everywhere

41. “
We had a phone website, and a tablet
website, and a desktop website, and we
really only maintained the desktop
website because we didn’t have enough
resources to cover all those fronts. It just
wasn’t a tenable situation.
—Patrick Cooper, NPR
http://responsivewebdesign.com/podcast/npr.html

42. GRANULARITY

43. TARGETING

45. DEVICE
OS
desktop
mobile
device type
capabilities
CONTEXT
time
location
velocity
barometer
temperature
PERSON
age
gender
lifestage
language
relationship

46. DEVICE
OS
desktop
mobile
device type
capabilities

51. You can’t use device
type to predict what
users will want

52. “
Our data shows us quite plainly and
clearly that the behavior of people on
mobile devices is really not all that
different than the behavior of people on
the desktop. The things they are seeking
to do and the tasks they are seeking
to accomplish are really quite the same.
—Chris Balt, Microsoft
http://responsivewebdesign.com/podcast/microsoft.html

53. CONTEXT
time
location
velocity
barometer
temperature

55. https://www.airpair.com/javascript/posts/location-based-content-with-mean-and-contentful

60. PERSONALIZATION FAN FIC

61. You want to get to know your customers and
determine whether they’re pre-, in-, or post-store.
You’ll need to create a different experience depending
on where the customer is in the path to purchase.
Adaptive design enables the customer to have a
customized experience based on the device he or she
is using. Optimize the customer experience by
tailoring the design and information to the device.

68. http://www.exacttarget.com/sites/exacttarget/files/deliverables/etmc-2014mobilebehaviorreport.pdf

69. YOU DON’T GET TO DECIDE
SOMEONE USES TO GO ONLINE
which device
they do.

70. http://www.digitalclaritygroup.com/netflix-you-dont-know-diddly-about-context/

72. Don’t use device as
a proxy for context

73. “
What we’ve discovered as we do our
ethnography research, our lab studies, as
we watch the mechanics of our sites from
an analytics perspective: People make the
same decisions regardless of the context.
—Scott Kelton Jones, VP Global UX, Expedia
http://responsivewebdesign.com/podcast/expedia.html

74. Most of the time, you’re better off
serving the same information to all.

75. “
Thinking of responsive was just table
stakes. It’s just a default thing that should
always happen. You may later decide to
create a custom experience. But you don’t
have to go there first. You can start with
responsive.
—Bill Scott, VP of Next Gen Commerce, PayPal
http://responsivewebdesign.com/podcast/paypal.html

76. Adaptive solutions aren’t magic.
They’re complex and costly.

77. “
If our customers are expecting a coherent
experience across touchpoints, why are
we siloing efforts by a narrow device
category definition? Practically, One Web
reinforces the needs for unified systems,
processes, and teams that drive real-
world cost savings and digital business
efficiencies.
Forrester Research, Analyzing The Value Of Responsive Web Design Can Be Messy

78. Adaptive + responsive solutions work
together—they’re not competitors.

79. “
It’s important to acknowledge that most
activities are universal, even if there may
also be device-specific needs. By having
the web experience unified through a
responsive approach, we cover the base
scenarios across the board, and can later
do a better job at handling device
specifics.
—Livia Labate
http://responsivewebdesign.com/podcast/marriott.html

80. @karenmcgrane
karen@bondartscience.com
bondartscience.com
responsivewebdesign.com
THANK YOU
No
abookapart.com
ABOUT THE AUTHOR
Karen McGrane has helped businesses create better digital
products through the power of user experience design and
content strategy for the past twenty years. She is Managing
Partner at Bond Art + Science, a UX consultancy she founded
in 2006 and formerly VP and National Lead for User Experience
at Razorfish. Karen teaches Design Management in the MFA
in Interaction Design program at the School of Visual Arts in
Manhattan. She co-hosts A Responsive Web Design Podcast
with Ethan Marcotte, and her first book, Content Strategy for
Mobile, was published in 2012 by A Book Apart.
Ready your entire team for any responsive project.
Responsive design is more than the technical—it’s
a new way of communicating and working. Karen
McGrane makes the case for going responsive,
taking you through the design process. Learn how to
plan and scope projects, collaborate in a responsive
context, assess content, handle browser support
and testing, and measure the total success of your
project. This book is for everyone.
“There is absol
guide you thro
She says, ‘The
is navigating t
organizationa
personal expe
“Finally, a boo
for doing the
McGrane’s Go
hands-on pra
supporting th
Autho
“Coordinating
with wisdom
Responsive wil
decisionsthatw
project, and p
“This is the b
addresses the
it, read it, and
foreword by Frank Chimero
GOING
RESPONSIVE
Karen McGrane
Brief books for people who make websites
GOINGRESPONSIVEKarenMcGrane
1616