Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
t...
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/responsiv...
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/
RESPONSIVE ADAPTIVE M-DOT
?
?
?
ADAPTIVE MEANS
SERVING SOMETHING
different
http://blog.froont.com/9-basic-principles-of-responsive-web-design/
http://www.liquidapsive.com/
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...
“
Adaptive design is server-side, meaning
before the page is even delivered, the
server detects the attributes of the
devi...
—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
If we go responsive, can we serve 

a different homepage?
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
CONDITIONAL LOADING
Adjust layout fluidly
on the client side
RESPONSIVE ADAPTIVE M-DOT
Same URL? ✓ ✓ ✗
Same Design? ✓ ✗ ✗
Same Content?
✓ ✗ ✗
COPE:
CREATE ONCE,
PUBLISH EVERYWHERE
COPE: Create Once, Publish Everywhere
COPE:
Create Once,
Publish Everywhere
“
We had a phone website, and a tablet
website, and a desktop website, and we
really only maintained the desktop
website b...
GRANULARITY
TARGETING
DEVICE
OS
desktop
mobile
device type
capabilities
CONTEXT
time
location
velocity
barometer
temperature
PERSON
age
gender
l...
DEVICE
OS
desktop
mobile
device type
capabilities
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
differe...
CONTEXT
time
location
velocity
barometer
temperature
https://www.airpair.com/javascript/posts/location-based-content-with-mean-and-contentful
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 dif...
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/
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...
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 ...
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
c...
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 ha...
@karenmcgrane

karen@bondartscience.com
bondartscience.com
responsivewebdesign.com
THANK YOU
No
abookapart.com
ABOUT THE A...
"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
"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
"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
"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
"Adaptive Content, Context, and Controversy
"Adaptive Content, Context, and Controversy
"Adaptive Content, Context, and Controversy
"Adaptive Content, Context, and Controversy
Upcoming SlideShare
Loading in …5
×

"Adaptive Content, Context, and Controversy

565 views

Published on

In 2017, “adaptive content” has become a buzzword. To some, it’s a complex, long-term initiative to structure content for flexible reuse and dynamic targeting. To others, it’s a way to ensure that everyone, everywhere, sees exactly what they want—like magic! In this talk, Karen shares her perspective (and reservations) on how adaptive content is being used today. She’ll discuss how adaptive content supports targeting content to device type—and why that’s rarely necessary. She’ll also describe ways that adaptive content can support tailoring content according to context—and ways that can go wrong. You’ll walk away with a better understanding of when adaptive content is necessary and how to get the most value from it.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

"Adaptive Content, Context, and Controversy

  1. 1. ADAPTIVE content, context, and controversy @karenmcgrane
  2. 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. 3. Content URL Codebase Team Release 
 Schedule ONE
  4. 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
  5. 5. RESPONSIVE ADAPTIVE M-DOT aka“SeparateMobileWebsite”
  6. 6. http://responsivewebdesign.com/
  7. 7. paltry subset of features and content
  8. 8. https://blog.radware.com/report-2014-state-of-the-union-for-mobile-ecommerce-performance/
  9. 9. RESPONSIVE ADAPTIVE M-DOT ? ? ?
  10. 10. ADAPTIVE MEANS SERVING SOMETHING different
  11. 11. http://blog.froont.com/9-basic-principles-of-responsive-web-design/
  12. 12. http://www.liquidapsive.com/
  13. 13. https://medium.com/bridge-collection/modern-design-tools-adaptive-layouts-e236070856e3
  14. 14. http://opensignal.com/reports/2014/android-fragmentation/
  15. 15. ADAPTIVE MEANS SOMETHING DIFFERENT serving
  16. 16. aka“DynamicServing” also“RESS” RESPONSIVE ADAPTIVE M-DOT Same URL? ✓ ✓ ✗
  17. 17. “ 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
  18. 18. “ 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
  19. 19. —Google Webmasters Responsive design is Google’s recommended approach for building mobile websites. Mobile SEO
  20. 20. RESPONSIVE ADAPTIVE M-DOT Same URL? ✓ ✓ ✗ Same Design? ✓ ✗ ✗
  21. 21. SERVE A DIFFERENT PAGE
  22. 22. If we go responsive, can we serve 
 a different homepage?
  23. 23. responsivewebdesign.com/podcast/codepen/
  24. 24. http://www.business2community.com/mobile-apps/a-mobile-responsive-landing-page-is-crushing-your-conversion-rate-01241051
  25. 25. SERVE A DIFFERENT FEATURE
  26. 26. CONDITIONAL LOADING
  27. 27. Adjust layout fluidly on the client side
  28. 28. RESPONSIVE ADAPTIVE M-DOT Same URL? ✓ ✓ ✗ Same Design? ✓ ✗ ✗ Same Content? ✓ ✗ ✗
  29. 29. COPE: CREATE ONCE, PUBLISH EVERYWHERE COPE: Create Once, Publish Everywhere COPE: Create Once, Publish Everywhere
  30. 30. “ 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
  31. 31. GRANULARITY
  32. 32. TARGETING
  33. 33. DEVICE OS desktop mobile device type capabilities CONTEXT time location velocity barometer temperature PERSON age gender lifestage language relationship
  34. 34. DEVICE OS desktop mobile device type capabilities
  35. 35. You can’t use device type to predict what users will want
  36. 36. “ 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
  37. 37. CONTEXT time location velocity barometer temperature
  38. 38. https://www.airpair.com/javascript/posts/location-based-content-with-mean-and-contentful
  39. 39. PERSONALIZATION FAN FIC
  40. 40. 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.
  41. 41. http://www.exacttarget.com/sites/exacttarget/files/deliverables/etmc-2014mobilebehaviorreport.pdf
  42. 42. YOU DON’T GET TO DECIDE SOMEONE USES TO GO ONLINE which device they do.
  43. 43. http://www.digitalclaritygroup.com/netflix-you-dont-know-diddly-about-context/
  44. 44. Don’t use device as 
 a proxy for context
  45. 45. “ 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
  46. 46. Most of the time, you’re better off serving the same information to all.
  47. 47. “ 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
  48. 48. Adaptive solutions aren’t magic. They’re complex and costly.
  49. 49. “ 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
  50. 50. Adaptive + responsive solutions work together—they’re not competitors.
  51. 51. “ 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
  52. 52. @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

×