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

“ 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

[email protected]

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