Creating Great Content for Websites

MarthaNicholsFacultyInstructor,Journalism

JenKramerLecturer,DigitalMediaDesign

HarvardUniversityExtensionSchool

hAps://scholar.harvard.edu/jen4web/presentaJons

https://xkcd.com/773/

Clarity, Clarity, Clarity

“Muddinessisnotmerelyadisturberofprose,itisalsoadestroyeroflife,ofhope:deathonthehighwaycausedbyabadlywordedroadsign,heartbreakamongloverscausedbyamisplacedphraseinawell-intenJonedleAer….Thinkofthetragediesthatarerootedinambiguity,andbeclear!”

—StrunkandWhite,TheElementsofStyle

SAMPLE WEBSITES: Good or Bad?

§  YaleUniversity

§  Purdue’sOnlineWriJngLab(OWL)

§  Teavana

PRINT: Classic Design that Works

Inbooksandjournals,you’llfind:

§  Headlines,Jtles,andcontentspages.§  Clearhierarchyofheadings.§  Fixedreadingwidth(pagesorcolumns).§  Blurbs,dropquotes,andsidebars.§  Indexes,references,footnotes.§  Spotart.

WEB CONTENT: What Users Get

TheGood…

§  Textisbriefandclear.§  Mixisfocused.§  IncludeseffecJvechunking.

TheBad…

§  Textistoolongandvague.§  Mixisamess.§  CreatesaAenJonscaAer.

…and the Ugly

FORM vs. FUNCTION

Q:Isiteverokayforawebsitetobeugly?A:Yes.Itdependsonthepurposeofthesite.Q:Really?Butdon’tvisualsmaIermorethanwords?

A:No.AskyourselfthefollowingquesLons:

Whatisthemainpurposeofthiswebsite?DousersjustneedalistofopJons?IsitaboutcreaJngabrandorimage?

Your responsibility is to enforce content rules.

UX PRINCIPLES: Focus on Users

1.   Understandstakeholdergoals—fortheorganizaLon,website,andendusers.

2.   IdenJfyyourtargetaudience(s)—anddeveloppersonas.

3.   Getfamiliarwiththe“voice”ofyourunit—usekeyphrases,connecttobranding.

4.   ConsiderwebsiteorganizaJon—andhowthisrelatestoinformaLonarchitecture.

CONTENT REALITY: Pushing Back

Thecontentteammayignoreeveryrule,butyoucansLllpushback:

§  Flagcontentthatdoesn’tworkwiththesiteplan.

§  InvokeUXprinciples.Askifthiscontent…—supportsoneofourgoals?—speakstooneormoretargetaudiences?—complieswithourbrand?—fitswiththeinforma9onarchitecture?

ACCESSIBILTY: Usable Sites for All

IT: Wow, this content is great, but Harvard won't let us do that because we have to comply with online accessibility. Content Team: Really? There are rules for accessibility? IT: Yep. Websites must be usable for those with disabilities – and Google is your #1 blind user:

ACCESSIBILITY ESSENTIALS

ContentTeamCreates…§  PageTitle§  InformaJonStructure§  Headings§  Language§  Links(descrip9ve?)§  ImageAlternaJves(crea9on)§  MediaAlternaJves(crea9on)

DevelopersEnforce…§  SemanJcMarkup§  Legibility§  Readability§  Layouts§  Links(easytofind?)§  ImageAlternaJves(enforcement)§  MediaAlternaJves(enforcement)

Lists derived from HUIT’s “10 Essentials” for Content Creators and Developers.

BAD TEXT

Onfartoomanywebsites,you’llfind:

§  Boring,overlywordycontent.§  Toomanydetails.§  Thewrongdetails.§  Noheadlinesororganizingstructure.§  ExplanaJonsinthepassivevoice.§  Vaguenessabouttherealpoint.

GOOD TEXT: Three Rules

1.   Keepitshort.—Cutthetextbyhalforone-third.—Reduceparagraphstoaheadline.

2.   Keepitfocused.—Firstoutlinethemostimportantpoints.—Thenselectthreeorfewerasyourfocus.

3.   Keepitmeaningful.—Avoidfancylanguageandjargon.—UsetheacLveexposiLonalvoice.

TEXT: How IT Can Help

1.   FlagwordycontentbasedonUXprinciples.—Doesitviolatebranding,audience,goals?

2.   Flagpoorlyorganizedcontent.—IsthepageLtledisLncLveanddescripLve?—Howwillyoutestforaccessibilitywithusers?

3.   CheckforsemanJcmarkupofheadings.—Haveheadingsbeenstyledcorrectly?

4.   Remember:HappyTalkMustDie.—SeeSteveKrug,“Don’tMakeMeThink.”

MESSY MIX

Onfartoomanywebsites,you’llfind:

§ Wrongtextwidthforreadability.§  Toomanysidebarsandvisuals.§  UndifferenJatedtextblocks.§  Placeholderheadingslike“Welcome.”§  Nologicaltextflow.§  ToomanymenuopJons.

FOCUSED MIX: Three Strategies

1.   Createahierarchyofmeaning.—Focusonwhatreadersreallyneedtoknow.—OrganizetexttoindicatewhatmaIersmost.

2.   Useheadlinestodirectreaders.—Makeheadingsshortandpunchy.—Createaheadingstructurethat’slogical.

3.   Establishsensiblemenusandsequences.—UselisLcles/Lmelinesiftheyimproveclarity.—CutdownthenumberofmenuopLons.

MIX: How IT Can Help 1.   Checktextwidthacrossdevices.

—Isitreadableandlegibleforallusers?—Haveyouestablishedafixedwidthfortext?

2.   RevisitUXprinciples.—Toomanyelements?Don’tcavetopressuretoputeverythinginasidebar.

3.   Avoidimagesastext.—Doesthesiteloadslowly?TextasHTMLisreadablebyGoogleandscreenreaders.

4.   EnforceinformaJonarchitecture.—DoesthedeliveredcontentmatchplannedIA?

ATTENTION SCATTER

Onfartoomanywebsites,you’llfind:

§  Swathsoftextinsteadofreadablechunks.§  Notenoughparagraphbreaks.§  Toomanyrandomelements.§  NoclearsenseofwhatmaAersmost.§  Imagesthatundercutorinterferewithtext.§  Toomanyhyperlinksthatpullreadersaway.

CHUNKING: Three Strategies

1.   Organizealltextinshortchunks.—Reduceparagraphstothreeorfourlines.—Includenomorethanthreegrafsinachunk.

2.   Useimagesthatservethetext.—KeepinmindthevalueofclearexplanaLons.—RememberthatapreIypictureisnotenough.

3.   EmployhyperlinkslogicallyandeffecJvely.—UselinkstotakereaderstoaddiLonaldetails.—Don’tpullreadersawaywithtoomanylinks.

CHUNKING: How IT Can Help

1.   Addparagraphbreaks.—Isthecontentbrokenintologicalsegments?

2.   Considertabs,accordions,andotherorganizingelementsfortext.—AretheydistracLngordotheyfocusmeaning?

3.   Avoidimagesforthesakeofimages.—Dovisualsdirectorconfuseusers?

4.   Insertlinksthatarerelevanttousers.—Arelinksimmediatelyhelpful?

“There is one rule that is fairly safe to follow: When in doubt, wear the plainer dress.” —Etiquette in Society, in Business, in Politics, and at Home (1922),

Emily Post

Except When You Break the Rules

https://www.lingscars.com/ “Ling’s Cars Has One of the Best Websites on the Internet”

(Newsweek)

Resources Accessibility

w  Forcontentcreators:“10Essen9als”(Harvard)w  Fordevelopers:“10Essen9als”(Harvard)

Coursesw  DGMDE-23:PlanningSuccessfulWebsitesandApplica9onsw  JOURE-137:FeatureWri9ngw  JOURE-169:DesigningStoriesfortheWeb(spring2018,newclasstaughtbyMarthaandJen)

Booksw  SteveKrug,Don’tMakeMeThinkw  StrunkandWhite,TheElementsofStylew  RoyPeterClark,HowtoWriteShort

Contact Us

MarthaNicholsInstructorinJournalismHarvardExtensionSchoolmnichols@fas.harvard.eduTalkingWriLngmagazine:hAp://talkingwriJng.com

JenKramerLecturerinDigitalMediaHarvardExtensionSchooljkramer@fas.harvard.eduSlidesat:hAps://scholar.harvard.edu/jen4web/presentaJons

BONUS: Revise Strunk and White AsapracLceexercise,cutdownthequotesoit’shalfaslong:

“Muddinessisnotmerelyadisturberofprose,itisalsoadestroyeroflife,ofhope:deathonthehighwaycausedbyabadlywordedroadsign,heartbreakamongloverscausedbyamisplacedphraseinawell-intenJonedleAer….Thinkofthetragediesthatarerootedinambiguity,andbeclear!”[53words]Hint:TryalisLcleorturningitintoatweet.