76
what you don’t know will hurt you DESIGNING WITH & FOR EXISTING CONTENT sara wachter- boettcher bdconf orlando 2013 www.flickr.com/photos/gcfairch/4385543669/

What you don't know will hurt you: designing with and for existing content

Embed Size (px)

DESCRIPTION

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. If you take the time to make existing content work for you—by understanding what you've got, identifying patterns and relationships in its structure, and cutting the cruft along the way—you'll end up with a system that will not just support your content, but _enhance_ its meaning, message, and power.

Citation preview

Page 1: What you don't know will hurt you: designing with and for existing content

what you don’t know will hurt youDESIGNING WITH & FOR EXISTING CONTENT

sara wachter-boettcherbdconforlando 2013

www.flickr.com/photos/gcfairch/4385543669/

Page 2: What you don't know will hurt you: designing with and for existing content

we sureare eager

MOBILE����������� ������������������  FIRSTwww.flickr.com/photos/islaclairvaux/3457249348

Page 3: What you don't know will hurt you: designing with and for existing content

gotta getimplementing

www.flickr.com/photos/dandeluca/3083945050/

Page 4: What you don't know will hurt you: designing with and for existing content

I. WHERE WE GET STUCK

Page 5: What you don't know will hurt you: designing with and for existing content

free app!?

Page 6: What you don't know will hurt you: designing with and for existing content

I’ve been there, too.

Page 8: What you don't know will hurt you: designing with and for existing content
Page 9: What you don't know will hurt you: designing with and for existing content

What are we doing about it?

Page 10: What you don't know will hurt you: designing with and for existing content

same oldsame old

Mad Men / AMC

Page 12: What you don't know will hurt you: designing with and for existing content

II. SOME HARD TRUTHS

Page 13: What you don't know will hurt you: designing with and for existing content

‘‘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

Page 14: What you don't know will hurt you: designing with and for existing content
Page 15: What you don't know will hurt you: designing with and for existing content

this is simple

Page 17: What you don't know will hurt you: designing with and for existing content

© 2012 The Common Application, Inc. AP-1 / 2012-13

2012-13 First-year ApplicationFor Spring 2013 or Fall 2013 Enrollment

APPLICANTLegal Name ___________________________________________________________________________________________________________________

Last/Family/Sur (Enter name exactly as it appears on official documents.) First/Given Middle (complete) Jr., etc.

Preferred name, if not first name (only one) ____________________________ Former last name(s) _____________________________________________

Birth Date ____________________________________________________ US Social Security Number, if any ___________________________________mm/dd/yyyy Required for US Citizens and Permanent Residents applying for financial aid via FAFSA

Preferred Telephone ! Home ! Cell Home (_______) __________________________________ Cell (_______) __________________________________Area/Country/City Code Area/Country/City Code

E-mail Address ________________________________________________ IM Address ____________________________________________________

Permanent home address __________________________________________________________________________________________________________Number & Street Apartment #

____________________________________________________________________________________________________________________________City/Town County or Parish State/Province Country ZIP/Postal Code

If different from above, please give your current mailing address for all admission correspondence. (from ___________ to ___________)(mm/dd/yyyy) (mm/dd/yyyy)

Current mailing address __________________________________________________________________________________________________________Number & Street Apartment #

____________________________________________________________________________________________________________________________City/Town County or Parish State/Province Country ZIP/Postal Code

If your current mailing address is a boarding school, include name of school here: _________________________________________________________________

FUTURE PLANSYour answers to these questions will vary for different colleges. If the online system did not ask you to answer some of the questions you see in this section, this college chose not to ask that question of its applicants.

College ________________________________________________________ Deadline ______________________________________________________mm/dd/yyyy

Entry Term: ! Fall (Jul-Dec) ! Spring (Jan-Jun)

Decision Plan___________________________________________________

Academic Interests _____________________________________________

____________________________________________________________

____________________________________________________________

Career Interest_________________________________________________

Do you intend to apply for need-based financial aid? ! Yes ! No

Do you intend to apply for merit-based scholarships? ! Yes ! No

Do you intend to be a full-time student? ! Yes ! No

Do you intend to enroll in a degree program your first year? ! Yes ! No

Do you intend to live in college housing?______________________________

What is the highest degree you intend to earn? _________________________

DEMOGRAPHICS

! Female ! Male

Citizenship Status ______________________________________________

Non-US Citizenship(s) ____________________________________________

_____________________________________________________________

_____________________________________________________________

Birthplace ________________________________________________________ City/Town State/Province Country

Years lived in the US? ____________ Years lived outside the US? ____________

Language Proficiency (Check all that apply.)S(Speak) R(Read) W(Write) F(First Language) H(Spoken at Home)

S R W F H

_______________________________________________ ! ! ! ! !_______________________________________________ ! ! ! ! !_______________________________________________ ! ! ! ! !

Optional The items with a gray background are optional. No information you provide will be used in a discriminatory manner.Religious Preference _______________________________________________

US Armed Services veteran status _____________________________________

1. Are you Hispanic/Latino?

! Yes, Hispanic or Latino (including Spain) ! No If yes, please describe your background.

____________________________________________________________

2. Regardless of your answer to the prior question, please indicate how you identify yourself. (Check one or more and describe your background.)

! American Indian or Alaska Native (including all Original Peoples of the Americas)

Are you Enrolled? ! Yes ! No If yes, please enter Tribal Enrollment Number________________

____________________________________________________________! Asian (including Indian subcontinent and Philippines)

____________________________________________________________! Black or African American (including Africa and Caribbean)

____________________________________________________________! Native Hawaiian or Other Pacific Islander (Original Peoples)

____________________________________________________________! White (including Middle Eastern)

___________________________________________________________

www.flickr.com/photos/kzirkel/8161123197/

nor is this

Page 18: What you don't know will hurt you: designing with and for existing content

www.flickr.com/photos/kzirkel/8161123197/

and definitelynot this

Page 20: What you don't know will hurt you: designing with and for existing content

Complex topicsChanging lawsYears of additionsEndless modificationsAging platforms

Page 22: What you don't know will hurt you: designing with and for existing content

What we really need is some structure.

Page 23: What you don't know will hurt you: designing with and for existing content

Trim, compact writingModular contentLogically broken into partsClearly labeledCleanly stored

Page 24: What you don't know will hurt you: designing with and for existing content

This doesn’t just happen.

Page 25: What you don't know will hurt you: designing with and for existing content

‘‘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”

Page 26: What you don't know will hurt you: designing with and for existing content

it takes time

www.flickr.com/photos/snappa2006/2770979727

Page 27: What you don't know will hurt you: designing with and for existing content

III. THE BELLY OF THE BEAST

Page 28: What you don't know will hurt you: designing with and for existing content

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

Page 29: What you don't know will hurt you: designing with and for existing content

Audited Date Location Section Subsection

Sub-subsection Page Name IA Notes Content Notes Update Plan

HC Update Priority

1/4/13 http://calexport.fas.harvard.edu/cgi-bin/calendar/exporter.cgi?view=monthview&cal=117046&template_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 High1/4/13 http://www.college.harvard.edu/icb/icb.do?keyword=k61161&tabgroupid=icb.tabgroup84423College Academics Academics Most subpages go offsite, except for academic requirements. But should that be the case? Seems like some of this info would make more sense wrapped into the College site. Long, multiparagraph page of content without a clear purpose. Needs to better help users get to real information.Keep High1/4/13 http://college.harvard.edu/icb/icb.do College College Homepage - Page doesn't have much content unique to it. Is primarily a feed of other content. Headlines in images are vague and don't include any context or links to more. Events, News and Notices, and Sustainability blurbs are overwhelming/competing. Would like to see more obvious note that this is Harvard College, with information for prospective students here.Keep High1/4/13 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 seem like events calendar is incorporated into the site like it should be. Not sure where this content is currently entered and stored, but there is an API for it: https://manual.cs50.net/HarvardEvents_API, so it seems that we could build around that. Individual events include attributes for: Event Name, Start Time/Date, Stop Time/Date, Location, Description, Calendar Keep High1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&pageid=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 consolidated with main About page.Merge Low1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&pageid=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 making the news in 2009). Don't think this is tightly enough tied to Freshman Seminars, and it is unlikely to be updated. Delete Mid1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&pageid=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 Low1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&pageid=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 Low1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&tabgroupid=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. Doesn't fit with the rest of the site. Keep Low1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&pageid=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 layout. This content, which consists of testimonials, seems like it would make a lot more sense incorporated as modules (rotating through?) on different pages of this section, where freshmen will see it. Split - create modules Mid1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&tabgroupid=icb.tabgroup86241Freshman Seminars For Freshmen Apply to Seminars Apply to Seminars - Duplicates http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&tabgroupid=icb.tabgroup86240 at a different URLMerge with other Application pageMid1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&pageid=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 content were more process-oriented (e.g. starting with eligibility, then steps). Keep Low1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&pageid=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 forms Keep Low1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&pageid=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 Low1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&pageid=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 applications but describes how applications are reviewed and assignments to seminars made.Rename Low1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&tabgroupid=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 about the organizers and thank the donors rather than give an overview of the program. Content should likely be trimmed and refocused.Keep Mid1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do Freshman 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 be brought in line with brand and made more direct. Sidebar content (applying to a seminar, dates) feels jumbled and disorganized.Keep High1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&tabgroupid=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, which is nice. Unclear if all this information is needed at this stage.Keep Mid1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&tabgroupid=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. Copy below is obscured and is very long. All of this could be trimmed and organized much better. Keep Mid1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&tabgroupid=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. Can the design of this feed be altered? Would be nice to increase prominence of these offering and perhaps expand information displayed here. Keep Mid1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&pageid=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 Low1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&tabgroupid=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 Low1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&pageid=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 individual Q/A sets is pretty good. Keep Low1/4/13 http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681&pageid=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 individual Q/A sets is pretty good. Keep Low1/4/13 http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreak&pageid=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 the page name reflect this, e.g. "Wintersession Trips" ?Rename Low1/4/13 http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreak&tabgroupid=icb.tabgroup151676Wintersession Campus Services Campus Services - Blank page - should have content and be a wayfinder for subpages, or (recommended) we should remove the subpages and make them subheads here.Merge with student servicesLow1/4/13 http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreak&tabgroupid=icb.tabgroup151678Wintersession Campus Services Library Hours Library Hours - Blurb just says click HERE for library calendar and sends user to the library. Merge with student servicesLow1/4/13 http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreak&pageid=icb.page315737Wintersession Campus Services Shuttle Services Shuttle Services - Content could be streamlined and more concise, and send users to the shuttle site for more info.Merge with student servicesLow1/4/13 http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreak&pageid=icb.page315739Wintersession Campus Services Dining Locations and HoursDining Locations and Hours- Content could be streamlined and more concise.Merge with student servicesLow1/4/13 http://wintersession.college.harvard.edu/icb/icb.do Wintersession Wintersession HomepageSame design as College pages, but navigation changes completely. This site is not easily available from the main College site. Content hierarchy is strange—basic content explaining Wintersession is low on the page. This could be better displayed alongside the video. Template should support more obvious module that can be added before/during each Wintersession.Keep Mid1/4/13 http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreak&tabgroupid=icb.tabgroup158438Wintersession On-Campus Housing On-Campus Housing - Content is clear and well organized. Link to https://starrez.fas.harvard.edu/StarRezPortal/Default.aspx?Params=L9ezxPcQnQtHT%2fDwvmM%2bxLYmQ707en90 for the Winter Break Housing Application could be more obvious.Keep Low1/4/13 http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreak&pageid=icb.page385332Wintersession For Faculty For Faculty Content talks about President's January Innovation Fund, but doesn't clarify what that is or its relation to Wintersession.Keep Low1/4/13 http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreak&tabgroupid=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 great if this offered some search/sort functionality.Lead-in content is sparse—could use some warmth. Keep Low1/4/13 http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreak&pageid=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 FAQ collections of different varieties? Light editing for voice/tone and clearer, more concise language. Keep Mid1/4/13 http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreak&pageid=icb.page477831Wintersession Connect with Alumni Connect with Alumni - Long page but doesn't need to be updated until next year. Keep Low1/4/13 http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreak&pageid=icb.page315736Wintersession Campus Services Library Hours Gym Hours - No content and page is set up as subpage of library.Merge with student servicesLow1/4/13 http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreak&pageid=icb.page563620Wintersession Faculty & Alumni Book Talks Faculty & Alumni Book Talks- No content on the page. Should pages like this exist without content? Or perhaps include evergreen content (pictures of past events, etc.)Keep Low1/4/13 http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreak&tabgroupid=icb.tabgroup151677Wintersession 2013 Wintersession ProgramsSubmit an Activity Submit an Activity Sends user offsite to login-only Wintersession activities portalOffsite - login page Keep Low1/4/13 http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreak&pageid=icb.page478659Wintersession Harvard Travel Tools Harvard Travel Tools Unclear at first what this page is for. Copy has typos and could use clarification.Keep Low1/5/13 http://admissions.college.harvard.edu/about/beyond/arts.html Admissions About Harvard Beyond the ClassroomThe Arts - Content is good, but could use a tone refresh and more breakdown in the text. Keep Mid1/5/13 http://admissions.college.harvard.edu/about/beyond/athletics.html Admissions About Harvard Beyond the ClassroomAthletics - Content is good, direct tone, clear. Keep Mid1/5/13 http://admissions.college.harvard.edu/about/beyond/research.html Admissions About Harvard Beyond the ClassroomResearch - Content is high quality and broken down nicely—very clear. Could use a refresh to be direct and more human.Keep Mid1/5/13 http://admissions.college.harvard.edu/about/beyond/index.html Admissions About Harvard Beyond the ClassroomBeyond the Classroom - Content is lengthier than needed for a page used to drive visitors into deeper content. Passive intro that is also duplicated on interior pages: "There is fairly universal agreement that much of the value of a Harvard education lies in things learned outside the classroom and in the relationships established with others in the community, especially with fellow students."Keep High1/5/13 http://admissions.college.harvard.edu/about/beyond/community.html Admissions About Harvard Beyond the ClassroomCommunity Outreach - Content is light and could use more specifics and details.Keep Mid1/5/13 http://admissions.college.harvard.edu/about/beyond/cultural.html Admissions About Harvard Beyond the ClassroomCultural & Ethnic Activities.- Content is light and could use more specifics and details.Keep Mid1/5/13 http://admissions.college.harvard.edu/about/beyond/politics.html Admissions About Harvard Beyond the ClassroomGovernment & Politics - Content is passive and impersonal but informative.Keep Mid1/5/13 http://admissions.college.harvard.edu/about/beyond/studyabroad.html Admissions About Harvard Beyond the ClassroomStudy Abroad - Content is passive and impersonal but informative.Keep Mid1/5/13 http://admissions.college.harvard.edu/about/beyond/clubs.html Admissions About Harvard Beyond the ClassroomStudent Clubs & Activities- Intro content is passive and could use a refresh to be direct and engaging. Keep Mid1/5/13 http://admissions.college.harvard.edu/about/beyond/environmental.html Admissions About Harvard Beyond the ClassroomSustainability. Environmental Action, and Research- Intro content is passive and could use a refresh to be direct and engaging. Keep Mid1/5/13 http://admissions.college.harvard.edu/about/beyond/rotc.html Admissions About Harvard Beyond the ClassroomROTC - Intro content is passive and could use a refresh to be direct and engaging. Keep Mid1/5/13 http://admissions.college.harvard.edu/about/faq.html Admissions About Harvard FAQ FAQ Lots of different FAQs on the site. Could these be made into structured modules and tagged to appear in FAQ collections of different varieties? List of FAQs is long. Could use some categories for easier skimming. Copy is mostly good, but could use tone refresh and tightening.Keep Mid

auditthe content

Page 30: What you don't know will hurt you: designing with and for existing content

‘‘A mind-numbingly detailed odyssey through your web site.

Jeffrey Veen, Adaptive Path, 2002

Page 31: What you don't know will hurt you: designing with and for existing content

REASONS TO GET TO KNOW YOUR CONTENT3

Page 32: What you don't know will hurt you: designing with and for existing content

LESS CRAP, NOT SHOEHORNED CRAP1

Page 33: What you don't know will hurt you: designing with and for existing content

FROM70kTO 3kPAGES

Page 34: What you don't know will hurt you: designing with and for existing content

WHAT DO YOU HAVE?✦ Quantity✦ Location ✦ Topics

Page 35: What you don't know will hurt you: designing with and for existing content

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

Page 36: What you don't know will hurt you: designing with and for existing content

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

Page 39: What you don't know will hurt you: designing with and for existing content

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

Page 40: What you don't know will hurt you: designing with and for existing content

This opens up conversations about priorities, roles, and responsibilities well before launch—rather than waiting until it’s too late.

the win:LONG-TERM

Page 41: What you don't know will hurt you: designing with and for existing content

2 REPRESENTATIVE CONTENT

Page 42: What you don't know will hurt you: designing with and for existing content

‘‘Instead of creating [layouts] from the edges in, create them from the content out. For example, derive columns of a grid from elements of your content.

Mark Boulton, .net

Page 43: What you don't know will hurt you: designing with and for existing content

infinitedesigners?

Page 44: What you don't know will hurt you: designing with and for existing content

so...whichcontent?

www.flickr.com/photos/tdd/4493216417

Page 45: What you don't know will hurt you: designing with and for existing content

representative

www.flickr.com/photos/28478778@N05/5728474385/

content

Page 46: What you don't know will hurt you: designing with and for existing content

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

Page 47: What you don't know will hurt you: designing with and for existing content

Representative contentis your new bicycle.

Page 48: What you don't know will hurt you: designing with and for existing content
Page 49: What you don't know will hurt you: designing with and for existing content
Page 50: What you don't know will hurt you: designing with and for existing content

CONTENT TYPES✦ Based on patterns in content’s

shape, purpose, and “chunks.”✦ Categorize like content (services,

bios, people, events, etc.) ✦ Can be more or less granular,

depending on your scope.

Page 51: What you don't know will hurt you: designing with and for existing content

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.

Page 52: What you don't know will hurt you: designing with and for existing content

Content works with your templates, rather than rotting in generic pages. Priorities and calls to action stay intact.

the win:SHORT-TERM

Page 53: What you don't know will hurt you: designing with and for existing content

When every content type clearly supports strategy, you’re less likely to end up with content you don’t need.

the win:LONG-TERM

Page 54: What you don't know will hurt you: designing with and for existing content

RELY ON SYSTEMS,NOT JUST PAGES 3

Page 55: What you don't know will hurt you: designing with and for existing content

‘‘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”

Page 56: What you don't know will hurt you: designing with and for existing content
Page 57: What you don't know will hurt you: designing with and for existing content
Page 58: What you don't know will hurt you: designing with and for existing content

Structured content can help you.

Page 59: What you don't know will hurt you: designing with and for existing content

more interconnection,less nav

Page 60: What you don't know will hurt you: designing with and for existing content

CONTENT MODEL✦ Defines a system of content.✦ Establishes relationships between

content types.✦ Defines shared attributes.

Page 61: What you don't know will hurt you: designing with and for existing content

METADATA✦ Provides additional information

about content (e.g. its topic or when it was authored).

✦ Can be exposed, but the real magic is behind the scenes.

Page 62: What you don't know will hurt you: designing with and for existing content

RULE-BASED LAYOUTS✦ Rules use metadata to decide how

and where to display content✦ Can control combinations of

content modules, related items, excerpts, prioritization, etc.

Page 63: What you don't know will hurt you: designing with and for existing content
Page 64: What you don't know will hurt you: designing with and for existing content
Page 65: What you don't know will hurt you: designing with and for existing content

Allows for faceted search.

Page 66: What you don't know will hurt you: designing with and for existing content

Makes related content actually relevant.

Page 67: What you don't know will hurt you: designing with and for existing content

Content is easier to access in range of natural, useful ways—without having to lay out every damn page.

the win:SHORT-TERM

Page 68: What you don't know will hurt you: designing with and for existing content

When content is a system that supports the business, it’s not tied to just one destination.Plus, people collaborate—rather than post whatever, wherever.

the win:LONG-TERM

Page 69: What you don't know will hurt you: designing with and for existing content

IV. TAKING CONTROL

Page 70: What you don't know will hurt you: designing with and for existing content

selfishlet’s get

www.flickr.com/photos/clanlife/4948367381

Page 72: What you don't know will hurt you: designing with and for existing content

this looks nothing like the

comps!

Page 73: What you don't know will hurt you: designing with and for existing content

Don’t let broken content break you.

Page 74: What you don't know will hurt you: designing with and for existing content

look,really look

Page 76: What you don't know will hurt you: designing with and for existing content

thank you,

ORLANDO!

Flickr images used via CC-Attribution license unless otherwise noted. Illustrations used with the permission of Eva-Lotta Lamm.

Content Everywhere is available now:http://rfld.me/content-everywhere

sarawb.com // @sara_ann_marie