The document discusses the evolving landscape of web content and the need for content-focused information architecture (IA) to adapt to mobile-first, multi-device environments. It emphasizes the importance of creating flexible, structured content that can be easily republished across different platforms. The author advocates for a shift from traditional hierarchical content structures to a more dynamic approach that prioritizes relationships, meaning, and user experience.

1. Sara Wachter-Boettcher
Midwest UX 2012
Building
Bendable
Content
Why the future web
needs content-
focused IA

2. Our
responsive
adaptive
mobile-first
cross-channel
multi-device
super-awesome
future

3. Our
responsive
adaptive
mobile-first
cross-channel
multi-device
super-awesome
future

4. Why?
#MWUX12 | 06.01.2012
@sara_ann_marie

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

11. We’ve audited pages.
#MWUX12 | 06.01.2012
@sara_ann_marie

12. We get templates.
Data Library | News & Events | International
Search
GPEC Logo
Doing Business Here Key Industries Living Here Communities Membership About Us
Home > GPEC Communities > Avondale
GPEC Communities
Maricopa County
> Apache Junction Avondale
Avondale
Buckeye
Casa Grande
Chandler
Fountain Hills
Gila Bend
Gilbert
Glendale
Goodyear
Maricopa
Mesa
Peoria Avondale is located along the Interstate 10 corridor and
Phoenix Top Employers
just a 15-minute commute from the heart of Phoenix,
Queen Creek Employer
nestled at the base of the scenic Estrella Mountains
Scottsdale Employer
where the Agua Fria and Gila rivers meet.
Surprise Employer
Tempe Employer
The quality of life and the variety of cultural, economic,
Tolleson Employer
geographic and educational advantages in the area
Wickenburg provides a progressive atmosphere rich in resources and
Related Downloads
opportunity.
Download
Download
Avondale is the proud home of Phoenix International
CONNECT WITH GPEC Download
Raceway, which sponsors two NASCAR events a year.
Avondale also plays host to regional basketball, volleyball
602.256.7700
and soccer tournaments at its parks and American Sports
Photo Gallery
Center - Avondale, a new state of the art indoor
EMAIL US
recreational sports facility located at the heart of our
planned Avondale City Center.
INITIATE A PROJECT
Natural beauty including mountains and wetlands – less
than six miles from our city core – provide an opportunity
for residents and visitors alike to experience nature and
wildlife and all the at the great outdoors has to offer.
Sign up for GPEC News
First Name
Last Name
Email Address
SIGN UP
EXPANDED FOOTER NAV (PER HOME COMP)
Sitemap | Terms of Use | E-Track Login | Initiate a Project | FAQ | Member Directory | Careers | Press Room
2 N. Central Ave., Suite 2500, Phoenix, AZ 85004 | Phone: 602.256.7700 | Fax: 602.256.7744 © 2011 Greater Phoenix Economic Council. All Rights Reserved
GPEC - Avondale 4.1
#MWUX12 | 06.01.2012
@sara_ann_marie

13. This won’t
hold up.

14. We need IA
that gets at
the core.
#MWUX12 | 06.01.2012
@sara_ann_marie

15. The content
#MWUX12 | 06.01.2012
@sara_ann_marie

16. Content that’s unfixed from the desktop.
#MWUX12 | 06.01.2012
@sara_ann_marie

17. Content that’s ready for new devices.
#MWUX12 | 06.01.2012
@sara_ann_marie

18. Content that’s portable to future platforms.
#MWUX12 | 06.01.2012
@sara_ann_marie

19. Content like
water
#MWUX12 | 06.01.2012
@sara_ann_marie

20. COPE: Create Once,
Publish Everywhere.
#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

22. #MWUX12 | 06.01.2012
@sara_ann_marie

23. But.
#MWUX12 | 06.01.2012
@sara_ann_marie

24. Content is
chunky.
#MWUX12 | 06.01.2012
@sara_ann_marie

25. Chunky
is good. #MWUX12 | 06.01.2012
@sara_ann_marie

26. Chunky
gets stuck.

27. 2009: I learned this
the hard way.
#MWUX12 | 06.01.2012
@sara_ann_marie

29. Later that year...
#MWUX12 | 06.01.2012
@sara_ann_marie

32. Wait a second.
#MWUX12 | 06.01.2012
@sara_ann_marie

33. Soaring peaks
#WVpdx | 05.18.2012
@sara_ann_marie

34. Historic charm
#WVpdx | 05.18.2012
@sara_ann_marie

35. Americana galore
#WVpdx | 05.18.2012
@sara_ann_marie

36. Trip ideas

37. I want to go there.
#MWUX12 | 06.01.2012
@sara_ann_marie

38. Not so much

39. #WVpdx | 05.18.2012
@sara_ann_marie

40. 2010: We’ve gotta
go mobile.
#MWUX12 | 06.01.2012
@sara_ann_marie

41. #MWUX12 | 06.01.2012
@sara_ann_marie

42. There’s only one
restaurant in town?
#MWUX12 | 06.01.2012
@sara_ann_marie

43. This will fix
everything!
#MWUX12 | 06.01.2012
@sara_ann_marie

44. #WVpdx | 05.18.2012
@sara_ann_marie

45. 2011: Fixing (part of)
the problem.
#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

50. This is a
content
problem
#MWUX12 | 06.01.2012
@sara_ann_marie

51. This is a
ux
problem
#MWUX12 | 06.01.2012
@sara_ann_marie

52. This is a
solvable
problem
#MWUX12 | 06.01.2012
@sara_ann_marie

53. It’s IA,
brought to the
micro level.
#MWUX12 | 06.01.2012
@sara_ann_marie

54. Say
what?

55. “The structural design of shared
information environments.”
– Morville & Rosenfeld
#MWUX12 | 06.01.2012
@sara_ann_marie

56. “The art and science of organizing and
labeling websites...to support usability.”
- IA Institute
#MWUX12 | 06.01.2012
@sara_ann_marie

57. Same skills, new challenge.
#MWUX12 | 06.01.2012
@sara_ann_marie

58. 3 steps toward
more bendable
content.
#MWUX12 | 06.01.2012
@sara_ann_marie

59. ✦ GET CLOSER TO CONTENT
✦ GO FROM PAGES TO PARTS
✦ RULE THE ROBOTS
#MWUX12 | 06.01.2012
@sara_ann_marie

60. ✦ GET CLOSER TO CONTENT
✦ GO FROM PAGES TO PARTS
✦ RULE THE ROBOTS
#MWUX12 | 06.01.2012
@sara_ann_marie

61. “We are all content strategists now.”
- Karen McGrane
#MWUX12 | 06.01.2012
@sara_ann_marie

62. Interaction
isn’t everything

63. Substance.
#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

77. FINALLY!

82. asn’t
W hy w tent
tha t con
up h ere?
back

83. Content Stacking vs. Interdigitation
From Trent Walton, “Content Choreography”
#MWUX12 | 06.01.2012
@sara_ann_marie

84. Before content can shift,
it needs structure.
#MWUX12 | 06.01.2012
@sara_ann_marie

85. m uc h
Can’t do
w it h t h is
#MWUX12 | 06.01.2012
@sara_ann_marie

86. , opt ions!
Hello
#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

97. Robots like
rules.

98. P -> Q
#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/