“ T U G O F WA R ” B Y J P H I L I P S O N I S L I C E N S E D U N D E R C C B Y- N C - N D 2 . 0
R E S O LV I N G T H E
C...
W E ’ V E G O T A P R O B L E M
M O B I L E U S E R S WA N T I T A L L
People’s Web Report
T O P P R I O R I T I E S
F O R M O B I L E W E B :
# 1 S P E E D ( 4 1 % )
# 2 C O N S I S T E N C Y ...
C A N ’ T W E A L L J U S T G E T A L O N G ?
C O N T E N T V S . U X
“ T H I S WA S A T I M E LY C A P T U R E ” B Y P E ...
D E S I G N C O N T E N T
“ B E H I N D W H I C H D O O R ” B Y M A R C FA L A R D E A U I S L I C E N S E D U N D E R C C B Y 2 . 0
I F Y O U J U S T H A D T H E
C O N T E N T ? ”
“ H O W M A N Y P R O J E C T S C O U L D Y O U L A U N C H T O D A Y …
“ C RY I N G ” B Y M E M E K O D E I S L I C E N S E D U N D E R C C B Y 2 . 0
“ G O O G L E E A R T H : 4 0 5 & 6 0 5 & 2 2 F W Y S ” B Y L U X U RY L U K E I S L I C E N S E D U N D E R C C B Y- N C ...
S O U R C E : D E V I S E C O N S U LT I N G “ D E F I N I N G U X ”
DESIGNFOCUSED
W E ’ R E A L L S T I L L E X P E R I M E N T I N G
“ A F T E R N O O N B R E W I N G ” B Y C O U N T E R C U LT U R E C O...
O B L I G AT O RY R W D I M A G E
S O U R C E : G O O G L E S E A R C H “ R E S P O N S I V E W E B D E S I G N ” 5 / 1 3 ...
T H E O N LY T H I N G
C O N S TA N T
I S T H E C O N T E N T.
R E S P O N S I V E W E B D E S I G N B Y M R A F I Z E L D...
“ I B E L I E V E 2 0 1 2 W I L L B E T H E Y E A R W H E N W E F I N A L LY
R E A L I Z E T H AT P L A N N I N G F O R G ...
– S T E P H E N H AY
“Structured content is the starting point for the
Responsive Web Design workflow."
S T E P H E N H AY...
“ C O N T E N T F I R S T ” - W H O ’ S W I T H M E ?
“ T E A C H E R I N C L A S S R O O M ” B Y A U D I O L U C I S T O ...
S O U R C E : S U P P O R T. B A L S A M I Q . C O M / C U S T O M E R / P O R TA L / A R T I C L E S / 8 7 1 9 0 2 - C R ...
Beard bicycle rights, farm-to-table
bitters polaroid sustainable Intelligentsia
swag High Life leggings. Direct trade
smal...
S O U R C E : B L O K K F O N T. C O M
C O N T E N T I S O F T E N S T U C K H E R E
… W H E N I T R E A L LY S H O U L D B E H E R E
“ S L I P - N - S L I D E Q...
P O S T- WAT E R FA L L W O R L D
W E ’ R E D E S I G N I N G I N T H E
“ T H E WAT E R FA L L ” B Y P U T H O O R _ P H O...
– J E R E M Y K E I T H
“When we should be concentrating on the content
we often gravitate towards designing the menus
and...
S O U R C E : S U P P O R T. B A L S A M I Q . C O M / C U S T O M E R / P O R TA L / A R T I C L E S / 8 7 1 9 0 2 - C R ...
“ 8 M A R C H R A L LY D H A K A 5 5 ” B Y S O M A N I S L I C E N S E D U N D E R C C B Y 2 . 5
S PA R K E D A C O N T E ...
– M A R K B O U LT O N
“You can create good experiences
without knowing the content. What you can’t
do is create good expe...
2 0 1 2
T H E Y E A R O F “ C O N T E N T F I R S T ”
… A S W E T R I E D T O I M P L E M E N T T H E S E :
“ H A P P Y H A P P Y J O Y J O Y ” B Y S E A N D R E I L I N G E R
I S L I C E N S E D U N D E R C C B Y- N C - S A 2 . 0...
T H I S I S N E V E R G O N N A W O R K
• “Content First” for RWD = Great idea
• But…
• Content is HARD
• Content takes ti...
– S A R A WA C H T E R B O E T T C H E R
“There’s a place between having the content and
not having the content that’s rea...
S T R U C T U R E D C O N T E N T
I S Y O U R F R I E N D
C O N T E N T S T R A T E G Y S E C R E T F O R D E S I G N E R ...
W H AT A R E
PA G E TA B L E S ?
Page tables tell you,“the
content objective, key
messages, specific content
recommendatio...
W H AT T H E Y ’ R E
G O O D F O R
• Designing CMS templates
• Developing taxonomies
• Documenting content needs
& governa...
PA G E TA B L E S
• Title
• Purpose
• Audience
• Elements
• CTA
• Adaptive Content
• Assets
• Related Content
PA G E TA B L E S M I G H T A L S O H AV E :
• Author Guidelines
• Metadata
• Browser title
• Friendly URL/ slug
• Represe...
“Content models appear to be the
black sheep
of information architecture”
- C L E V E G I B B O N
C O N T E N T M O D E L S : G E T T I N G S TA R T E D
• Goal: Define Content Types, Content Elements &
relationships
• In...
S A M P L E C O N T E N T M O D E L
S O U R C E : H T T P : / / A L I S TA PA R T. C O M / A R T I C L E / S T R AT E G I ...
O U R P R O C E S S
• Phase 1: Strategy & User Research - includes project
objectives, competitive research, User Modeling...
– K R I S T I N A H A LV O R S O N
“Call it whatever you want, just make sure
somebody’s doing it.”
R E S O U R C E S
!
• Content Modeling Workshop by Rachel Lovinger & Cleve Gibbon: http://www.slideshare.net/
rlovinger/co...
T H R E E C H E E R S F O R C O N T E N T !
F E E D B A C K + G R E E T I N G S :
@JennyLMagic
jenny@sitegoals.com
S L I D...
Upcoming SlideShare
Loading in …5
×

Making Peace: Resolving the Content/ UX Tug-of-War in Responsive Web Design

10,587 views

Published on

MoDevUX 2014: 30-minute session on "Content First" approach to responsive web design. Introduction to page tables and content models for UX professionals.

Published in: Design, Technology

Making Peace: Resolving the Content/ UX Tug-of-War in Responsive Web Design

  1. “ T U G O F WA R ” B Y J P H I L I P S O N I S L I C E N S E D U N D E R C C B Y- N C - N D 2 . 0 R E S O LV I N G T H E C O N T E N T / U X T U G - O F - WA R I N R E S P O N S I V E W E B D E S I G N M A K I N G P E A C E : @ J E N N Y L M A G I C # M O D E V U X S L I D E S : S I T E G O A L S . C O M / M O D E V U X
  2. W E ’ V E G O T A P R O B L E M M O B I L E U S E R S WA N T I T A L L
  3. People’s Web Report T O P P R I O R I T I E S F O R M O B I L E W E B : # 1 S P E E D ( 4 1 % ) # 2 C O N S I S T E N C Y ( 3 3 % ) # 3 S E C U R I T Y ( 1 6 % ) # 4 P E R S O N A L I Z AT I O N ( 8 % ) S O U R C E : N E T B I S C U I T S P E O P L E ’ S W E B R E P O R T 2 0 1 3
  4. C A N ’ T W E A L L J U S T G E T A L O N G ? C O N T E N T V S . U X “ T H I S WA S A T I M E LY C A P T U R E ” B Y P E R E T Z PA R T E N S K Y I S L I C E N S E D U N D E R C C B Y- S A 2 . 0
  5. D E S I G N C O N T E N T
  6. “ B E H I N D W H I C H D O O R ” B Y M A R C FA L A R D E A U I S L I C E N S E D U N D E R C C B Y 2 . 0
  7. I F Y O U J U S T H A D T H E C O N T E N T ? ” “ H O W M A N Y P R O J E C T S C O U L D Y O U L A U N C H T O D A Y …
  8. “ C RY I N G ” B Y M E M E K O D E I S L I C E N S E D U N D E R C C B Y 2 . 0
  9. “ G O O G L E E A R T H : 4 0 5 & 6 0 5 & 2 2 F W Y S ” B Y L U X U RY L U K E I S L I C E N S E D U N D E R C C B Y- N C - N D 2 . 0 I N T E R E S T I N G T H I N G S H A P P E N AT T H E I N T E R S E C T I O N S
  10. S O U R C E : D E V I S E C O N S U LT I N G “ D E F I N I N G U X ” DESIGNFOCUSED
  11. W E ’ R E A L L S T I L L E X P E R I M E N T I N G “ A F T E R N O O N B R E W I N G ” B Y C O U N T E R C U LT U R E C O F F E E I S L I C E N S E D U N D E R C C B Y- N C - N D 2 . 0 )
  12. O B L I G AT O RY R W D I M A G E S O U R C E : G O O G L E S E A R C H “ R E S P O N S I V E W E B D E S I G N ” 5 / 1 3 / 1 4
  13. T H E O N LY T H I N G C O N S TA N T I S T H E C O N T E N T. R E S P O N S I V E W E B D E S I G N B Y M R A F I Z E L D I I S L I C E N S E D U N D E R C C B Y- S A 3 . 0
  14. “ I B E L I E V E 2 0 1 2 W I L L B E T H E Y E A R W H E N W E F I N A L LY R E A L I Z E T H AT P L A N N I N G F O R G R E AT C O N T E N T M E A N S T H AT T H E F I R S T D E S I G N I S O F T E N T H E F I N A L D E S I G N , K E E P I N G E F F O R T S U N D E R B U D G E T, O N S C H E D U L E , A N D F O C U S E D O N C O N V E R S I O N . ” J E N N Y M A G I C : S O U R C E : H T T P : / / C O N T E N T M A R K E T I N G I N S T I T U T E . C O M / 2 0 1 1 / 1 2 / C M I - 2 0 1 2 - P R E D I C T I O N S /
  15. – S T E P H E N H AY “Structured content is the starting point for the Responsive Web Design workflow." S T E P H E N H AY | R E S P O N S I V E D E S I G N W O R K F L O W | M O B I L I S M 2 0 1 2
  16. “ C O N T E N T F I R S T ” - W H O ’ S W I T H M E ? “ T E A C H E R I N C L A S S R O O M ” B Y A U D I O L U C I S T O R E I S L I C E N S E D U N D E R C C B Y 2 . 0
  17. S O U R C E : S U P P O R T. B A L S A M I Q . C O M / C U S T O M E R / P O R TA L / A R T I C L E S / 8 7 1 9 0 2 - C R E AT I N G - Y O U R - F I R S T- M O C K U P L O R E M I P S U M S T R I K E S A G A I N
  18. Beard bicycle rights, farm-to-table bitters polaroid sustainable Intelligentsia swag High Life leggings. Direct trade small batch dreamcatcher, flannel sartorial banh mi single-origin coffee. Polaroid stumptown aesthetic wayfarers hella. literally lo-fi, 8-bit readymade scenester. Kickstarter, art party next level you probably haven't heard of them authentic typewriter. H I P S T E R I P S U M O U R FA I R S H A R E O F H I P S T E R S ! L O V E S F B Y C M I C H E L 6 7 I S L I C E N S E D U N D E R C C B Y 2 . 0
  19. S O U R C E : B L O K K F O N T. C O M
  20. C O N T E N T I S O F T E N S T U C K H E R E … W H E N I T R E A L LY S H O U L D B E H E R E “ S L I P - N - S L I D E Q U E U E ” B Y S E A N D R E I L I N G E R I S L I C E N S E D U N D E R C C B Y- N C - S A 2 . 0
  21. P O S T- WAT E R FA L L W O R L D W E ’ R E D E S I G N I N G I N T H E “ T H E WAT E R FA L L ” B Y P U T H O O R _ P H O T O I S L I C E N S E D U N D E R C C B Y- N C 2 . 0
  22. – J E R E M Y K E I T H “When we should be concentrating on the content we often gravitate towards designing the menus and navigation first.” S O U R C E : H T T P : / / A D A C T I O . C O M / J O U R N A L / 4 5 2 3 /
  23. S O U R C E : S U P P O R T. B A L S A M I Q . C O M / C U S T O M E R / P O R TA L / A R T I C L E S / 8 7 1 9 0 2 - C R E AT I N G - Y O U R - F I R S T- M O C K U P
  24. “ 8 M A R C H R A L LY D H A K A 5 5 ” B Y S O M A N I S L I C E N S E D U N D E R C C B Y 2 . 5 S PA R K E D A C O N T E N T P R O T E S T
  25. – M A R K B O U LT O N “You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure.” S O U R C E : M A R K B O U LT O N . C O . U K / J O U R N A L / S T R U C T U R E - F I R S T- C O N T E N T- A LWAY S
  26. 2 0 1 2 T H E Y E A R O F “ C O N T E N T F I R S T ”
  27. … A S W E T R I E D T O I M P L E M E N T T H E S E :
  28. “ H A P P Y H A P P Y J O Y J O Y ” B Y S E A N D R E I L I N G E R I S L I C E N S E D U N D E R C C B Y- N C - S A 2 . 0 “ E X U B E R A N T M A N N E Q U I N ” B Y A S C H E R E R I S L I C E N S E D U N D E R C C B Y- N C - N D 2 . 0 “ W H AT A M O M E N T O F J O Y ! ” B Y M O L LY S A B O U R I N I S L I C E N S E D U N D E R C C B Y- N C 2 . 0 N O T H I N G C O U L D M A K E M E H A P P I E R
  29. T H I S I S N E V E R G O N N A W O R K • “Content First” for RWD = Great idea • But… • Content is HARD • Content takes time • Content relies heavily on [unreliable] clients • Content is not my job!
  30. – S A R A WA C H T E R B O E T T C H E R “There’s a place between having the content and not having the content that’s really useful.” S O U R C E : C O N V E R S AT I O N W I T H J E N N Y M A G I C M AY 2 0 1 4
  31. S T R U C T U R E D C O N T E N T I S Y O U R F R I E N D C O N T E N T S T R A T E G Y S E C R E T F O R D E S I G N E R S :
  32. W H AT A R E PA G E TA B L E S ? Page tables tell you,“the content objective, key messages, specific content recommendations, source content quality, and requirements for how to create and maintain the content.” C O N T E N T S T R AT E G Y F O R T H E W E B : C O N T E N T S T R AT E G Y. C O M
  33. W H AT T H E Y ’ R E G O O D F O R • Designing CMS templates • Developing taxonomies • Documenting content needs & governance • Instructing content authors • ALSO (this is a big one: COMMUNICATING WITH THE DESIGN TEAM! “ D I A L O F O R O P E R AT O R ” B Y M A R K G R E G O RY I S L I C E N S E D U N D E R C C B Y- N C - S A 2 . 0
  34. PA G E TA B L E S • Title • Purpose • Audience • Elements • CTA • Adaptive Content • Assets • Related Content
  35. PA G E TA B L E S M I G H T A L S O H AV E : • Author Guidelines • Metadata • Browser title • Friendly URL/ slug • Representative content • Related or Sidebar content • Support implications: updated how often, etc. • Technical considerations: maps developed, etc.
  36. “Content models appear to be the black sheep of information architecture” - C L E V E G I B B O N
  37. C O N T E N T M O D E L S : G E T T I N G S TA R T E D • Goal: Define Content Types, Content Elements & relationships • Inventory your content • Look for patterns • Granularity can be a trap… • …but divide similar content with different purposes
  38. S A M P L E C O N T E N T M O D E L S O U R C E : H T T P : / / A L I S TA PA R T. C O M / A R T I C L E / S T R AT E G I C - C O N T E N T- M A N A G E M E N T
  39. O U R P R O C E S S • Phase 1: Strategy & User Research - includes project objectives, competitive research, User Modeling and Goals • Phase 2: Content & IA - includes Content Audit, Content Modeling, Sitemap, Page Tables & Adaptive Plan. • Phase 3: User Experience & User Interface Design - includes page geography, ID, wireframes, user testing, comps • Phase 4: Development • Phase 5: Launch
  40. – K R I S T I N A H A LV O R S O N “Call it whatever you want, just make sure somebody’s doing it.”
  41. R E S O U R C E S ! • Content Modeling Workshop by Rachel Lovinger & Cleve Gibbon: http://www.slideshare.net/ rlovinger/content-modelling-2013lite • Content Modeling Info: http://www.clevegibbon.com/content-modeling/ • Mark Boulton on designing for “A Richer Canvas” on the web: http://www.markboulton.co.uk/journal/ a-richer-canvas • “Structure First, Content Always” Mark Boulton http://www.markboulton.co.uk/journal/structure-first- content-always • “Content Templates to the Rescue” Erin Kissane http://alistapart.com/article/content-templates-to-the- rescue • Page Tables Intro with Sample Template http://24ways.org/2011/extracting-the-content/ • Luke W’s notes on Jeffrey Zeldman’s AEA Boston Content First talk: http://www.lukew.com/ff/entry.asp?1598 • Jeffrey Zeldman’s AEA Content First talk http://vimeo.com/70977623 • Content-Driven Design Process http://thingsthatarebrown.com/blog/2010/05/toward-a-content-driven- design-process/ • Mental Modeling for Content Work: http://danieleizans.com/2012/03/mental-modeling-for-content-work- creation • Content Strategy for Mobile: http://www.abookapart.com/products/content-strategy-for-mobile • Content Everywhere: http://rosenfeldmedia.com/books/content-everywhere/ • Elements of Content Strategy: http://www.abookapart.com/products/the-elements-of-content-strategy • Content Strategy for the Web:http://contentstrategy.com/
  42. T H R E E C H E E R S F O R C O N T E N T ! F E E D B A C K + G R E E T I N G S : @JennyLMagic jenny@sitegoals.com S L I D E S + R E S O U R C E S : S I T E G O A L S . C O M / M O D E V U X

×