Responsive. Adaptive. Mobile first. Cross-channel. We all want a future that’s flexible, fluid, and unfixed from the desktop, right?
Great. Then it’s time to get to the core of the matter: the content.
Fixed firmly to inflexible pages, today’s content is too often stuck in meaningless blobs—blobs that break under the weight of responsive designs, mobile sites, and cross-channel distribution.
Which elements are most important? What’s primary and what’s corollary? What’s related or interdependent? What stays, what goes, and what gets truncated on small screens?
When we can answer these questions—and structure our content accordingly—we’ll replace those messy blobs with content that bends, shifting and reshaping to fit varied displays and devices.
5. From Brad Frost, “This is the Web”
#MWUX12 | 06.01.2012
@sara_ann_marie
6. 1 in 2 Americans owns a smartphone,
up from 1 in 3 in 2011.
Pew 2012 Update
#MWUX12 | 06.01.2012
@sara_ann_marie
7. Mobile internet usage is expected to
overtake desktop by 2014.
comScore
#MWUX12 | 06.01.2012
@sara_ann_marie
8. From Brad Frost, “This is the Web”
#MWUX12 | 06.01.2012
@sara_ann_marie
9. What does
the future mean
for IA?
#MWUX12 | 06.01.2012
@sara_ann_marie
10. We’ve done hierarchy.
Home
Main Main Main Main Main
Sub Sub Sub Sub Sub
Sub Sub Sub Sub Sub
Sub Sub Sub Sub Sub
Sub Sub Sub Sub Sub
Detail
Main Detail
Main Detail
Main
Main Main Main
#MWUX12 | 06.01.2012
@sara_ann_marie
21. Writers enter content
into the CMS once
It’s stored without
presentational code
Then sent via API
Editors approve to NPR and 3rd
and double- parties
check metadata
#MWUX12 | 06.01.2012
@sara_ann_marie
46. ✦ Not just hierarchical, but relational
Links to
Related
Links to Feature Links to
Business Author Bio
Related Article Related
Tagged
by
Tagged
by
Landmark Tagged
by
City Links to
Related
Tagged Tagged Blog Post
by by
Links to
Related
Related
to
Deal Event
#MWUX12 | 06.01.2012
@sara_ann_marie
47. ✦ Not big blobs, but elements
#MWUX12 | 06.01.2012
@sara_ann_marie
48. Local
| attractio
ns
&
Lo cal parks
| m onumen
ts
n
Events i
| Flags taff
Feature
Stories | | Local
deals
49. Flexible content
needs to have
structure.
#MWUX12 | 06.01.2012
@sara_ann_marie
64. Small screens
Strange new screens
Load time concerns
Save for later
Reader view
#MWUX12 | 06.01.2012
@sara_ann_marie
65. As the bells and whistles
disappear, what’s left?
#MWUX12 | 06.01.2012
@sara_ann_marie
66. “Those who don’t design for readers
might soon not be designing for anyone.”
- Jeffrey Zeldman
#MWUX12 | 06.01.2012
@sara_ann_marie
67. We need to focus
so our users can, too.
#MWUX12 | 06.01.2012
@sara_ann_marie
68. ✦ PURPOSE
What’s the content supposed to accomplish?
✦ MESSAGE
What’s it saying? How is it saying it?
✦ RELATIONSHIPS
What other content is conceptually connected?
✦ PRIORITIES
How important is it for the business? The user?
#MWUX12 | 06.01.2012
@sara_ann_marie
69. ✦ GET CLOSER TO CONTENT
✦ GO FROM PAGES TO PARTS
✦ RULE THE ROBOTS
#MWUX12 | 06.01.2012
@sara_ann_marie
70. “Permanently placing content on a web
page...is becoming a thing of the past.”
- Trent Walton
#MWUX12 | 06.01.2012
@sara_ann_marie
87. But before you build structure,
you need meaning.
#MWUX12 | 06.01.2012
@sara_ann_marie
88. ✦ PURPOSE
Does each element contribute toward a goal?
✦ MESSAGE
How does each element communicate meaning?
✦ RELATIONSHIPS
What’s the relationship between content elements?
✦ PRIORITIES
Which elements are most important? Why?
#MWUX12 | 06.01.2012
@sara_ann_marie
89. Then you
put the pieces
together.
#MWUX12 | 06.01.2012
@sara_ann_marie
90. don’t have
Yo u e t h is
to mak
#MWUX12 | 06.01.2012
@sara_ann_marie
91. jus t
Maybe hese
Content Item
o ne of t Content Item
Attributes: Attributes:
⁃ Title ⁃ Title
⁃ Date Relation ⁃ Date
⁃ Author -ship ⁃ Location
⁃ Abstract ⁃ Teaser
⁃ Detailed ⁃ Detailed
Content Content
Content Item
Relation Attributes:
-ship ⁃ Title
⁃ Date Relation
⁃ Author -ship
⁃ Abstract
⁃ Detailed
Content Item Content
Attributes:
⁃ Title Relation
Relation -ship
⁃ Address
-ship
⁃ Short
Description
Content Item
Attributes:
⁃ Title
Relation ⁃ Date
-ship ⁃ Author
⁃ Abstract
⁃ Detailed
Content
#MWUX12 | 06.01.2012
@sara_ann_marie
92. And then you’re gonna have to
talk to the developers. A lot.
#MWUX12 | 06.01.2012
@sara_ann_marie
93. ✦ GET CLOSER TO CONTENT
✦ GO FROM PAGES TO PARTS
✦ RULE THE ROBOTS
#MWUX12 | 06.01.2012
@sara_ann_marie
94. “Adaptive web pages are cooked up from
relevant content chunks and ingredients,
using the special sauce of metadata.”
- Lyza Danger Gardner
#MWUX12 | 06.01.2012
@sara_ann_marie
95. We can’t manually manage
how each bit of content looks.
#MWUX12 | 06.01.2012
@sara_ann_marie
96. But when we have structure,
we can make rules.
#MWUX12 | 06.01.2012
@sara_ann_marie
99. f resizing for
I
all screens... low the
sm t hen ref
ews m o dules.
n
100. If the page is
ears...
a bo ut black b
ck bear
en pul l in bla
th news...
vi d eos and
bitats
and show ha ck
to bla
relate d
bears.
101. ontent
If we make c arties...
t h ir d p
access ible to
titles,
inclu de
the n only , links,
ad par agrap hs
le a in t h e API.
and m etadat
102. Better content knowledge
v
|
More meaningful parts
v
|
Rules that best reflect human choices
#MWUX12 | 06.01.2012
@sara_ann_marie
103. Robots aren’t human,
but our content
must be.
#MWUX12 | 06.01.2012
@sara_ann_marie
104. :
ing a bo ok
ss t! I ’m writ ere f ro
m
P wh
t Ever y
Conten Me d ia.
eld
Rosenf
Thank you, Midwest UX!
sarawb.com // @sara_ann_marie
Photo Credits ✦ PB Spoon from http://www.flickr.com/photos/certified_su/234726096/
✦ Swaying Trees from http://www.flickr.com/photos/bala_/1282565897/ ✦ Flagstaff photos courtesy Arizona Office of Tourism
✦ Future by Morimoto from http://50watts.com/2483236/Space-Teriyaki-3 ✦ Deflated balloons from http://www.flickr.com/photos/silverfuture/
✦ Storm from http://www.flickr.com/photos/mikebaird/4084235781/ 6799133336/ and http://www.flickr.com/photos/silverfuture/5432635206/
✦ Faucet from http://www.flickr.com/photos/briangaid/2909765394/
✦ Polar Bear from http://www.flickr.com/photos/davidw/2132684141
✦ PB Toast from http://www.flickr.com/photos/luzbonita/2558151303/
✦ Button from http://www.flickr.com/photos/jamescridland/2271986251
✦ Girl with PBJ from http://www.flickr.com/photos/judybaxter/59996764
✦ Robot from http://www.flickr.com/photos/johngreenaway/3356358479/