SlideShare a Scribd company logo
ADAPTIVE
content, context, and controversy
@karenmcgrane
—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
Content URL
Codebase Team
Release 

Schedule
ONE
—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
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
RESPONSIVE ADAPTIVE M-DOT
aka“SeparateMobileWebsite”
http://responsivewebdesign.com/
paltry subset of features and content
https://blog.radware.com/report-2014-state-of-the-union-for-mobile-ecommerce-performance/
Adaptive: Content, Context, and Controversy
ADAPTIVE MEANS
SERVING SOMETHING
different
http://blog.froont.com/9-basic-principles-of-responsive-web-design/
http://www.liquidapsive.com/
Adaptive: Content, Context, and Controversy
https://medium.com/bridge-collection/modern-design-tools-adaptive-layouts-e236070856e3
http://opensignal.com/reports/2014/android-fragmentation/
ADAPTIVE MEANS
SOMETHING DIFFERENT
serving
aka“DynamicServing”
also“RESS”
RESPONSIVE ADAPTIVE M-DOT
Same URL? ✓ ✓ ✗
“
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
“
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
—Google Webmasters
Responsive design is Google’s
recommended approach for building
mobile websites.
Mobile SEO
RESPONSIVE ADAPTIVE M-DOT
Same URL? ✓ ✓ ✗
Same Design? ✓ ✗ ✗
SERVE A DIFFERENT PAGE
Adaptive: Content, Context, and Controversy
If we go responsive, can we serve 

a different homepage?
Adaptive: Content, Context, and Controversy
responsivewebdesign.com/podcast/codepen/
http://www.business2community.com/mobile-apps/a-mobile-responsive-landing-page-is-crushing-your-conversion-rate-01241051
SERVE A DIFFERENT FEATURE
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
CONDITIONAL LOADING
Adjust layout fluidly
on the client side
RESPONSIVE ADAPTIVE M-DOT
Same URL? ✓ ✓ ✗
Same Design? ✓ ✗ ✗
Same Content?
✓ ✗ ✗
Adaptive: Content, Context, and Controversy
COPE:
CREATE ONCE,
PUBLISH EVERYWHERE
COPE: Create Once, Publish Everywhere
COPE:
Create Once,
Publish Everywhere
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
“
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
GRANULARITY
TARGETING
Adaptive: Content, Context, and Controversy
DEVICE
OS
desktop
mobile
device type
capabilities
CONTEXT
time
location
velocity
barometer
temperature
PERSON
age
gender
lifestage
language
relationship
DEVICE
OS
desktop
mobile
device type
capabilities
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
WE HAVE NO
TO DETECT INPUT
reliable way
http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
You can’t use device
type to predict what
users will want
“
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
CONTEXT
time
location
velocity
barometer
temperature
Adaptive: Content, Context, and Controversy
https://www.airpair.com/javascript/posts/location-based-content-with-mean-and-contentful
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
PERSONALIZATION FAN FIC
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.
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
http://www.exacttarget.com/sites/exacttarget/files/deliverables/etmc-2014mobilebehaviorreport.pdf
YOU DON’T GET TO DECIDE
SOMEONE USES TO GO ONLINE
which device
they do.
http://www.digitalclaritygroup.com/netflix-you-dont-know-diddly-about-context/
Adaptive: Content, Context, and Controversy
Don’t use device as 

a proxy for context
“
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
Most of the time, you’re better off
serving the same information to all.
“
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
Adaptive solutions aren’t magic.
They’re complex and costly.
“
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
Adaptive + responsive solutions work
together—they’re not competitors.
“
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
@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

More Related Content

PDF
The Future of Adaptive Content
PPTX
Information Architecture in Mobile
PDF
"Adaptive Content, Context, and Controversy
PDF
Building Organic Web Traffic, Webinar with iZooto
PDF
Responsive Design
PDF
Why Progressive Web Apps will transform your website
PPTX
Modular email templates
PPT
Mobile email - chasing context
The Future of Adaptive Content
Information Architecture in Mobile
"Adaptive Content, Context, and Controversy
Building Organic Web Traffic, Webinar with iZooto
Responsive Design
Why Progressive Web Apps will transform your website
Modular email templates
Mobile email - chasing context

What's hot (20)

PDF
Mobile Information Architecture
PDF
Your first web application. From Design to Launch
PDF
The Case for Progressive Web Apps
KEY
Developing a Progressive Mobile Strategy
PPTX
Responsive Email Design
PDF
Why use responsive web design?
PDF
Responsive web design
PDF
40 Tools in 20 Minutes: Hacking your Marketing Career
PDF
Adapting to Responsive Design - London Web - Feb 2015
PDF
Mobile First Responsive Design
KEY
Problems in Mobile Development
PDF
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
PDF
Jensimmons html5live-responsivedesign
PDF
"Making things real: Content strategy for realistic content management" - Con...
PDF
Artificially Intelligent Design(er). The End of User Experience as we know it?
PDF
Privacy vs. Convenience. Challenges for UX with Privacy and Personalization
PDF
Mobile first: A future friendly approach to UX design
PPTX
Designing app-like responsive web experiences
PDF
Technology in Ministry
DOCX
RESPONSIVE WEB DESIGN
Mobile Information Architecture
Your first web application. From Design to Launch
The Case for Progressive Web Apps
Developing a Progressive Mobile Strategy
Responsive Email Design
Why use responsive web design?
Responsive web design
40 Tools in 20 Minutes: Hacking your Marketing Career
Adapting to Responsive Design - London Web - Feb 2015
Mobile First Responsive Design
Problems in Mobile Development
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Jensimmons html5live-responsivedesign
"Making things real: Content strategy for realistic content management" - Con...
Artificially Intelligent Design(er). The End of User Experience as we know it?
Privacy vs. Convenience. Challenges for UX with Privacy and Personalization
Mobile first: A future friendly approach to UX design
Designing app-like responsive web experiences
Technology in Ministry
RESPONSIVE WEB DESIGN
Ad

Similar to Adaptive: Content, Context, and Controversy (20)

PDF
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
PDF
Responsive Web Design Framework Future of React Native.
PDF
Responsive Web Design Framework for Modern Websites.pdf
PDF
Future-Proofing the Web: Choosing the Optimal Mobile Design Strategy
PDF
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
PDF
Responsive & Adaprove Design
PPT
How to Act Like an Agency within a Company: UX for the Enterprise
PDF
Responsive & Adaptive Design: Delivering Websites That Delight Your Users
PDF
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
PDF
Build a Responsive WordPress Theme with Zurbs Foundation Framework
PDF
Responsive Web Design - more than just a buzzword
PDF
BBDO Whitepaper—Responsive & Adaptive Design
PDF
IJSRED-V2I5P23
PDF
Responsive Design and Joomla!
PDF
Web Application Development- Best Practices in 2023.
PDF
Responsive Web Design vs. Mobile Web App: What is best for Enterprise - Whit...
PDF
Web Application Development in 2023.pdf
PPTX
Beyond Branding SharePoint - SharePoint and Today's Web
PPTX
Theming for mobile devices recent
PDF
Mobile Application Development
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
Responsive Web Design Framework Future of React Native.
Responsive Web Design Framework for Modern Websites.pdf
Future-Proofing the Web: Choosing the Optimal Mobile Design Strategy
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Responsive & Adaprove Design
How to Act Like an Agency within a Company: UX for the Enterprise
Responsive & Adaptive Design: Delivering Websites That Delight Your Users
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Build a Responsive WordPress Theme with Zurbs Foundation Framework
Responsive Web Design - more than just a buzzword
BBDO Whitepaper—Responsive & Adaptive Design
IJSRED-V2I5P23
Responsive Design and Joomla!
Web Application Development- Best Practices in 2023.
Responsive Web Design vs. Mobile Web App: What is best for Enterprise - Whit...
Web Application Development in 2023.pdf
Beyond Branding SharePoint - SharePoint and Today's Web
Theming for mobile devices recent
Mobile Application Development
Ad

More from Karen McGrane (20)

PDF
The Mobile Content Mandate
PDF
Content in a Zombie Apocalypse
PDF
Thriving in a world of change: Future-friendly content with Drupal
PDF
IA Summit 2013 Closing Plenary
PDF
Content Strategy for Mobile: The Workshop
KEY
Uncle Sam Wants You (To Optimize Your Content For Mobile)
PDF
Adapting Ourselves to Adaptive Content
PDF
Adapting ourselves to adaptive content
PDF
Developing Successful Content Management Solutions
PDF
Adapting ourselves to adaptive content
PDF
The Way Forward: What's next for content strategy
KEY
Selling content strategy
KEY
Nailing Your Performance
KEY
Making the most of mobile
KEY
Nashville UX Meetup
KEY
How to do content strategy
PDF
Avoiding the 11th Hour Sh*storm at SxSW
PDF
Baby Got Backend: Content Administrators are Users Too
PDF
Content Strategy for the Web
PDF
We are all content strategists now
The Mobile Content Mandate
Content in a Zombie Apocalypse
Thriving in a world of change: Future-friendly content with Drupal
IA Summit 2013 Closing Plenary
Content Strategy for Mobile: The Workshop
Uncle Sam Wants You (To Optimize Your Content For Mobile)
Adapting Ourselves to Adaptive Content
Adapting ourselves to adaptive content
Developing Successful Content Management Solutions
Adapting ourselves to adaptive content
The Way Forward: What's next for content strategy
Selling content strategy
Nailing Your Performance
Making the most of mobile
Nashville UX Meetup
How to do content strategy
Avoiding the 11th Hour Sh*storm at SxSW
Baby Got Backend: Content Administrators are Users Too
Content Strategy for the Web
We are all content strategists now

Adaptive: Content, Context, and Controversy