Upload
sitegoals
View
7.109
Download
2
Embed Size (px)
DESCRIPTION
MoDevUX 2014: 30-minute session on "Content First" approach to responsive web design. Introduction to page tables and content models for UX professionals.
Citation preview
“ T U G O F W A 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
W E ’ V E G O T A P R O B L E MM O B I L E U S E R S W A 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 ( 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
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 W A 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
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 R Y 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 R Y 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
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 ”
DES
IGN
FO
CU
SED
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 )
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
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
“ 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 /
– 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
“ 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
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
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
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 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
P O S T- W AT E R FA L L W O R L DW E ’ R E D E S I G N I N G I N T H E
“ T H E W AT 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
– 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 /
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
“ 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
– 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 LW AY S
2 0 1 2T 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
“ 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
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!
– S A R A W A 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
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 :
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
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 R Y 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
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
• Representative content
• Related or Sidebar content
• Support implications: updated how often, etc.
• Technical considerations: maps developed, etc.
“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
• Inventory your content
• Look for patterns
• Granularity can be a trap…
• …but divide similar content with different purposes
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
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
– 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/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/
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
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