MoDevUX 2014: 30-minute session on "Content First" approach to responsive web design. Introduction to page tables and content models for UX professionals.
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
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
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
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