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

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