Are you trying to make responsive design scale for a complex site? Building an app, but your organization doesn't have an API yet? If so, you've probably got legacy content—content that already exists, and that doesn't fit neatly into your new project. What do you do? You could ignore it and end up with one of those responsive homepages that devolve into big content blobs after just one tap, or a one-off mobile site that no one can remember to maintain. You could put it off until it becomes the bane of your existence: the thing that "breaks" your design, because it's way messier than you’ve planned for. Or, you could deal with it.

1. what you don’t
know will hurt youDESIGNING WITH & FOR EXISTING
CONTENT
sara wachter-
boettcher
mobilism 2013
amsterdam
www.flickr.com/photos/gcfairch/4385543669/

2. we sure
are eager
MOBILE

3. FIRST
www.flickr.com/photos/islaclairvaux/3457249348

4. free app!?

5. I’ve been there, too.

6. beneath
what lies
www.123rf.com

7. is this it?
www.flickr.com/photos/cedwardmoran/3649399678

8. What are we doing about it?

9. same old
same old
Mad Men / AMC

10. or, we
get out
Robert Libetti / Business Insider

11. Time for some hard truths.

12. ‘‘Making something look simple is
easy; making something simple to
use is much harder—especially when
the underlying systems are complex
—but that’s what we should be doing.
Design Principle #4,
UK Government Digital Service

14. this is simple

15. www.flickr.com/photos/kzirkel/8161123197/
this is not

16. nor is this

17. and definitely
not this

18. Complex topics
Changing laws
Years of additions
Endless modifications
Aging platforms

19. media queries?
toss on some
www.123rf.com

20. What we really need is some
structure.

21. Trim, compact writing
Modular content
Logically broken into parts
Clearly labeled
Cleanly stored

22. This is foundational.

23. But it doesn’t just happen.

24. ‘‘Structuring content requires synthesizing a
swath of sources, designing usable systems,
changing organizations, training personnel,
soothing egos, adjusting priorities, allaying
fears, reallocating resources... This is big
“S” strategy.
Rachel Lovinger,
“Strategy on the Inside”

25. it takes time
www.flickr.com/photos/snappa2006/2770979727

26. If you want to get inside an
organization, get inside its content.

27. Location Section Subsection
Sub-
subsection Page Name IA Notes Content Notes Update Plan
HC
Pr
http://calexport.fas.harvard.edu/cgi-bin/calendar/exporter.cgi?view=monthviewcal=117046template_url=http%3A%2F%2Fwww.admissions.college.harvard.edu%2Fvisit%2Fcalendar.htmlAdmissions Visit Harvard Visitor's Center Calendar: Tours Information SessionsVisitor's Center Calendar: Tours Information SessionsCurrently this is offsite; should this be integrated into the College site?Calendar for when visits are happening. Keep Hig
http://www.college.harvard.edu/icb/icb.do?keyword=k61161tabgroupid=icb.tabgroup84423College Academics Academics Most subpages go offsite, except for academic requirements. But should that be the case? Seems like someLong, multiparagraph page of content without a clear purpose. NeeKeep Hig
http://college.harvard.edu/icb/icb.doCollege College Homepage - Page doesn't have much content unique to it. Is primarily a feed ofKeep Hig
http://events.college.harvard.edu/Events Events Events Calendar Will this be part of our build? Current design is completely different from the rest of the site and ; doesn't seeIndividual events include attributes for: Event Name, Start Time/DatKeep Hig
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270690Freshman Seminars About the Program Director's WelcomeDirector's Welcome Completely different design and nav than College site. Pull into main College IA?Content is fine as is, but not that useful. Could likely be consolidateMerge Low
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270693Freshman Seminars About the Program In the News In the News Completely different design and nav than College site. Pull into main College IA?Content is out of date (posts are about professors' research makingDelete Mid
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270691Freshman Seminars Contact Us Contact Us Completely different design and nav than College site. Pull into main College IA?Content is straightforward and page is simple.Keep Low
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page298788Freshman Seminars For Faculty Committee For Faculty Committee Completely different design and nav than College site. Pull into main College IA?Content is straightforward and page is simple.Keep Low
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup94471Freshman Seminars For Faculty For Faculty Completely different design and nav than College site. Pull into main College IA?Content is written like a letter, signed by the program director. DoesKeep Low
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page506998Freshman Seminars For Freshmen Student and Faculty FeedbackStudent and Faculty FeedbackCompletely different design and nav than College site. Pull into main College IA?Content seems to be formatted with a different font and custom layoSplit - create modules Mid
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup86241Freshman Seminars For Freshmen Apply to Seminars Apply to Seminars - Duplicates http://freshmanseminars.college.harvard.edu/icb/icb.do?Merge with other ApplicatioMid
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page295201Freshman Seminars For Faculty Propose a SeminarPropose a Seminar Completely different design and nav than College site. Pull into main College IA?Info on how to propose a seminar, eligibility, etc. Would be nice if coKeep Low
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270197Freshman Seminars For Faculty Helpful Information for InstructorsHelpful Information for InstructorsCompletely different design and nav than College site. Pull into main College IA?Links to offsite resources and downloadable formsKeep Low
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page477858Freshman Seminars Seminars Seminar Changes/CancellationsSeminar Changes/CancellationsCompletely different design and nav than College site. Pull into main College IA?Lists cancelled seminars. Keep Low
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270199Freshman Seminars For Faculty Review ApplicationsReview Applications Completely different design and nav than College site. Pull into main College IA?Naming of page seems strange since it's not where you review appRename Low
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup145480Freshman Seminars About the Program About the Program Completely different design and nav than College site. Pull into main College IA?Not a lot of content about the program—seems to mostly talk aboKeep Mid
http://freshmanseminars.college.harvard.edu/icb/icb.doFreshman Seminars Freshman Seminars Completely different design and nav than College site. Pull into main College IA?Overview content and video are very helpful - tone of copy could beKeep Hig
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup86240Freshman Seminars Seminars Application InformationApplication Information Completely different design and nav than College site. Pull into main College IA?Page has a lot of content, but the apply button is prominent, whichKeep Mid
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup99155Freshman Seminars For Freshmen For Freshmen Completely different design and nav than College site. Pull into main College IA?Page has a video and download at the top that are quite large. CopKeep Mid
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup138909Freshman Seminars Seminars Seminars Completely different design and nav than College site. Pull into main College IA?Seminar content is being pulled in from freshsem.fas.harvard.edu. CKeep Mid
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page556258Freshman Seminars Seminars Spring Meeting Times and LocationsSpring Meeting Times and LocationsCompletely different design and nav than College site. Pull into main College IA?Table of seminars and times. Keep Low
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup94173Freshman Seminars Seminars Fall Seminar Meeting Times and LocationsFall Seminar Meeting Times and LocationsCompletely different design and nav than College site. Pull into main College IA?Table of seminars and times. Keep Low
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page263169Freshman Seminars For Freshmen Freshman FAQs Freshman FAQs Completely different design and nav than College site. Pull into main College IA?Would be nice to use an FAQ module for these. Content of individuKeep Low
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270226Freshman Seminars For Faculty Faculty FAQs Faculty FAQs Completely different design and nav than College site. Pull into main College IA?Would be nice to use an FAQ module for these. Content of individuKeep Low
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page391128Wintersession Other January Programs Other January ProgramsThe other nomenclature is not very useful: Other than what?All content on this page is about trips students can join. Should theRename Low
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreaktabgroupid=icb.tabgroup151676Wintersession Campus Services Campus Services - Blank page - should have content and be a wayfinder for subpagesMerge with student serviceLow
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreaktabgroupid=icb.tabgroup151678Wintersession Campus Services Library Hours Library Hours - Blurb just says click HERE for library calendar and sends user to thMerge with student serviceLow
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page315737Wintersession Campus Services Shuttle Services Shuttle Services - Content could be streamlined and more concise, and send users toMerge with student serviceLow
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page315739Wintersession Campus Services Dining Locations and HoursDining Locations and Hours- Content could be streamlined and more concise.Merge with student serviceLow
http://wintersession.college.harvard.edu/icb/icb.doWintersession Wintersession HomepageSame design as College pages, but navigation changes completely. This site is not easily available from theContent hierarchy is strange—basic content explaining WintersessiKeep Mid
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreaktabgroupid=icb.tabgroup158438Wintersession On-Campus Housing On-Campus Housing - Content is clear and well organized. Link to https://starrez.fas.harvaKeep Low
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page385332Wintersession For Faculty For Faculty Content talks about President's January Innovation Fund, but doesKeep Low
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreaktabgroupid=icb.tabgroup158475Wintersession 2013 Wintersession Programs 2013 Wintersession ProgramsCalendar of Wintersession events seems to be pulled in from a Google calendar—is this right? Would be greLead-in content is sparse—could use some warmth.Keep Low
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page305618Wintersession Frequently Asked Questions Frequently Asked QuestionsLots of different FAQs on the site. Could these be made into structured modules and tagged to appear in FALight editing for voice/tone and clearer, more concise language.Keep Mid
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page477831Wintersession Connect with Alumni Connect with Alumni - Long page but doesn't need to be updated until next year.Keep Low
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page315736Wintersession Campus Services Library Hours Gym Hours - No content and page is set up as subpage of library.Merge with student serviceLow
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page563620Wintersession Faculty Alumni Book Talks Faculty Alumni Book Talks- No content on the page. Should pages like this exist without contenKeep Low
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreaktabgroupid=icb.tabgroup151677Wintersession 2013 Wintersession ProgramsSubmit an Activity Submit an Activity Sends user offsite to login-only Wintersession activities portalOffsite - login page Keep Low
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page478659Wintersession Harvard Travel Tools Harvard Travel Tools Unclear at first what this page is for. Copy has typos and could useKeep Low
http://admissions.college.harvard.edu/about/beyond/arts.htmlAdmissions About Harvard Beyond the ClassroomThe Arts - Content is good, but could use a tone refresh and more breakdownKeep Mid
http://admissions.college.harvard.edu/about/beyond/athletics.htmlAdmissions About Harvard Beyond the ClassroomAthletics - Content is good, direct tone, clear. Keep Mid
http://admissions.college.harvard.edu/about/beyond/research.htmlAdmissions About Harvard Beyond the ClassroomResearch - Content is high quality and broken down nicely—very clear. Could uKeep Mid
http://admissions.college.harvard.edu/about/beyond/index.htmlAdmissions About Harvard Beyond the ClassroomBeyond the Classroom - Content is lengthier than needed for a page used to drive visitors inKeep Hig
http://admissions.college.harvard.edu/about/beyond/community.htmlAdmissions About Harvard Beyond the ClassroomCommunity Outreach - Content is light and could use more specifics and details.Keep Mid
http://admissions.college.harvard.edu/about/beyond/cultural.htmlAdmissions About Harvard Beyond the ClassroomCultural Ethnic Activities.- Content is light and could use more specifics and details.Keep Mid
http://admissions.college.harvard.edu/about/beyond/politics.htmlAdmissions About Harvard Beyond the ClassroomGovernment Politics - Content is passive and impersonal but informative.Keep Mid
http://admissions.college.harvard.edu/about/beyond/studyabroad.htmlAdmissions About Harvard Beyond the ClassroomStudy Abroad - Content is passive and impersonal but informative.Keep Mid
http://admissions.college.harvard.edu/about/beyond/clubs.htmlAdmissions About Harvard Beyond the ClassroomStudent Clubs Activities- Intro content is passive and could use a refresh to be direct and enKeep Mid
http://admissions.college.harvard.edu/about/beyond/environmental.htmlAdmissions About Harvard Beyond the ClassroomSustainability. Environmental Action, and Research- Intro content is passive and could use a refresh to be direct and enKeep Mid
http://admissions.college.harvard.edu/about/beyond/rotc.htmlAdmissions About Harvard Beyond the ClassroomROTC - Intro content is passive and could use a refresh to be direct and enKeep Mid
audit
the content

28. ‘‘A mind-numbingly detailed odyssey
through your web site.
Jeffrey Veen, Adaptive Path, 2002

29. REASONS TO
GET TO KNOW
YOUR CONTENT
3

30. LESS CRAP, NOT
SHOEHORNED CRAP
1

31. FROM
70k
TO3kPAGES

32. WHAT DO YOU HAVE?
✦ Quantity
✦ Location
✦ Topics

33. DOES IT FIT YOUR STRATEGY?
✦ Useful for users
✦ Drives business goals
✦ Supports your brand

34. IS IT ANY GOOD?
✦ Up to date
✦ Well written
✦ Organized
✦ Accessible

35. outdated
redundant
trivial
www.flickr.com/photos/stevendepolo/5190591885

36. meaningless
www.flickr.com/photos/atomicjeep/22208897/

37. the win:SHORT-TERM
Designing for—and supporting—only
what actually matters means less time
on content migration.
(Oh, and less crap for users, too.)

38. This opens up conversations about
priorities, roles, and responsibilities
before launch.
the win:LONG-TERM

39. 2REPRESENTATIVE
CONTENT

40. ‘‘Design without content is designing with
your eyes closed.
Stephen Hay, Yesterday Morning

41. infinite
designers?

42. so...which
content?
www.flickr.com/photos/tdd/4493216417

43. representative
www.flickr.com/photos/28478778@N05/5728474385/
content

44. Representative content
is a set that includes one example of
each content type you need to support.

47. CONTENT TYPES
✦ Based on patterns in content’s
shape, purpose, and “chunks.”
✦ Categorize like content (like
services, bios, people, events).
✦ Can be more or less granular,
depending on your scope.

48. CONTENT REQUIREMENTS
✦ Define which attributes a content
type needs.
✦ Set formats, character limits, and
optional fields.
✦ Define what you’ll have to work
with—and design for.

49. Content maps logically to templates
and pattern libraries, rather than
rotting in generic pages.
the win:SHORT-TERM

50. When every content type has a
purpose, you’re less likely to end up
with stuff you don’t need.
the win:LONG-TERM

51. RELY ON SYSTEMS,
NOT JUST PAGES
3

52. ‘‘Fitting a complex, multi-level navigation
onto small screens is difficult no matter
what way you slice it.
Brad Frost, “Complex Navigation Patterns for
Responsive Design”

55. Structured content can help you.

56. more interconnection,
less nav

57. CONTENT MODEL
✦ Defines a system of content.
✦ Establishes relationships between
content types.
✦ Defines shared attributes.

58. METADATA
✦ Provides additional information
about content (topic; author date).
✦ Can be exposed, but the real
magic is behind the scenes.

59. RULE-BASED LAYOUTS
✦ Rules use metadata to decide how
and where to display content.
✦ Can control combinations of
content modules, related items,
excerpts, and prioritization.

61. Allows for faceted
search.

62. Makes related content
actually relevant.

63. Content is easier to access in range
of natural, useful ways—without
having to lay out every damn page.
the win:SHORT-TERM

64. When content is a system that supports
the business, it’s not tied to just one
destination. People collaborate—rather
than post whatever, wherever.
the win:LONG-TERM

65. selfish
let’s get
www.flickr.com/photos/clanlife/4948367381

66. www.flickr.com/photos/pedrosimoes7/190673196/
hard, right?
you work

67. this looks
nothing like the
comps!

68. Don’t let broken content
break you.

69. look,
really look

70. www.123rf.com
relying on us
they’re all

71. thank you,
MOBILISM
Flickr images used via CC-Attribution license unless otherwise noted.
sarawb.com
@sara_ann_marie
rfld.me/content-everywhere