1. Purpose of the Website
Things to Consider:
•Website purpose
•Target audiences
•Designconsiderations
•Navigation
•User or account loginrequirements
•Audio/visual elements
•e-commerce,if necessary
•Search engine optimizationrequirements
•Hostingand maintenance
•Not-to-exceedcost
•Developmentschedule withdeadlinesandlaunchdate
•Managementstructure
Department Branding / Building Reputation/
InterdepartmentalInteraction / Blog
Professional Development / Sharing Expertise /
Training / Provide Value to Interpreters / Blog
3. Card sortingisa wayto organize contentbasedonhierarchy.Totry it,simplyputall of the pagesforyour website onto
index cards.Askstakeholderstosortthose cards intological stacksthat representthe hierarchyof yourwebsite’s
navigation.It’sagreat exercise tomake sure thatthe contenton yourwebsite canbe foundinthe most logical place and
that like-mindedcontentisgroupedandnamedappropriately.
What’sit for?
To gather feedbackonwhatpagesshouldgowhere onyourwebsite.
What’sgood about it?
It’sa greatway to learnthe assumptionsof multiple users.
What’sbad about it?
The resultsshouldbe takenwithagrain of salt.Your participantswill be makingalotof guessesand
assumptions.
In sum
One majortask in website developmentismakingpeople feel included.Cardsortingisaninteractive process
that helpspeoplefeelliketheyare contributing.
A fewresourcestolearnmore aboutcard sorting:
Card Sorting:A DefinitiveGuide
Card SortingAccordingto the US Government (official .govwebsiteonusability)
Card Sorting:MistakesMade and LessonsLearned
Word Matching
ContentInventories
A contentinventory isagreatway to understandthe breadthof yourwebsite andthe purpose of eachpage.Simply
create a spreadsheetof all yourpagesandtheircorrespondingURLs.But a contentinventorygetsmuchmore useful
whenyouadd thingslike page notesandsingle-sentence summariesof whyapage exists.Use acontentinventoryto
quicklyunderstandtopographyandfigure outwhatshouldfitwhere.It isa greatway to thinkthrougha redesignbut
may notbe the bestwayto plan newwebsites.
What’sit for?
To understandthe contextandpurpose awebsite’spages.
What’sgood about it?
Once it’scomplete,draggingthingsaroundandplayingwithalternate navigationschemesiseasy.Italsomakes
it easyto see the topographyof yourwebsite.
What’sbad about it?
Laboriousto create.It’snot of much use duringthe developmentphase,anditgetsoutof date prettyquickly.
4. In sum
A contentinventoryisagreatway to findunnecessarypagesonyourwebsite.Forcingyourself tolookateach
page in turnand summarizingitsusefulnessnearlyoutweighthe disadvantagesof thismethod.
A fewresourcestolearnmore aboutcontentinventories:
ContentInventories asdescribedonUsability.gov
ContentInventory (BoxesandArrows)
Paper and Sketchboards
Sometimes paperjustfeelsgood.The free formallowsforincredible expressiveness,andnothingisfasterforcapturing
ideas.Unfortunately,the drawbacksare toughtoignore.Paperiseasyto lose,hardto share,wasteful andnotvery
useful pastthe earlystagesof a project.Eventually,everythingforawebsite becomesdigital,andsogoingdigital as
soonas possible isbest.Use papertocapture thoughtsina meetingtobrainstormandto explore.Butdoyourself a
favorand transcribe or scan the informationasearlyaspossible.
What’sit for?
To quicklyandcollaborativelysketchouta website architecture.
What’sgood about it?
You can move piecesof paperaround.Anddrawingwithmarkersisfun.It’salsogreat forenergizingagroupand
quicklyscanningalotof ideas.
What’sbad about it?
Once your bigsketchboardiscomplete,ithastobe transcribedintoanotherformattobe useful.
In sum
Beware the feel-goodmeeting!Sketchboardmeetingsare funandseeminglyproductive,butyou’ll often
5. wonderafterwardswhatyouactuallyachieved.Ideascome quickly,butthe real workcomesindeciding
whetheranyof themare appropriate forthe project.
A fewresourcestolearnmore aboutsketchboarding:
Sketchboarding(Adaptive Path)
Sketchboards+ Prototypes (Slideshare)
More links onBrandonSchauer’swebsite
Site Map Diagrams
A visual site mapisquickto make,fairlyexpressive andeasytochange.People have all sortsof methodsforbuildingsite
map diagrams.Whateveryourtool,the diagramisa useful waytodemonstrate hierarchy.Itclearlyshowsthe
relationshipsbetweenpagesandtellsyouwhere yourwebsiteistooshallow ordeep.
What’sit for?
To visuallyexplainthe relationshipsbetweenpagesonyourwebsite.
What’sgood about it?
Nothingbetterillustratesthe hierarchyof awebsite thanadiagram withlinesandarrowsindicating the
relationshipsbetweenpages.Clientsnaturallyunderstandit.
What’sbad about it?
The actual relationshipsbetweenpagescanbe hard to grasp.What looksgoodon a chart mightnotwork well
on a website.Andasite mapdiagramis notreallyuseful duringthe developmentphase,quicklybecominga
deaddocuments.
In sum
A site mapdiagramis a quickway to sketchnavigationandhierarchy.Don’ttryto cram inotherbitsof
informationthatjustdon’tfit.
A fewresourcestolearnmore aboutsite mapsand diagrams:
A Visual VocabularyforSitemaps
The Lazy InformationArchitect’sGuide toMakingSitemaps
Whichto Choose?
There isno one rightway to planthe architecture fora website.Dependingonthe size of the website,youmightuse all
of these techniques.They’re notopposedormutuallyexclusive—justdifferentmeanstosimilarends.
Whenpickingyourmethodof architecture planning,considerthese things:
How big is the website?
The sheersize of some websitesmakessome of these methodscumbersome orimpossible.
What type of website is it?
The card-sortingmethod,forexample,isperfectfore-commerce websitesbutoverkill forblogs.
6. Whois your client?
The lessWeb-savvythe client,the more elaborate yourdescriptionsandplanswill have tobe.If yourclient
understandswebsites,thenyoucanbe a bitmore brief (butnot too brief!).
Consideryour workflow.
Try out all of the ideas,andthenpicka lightweight,simple processthatyouand yourclientscanunderstand.If
youfindyourself fillingininformationthatisn’tuseful orillustrative,thenyou’ve gone off track.Adoptinga
processthat allowsyoutodo the bare minimumisgoodinthiscase.
A fewtipsonarchitecture planning:
Organize contentaccordingtouser needs,notanorganizational chartor how the clientstructurestheir
company.
Give pagesclearand succinctnames.
Be sympathetic.Thinkof yourtypical users,called personas,andimagine themnavigatingthe website.What
wouldtheybe lookingfor?
Considercreatingauxiliaryway-findingpages.Thesepageswouldliebeyondthe mainnavigationof your
website andstructure variouspagesaccordingtospecificuserneeds.
If you can’t succinctlyexplainwhyapage wouldbe useful tosomeone,omitit.
Planthe architecture aroundthe content.Don’twrite contenttofitthe architecture.
Whendealingwithclients,especiallyclientsatlarge companieswithmanydepartments,keepingegosincheck
can be tough.Keepeveryone onpointwithconstantremindersof the true goalsof the website.
Noteverythinghastobe a page.Use yourhierarchyof contentas a guide.Some itemsmightworkbetterasan
FAQentryor as sidebarcontent.Make sure yourarchitecture-planningmethoddoesnotblindyoutothis.
Get architecture,contentanddeliverablesapprovedbefore movingontothe nextsteps.ModernCMS’ have templates
that can accommodate a wide varietyof content,andthismightmake itseemasthoughcontentorganizationand
architecture aren’tyourproblem,buttheyare!If youwrite the CSS and programmingwithoutunderstandingwhat
exactlyyou’re building,youwill be forcedeithertobacktrackor to fitcontentintoa template thatisn’treadyforit.
Contentcomesfirst.
•If you’re planningonline,emaileveryonewhenyoucan.If youplanon paper,printmultiple copiesinthe hopesthat
more stakeholderswill seethe planbefore youmove on.
•Get clear,directapproval of major stepsinwriting.If yourclientishesitant,theymaybe hidingthatthey’ve failedto
getapproval fromhigher-ups.Askingforanemail orsignature forcesthe issue.Itmaysoundconfrontational,butmost
clientswill understandandappreciate yourthoroughness.
•Ask formeetings.Mostcreative people hate them, butasuccessful projectrequirescollaboration.Youwouldbe
surprisedwhatcomesoutof a 10-minute phone call.
7. You may be a great designer,programmer,architectormanager,butif you can’t show progressandconveyideasto
clients,youwill fail.Clientsneedfeedback.Theyneedtosee where youare headingwiththe project.Tellingthemisone
thing;showthemanother.Many potentiallygreatwebsiteswere derailedbecausethe designerdidnoteffectively
explainwhatwashappeningtothe client.
Show,don’ttell.No matterhowmuchhead-noddingyousee,if youonly tellyourclientswhatyouwill do,
they’ll be confusedlater.Eitherpoormemoryorcommunicationwill sinkyourshipeverytime.
Don’tformat contenttoomuch. Keepitsimple.Somepeople startpushingpixelsrightafterplanning.Others
start workingoninterface wireframes.Whateveryoudo,empoweryourself oryourdesignerstomake primary
decisionsaboutfont,colorandlayout.If yourcontentwireframe ordiagramistoo elaborate,itwill impinge on
the design.Letthe decision-makersfocusonthe content,navigationandwhat-goes-where,ratherthan
muddyingthe processwithfillergraphics.
A Few Parting Practical Tips
Be specificaboutyourwantswithclients.Askfordigital text,Web-sizedimages, etc.
Keepall deliverablesinone place,andputthemthere assoonas youget them!
Askfor writtenchanges,preferablyviaemail sothatthey’re time-stamped.
Use Google’sadvancedsite search toquicklylearnaboutthe currentwebsite’ssizeandshape if yourprojectisa
redesign.
Askyour clientforaccessto oldstats. Learninghow people have beenaccessingcontentisimportantif youwill
be planninga newwebsite.
Avoidbeingtoospecificinthe earlystages.Workfromgeneral tospecific,anddon’tgetboggeddownindetails
until theybecome important.
WrappingUp
As professionals,we needtoembrace betterplanningmethodsinourprojects.Beingagileisgreat,butdon’toutrun
your clientorthe goal of the project.True agilityisaboutbeingadaptable andreactingquickly.Planningawebsite isa
dauntingtask,butit can be done if youstickto a processthat works.
Understandthe goalsof the website.
Gather resources.
Organize resourcesattoplevel andthenat page level.
Assessyourworkbasedonuser profiles.
Demonstrate yourplan.
Get approval.
Move on.
Aligningthe Website Withthe MarketingCampaign
8. The website mustworkinconcertwiththe overall marketing plan.The needsassessmentforthe website mightoverlap
withthe othereffortsandapproachesof the marketingdepartment,whichisfine.Thisisoutsidethe scope of this
article,butnote that the establishedbrandingandmarketingof the businessshouldinformthe structure anddesignof
the website.
Roles:Who’sDoingWhat?
Everyprojectisdifferent,butthese are the typical rolesinasizable Webproject:
•Internal stakeholders(aka“clients”),whorepresentall primaryaspectsof the business;
•Projectmanager;
•Copywriteroreditor;
•Web designer(graphicdesign,illustration,Webdesign);
•HTML coder(HTML, CSS, JavaScript,Flash);
•Web or CMS developer.
Determine Website Content
Who’sResponsible?
As youprepare to addcontentto the website, thinkaboutwhowillcontribute.Inafive-personbusiness,itmightbe just
twoof you,and that’sfine.Ina large businessororganization,5,10 or 15 people mightbe contributingcontent.The
time requiredtoeditandproofreadbothcopyand visual contentgrowsexponentiallyinproportiontothe numberof
people whocontribute content.
ContentIsNot JustText
Unlessyouare creatingthe dullest,mosttechnical website imaginable,yourcontentshouldconsistof more thanjust
plaintext.Byusingone or more of the followingmultimediaelements,you’ll greatlyenhance the appeal andusefulness
of the website:
•Images;
•Documents(usuallyPDFs);
•Audio;
•Video(i.e.,embeddedfromYouTube orVimeo,orself-hosted);
•Adobe Flashfiles;
9. •Contentfeeds (fromotherwebsites,forexample);
•Photos(fromFlickrperhaps);
•Twitterstream;
•Facebook“friends”list;
•RSS feeds.
Quick WritingTips
Consideryouraudience andwrite accordingly.Trytosee the businessfromthe customer’sperspective.Whatdothe y
care about?
Avoidbusiness-speak,confusingacronymsanddrydetails.Yourcustomersdonotwork at yourshop,office orwidget
factory;theyare the onespurchasingyourproductsor services.Speaktothemaccordingly.Whenappropriate,write in
generalities,andsave the hardcore detailsformulti-page PDFs(asdownloads).Thisapproachisespeciallyuseful for
productinformation,whitepapersandcopythat approachesorexceeds1000 words.
Here is a useful approachwhenwritingforthe Web:
1. Write your firstdraft,
2. Cut itin half,
3. Cut itin half again,
4. Addbulletedandnumberedlistswhere possible,
5. Senditto the editor.
Readingona screenis fatiguing.A screen,whetheramassive 26-inchmonitorora diminutive smartphone,projectstiny
pointsof lightat youreyes.Consequently,readinglongstretchesof textonitcan be verytiring.Userswill scanforkey
pointsinthe text,soshort blocksof copy and bulletedornumberedlistsare helpfulbecause they’reeasytospot.
Don’tstyle the content.Most writersprefertoworkinMicrosoftWord or a similarprogram.Thisisfine,butWordis
notoriousforoutputtingmessycode.Don’tworryaboutcolors,fontsandalignment.Justwrite well.Style willbe applied
laterat the level of eachWebpage.
Determine YourWebsite’sStructure
Here are the keyelementsinplanningawebsite’sstructure.
Site Map
Your site mapcouldbe structuredlike aflowchart andbuiltwithsoftware suchasVisioora free tool like Gliffy.
Alternatively,youcouldcreate anoutline withbulletedlistsandindentationsthatindicate pages,sub-pagesandother
structural breaks.
10. ContentDefinition
Some contentwill be easytodefine.A contactpage,forexample,isgenerallyexpectedtoincludeabusinessname,a
location,contactinformation,hours(if applicable)and,often,asimple form.Othertypesof contentrequire more
consideration.Thisisanotherpointwhenfailingtocarefullydefine the contentwill create headachesforyoulateron.
ContentChecklist
Here is a list(thoughnotexhaustive) of commontypesof content.Remember,theseare justtypes,notdefinitions:
•Articles;
•Blog;
•Banneradvertising;
•Discussionforum;
•Documents;
•E-commerce;
•Forms forcontact, quotesor somethingelse;
•Physical products(how many?);
•Digital content(whatkindandhowmany?);
•Email newsletter;
•Eventcalendar;
•Eventregistration;
•Image gallery;
•Link management(dozensorhundredsof links,orderedbycategory);
•IncomingRSSfeeds(pulledfromotherwebsites);
•OutgoingRSSfeeds(yourcontentsyndicatedtootherwebsites);
•Search;
•Social mediasharinglinks(Twitter,Facebook,etc.);
•Staff directory.
ContentRelationships
11. Some of your contentwill relate toothercontent.Forexample,the same detailsmightappearondifferentpagesof
your website.Mapthese relationshipscarefully,andrememberthatwhencontentischangedinone areaof the
website,itmightneedtobe changedinotherareasfor consistencyandaccuracy.
SeparatingDesignFromContent
Designandcontentare intimatelyrelated,buttheyare alsoseparate.Thismightbe confusingatfirst.Butit meansthat
website contentiscompletelyfreeof designelements.Toavoidspeakinginhypotheticals,let’sconsiderasimple
example.Let’ssayyourwebsitehasaset of articles.Foreach article,there isa:
•Title,
•Meta title,
•Meta description,
•Author,
•Date of publication,
•Category,
•Summary,
•Main text.
These piecesof informationconstitute awhole article.Atthispointinthe process,itdoesn’t matterwhatdesignyou
applyto the copy: fonts,layout,colors,authorphotothumbnails,etc.The contentisvalideveninthe absence of design.
It may notlookprettyinplaintext,butit readscorrectly.
ThisseparationneatlysuitsWebStandards,a projectthatadvocatesfor a setof standardsfor Webdesignthatmakes
contentaccessible tothe broadestpossible range of peopleanddevices.
Then,whenit’stime nexttoredesignyourwebsite,youcaneasilyapplyanentirelynewdesigntoyourexistingcontent,
because you’ve maintainedthe separationbetweencontentanddesign.
The Value Of Good ContentAndMeta Data
What Is Meta Data?
Meta data is contentaboutyourcontent.In the case of an article,everythingotherthanthe title andarticle text is
consideredmetadata.Whensome people hear“metadata,”theyimmediatelythink,“Oh,that’sforsearchengines,”
whichiscorrect: searchenginesdorelyonmetadata to index Webpageseffectively.However,youmightwantsome
metadata justfor your ownrecords,withoutdisplayingit.
12. Whendecidingwhatmetadatato collectforeach type of content,there isa benefittocollectingmore datathan
needed.Still,youcouldcollectalotlessthanwhat we’ve listedabove andstill have avalidarticle. The bare minimum
youneedforsomethingtoqualifyasan article is:
•Title,
•Author,
•Article text.
You mightthinkthatthat is enough,orthat youwon’thave manyarticles,or that they’ll be short,orthatthe articles
won’tneedsummaries,orthatyourvisitorswon’tcare aboutdate or categories.Thismightbe true today,butwhat
aboutnextyear?If youwrite goodcontent,thenitwill be useful well intothe future.
CollectMetaData, Planfor the Future
Overtime,the value of goodmetadata increases.If youhave only10 articles,thentrackingauthorsandcategories
mightnot seemuseful.Intwoyears,though,whenyou’ve builtupalibraryof 150, you’ll be gladyoutook the time to
collectit.You will be able tosortby author,date andcategory.Andbecause you’ve collectedsummaries,you’llbe able
to make a versionof yourwebsite formobile devices,forwhichsummariesare all thatfiton the screenat once.
Wireframes
Once you’ve determinedthe structure of the content,youcanmove to the firststepinthe designprocess.Building
wireframesmostlyhastodo withthe layoutaspectof Web design.Theyare done ingrayscale andare designednotto
be prettybut ratherto showpage layout.There are manygreat toolsforthis:Photoshop,IllustratorandVisioworkwell,
as do specializedtoolslike Balsamiq.
The tendencyof designersespeciallyistomake thingslookappealingfromthe beginningof the process.Butthisshould
be avoidedcompletelyatthe wireframingstage,becausethatwoulddistractfromthe purpose of the wireframe,which
isto decide where thingsshouldgo,notwhatfontsize to use or what colorthe navigationshouldbe.
Generallyspeaking,one wireframeshouldbe made foreachunique page ona website.If youhave apage thatoffers
downloadsorphotogalleries,mockitupas well.The examplesthatfollow are forahome page and two internal pages,
respectively.
Once the wireframeshave gone throughyourreview process,it’stime tomove tothe designstage.
Initial Design
The initial design,commonlycreatedinAdobePhotoshoporFireworks(andsometimesAdobeIllustrator),consistsof
visuallyaccurate images(“mock-ups”) of the home page andat leastone internal page.Yourbusiness’visualbranding
elementsshould be includedhere.If youalreadyhave well-definedgraphicsinadditiontoalogo,theyshoulddictate
13. the designof the website.If yourbrandlacksthese,thenthe designershoulddotheirbesttocreate workthat
accuratelyreflectsthe business.
Here is a shortlistof keypointsforsuccessful mock-ups.We’llassume thatthe designerisworkinginPhotoshop,
althoughthese guidelinesapplytootherprogramsas well.
•Start witha pre-made template,withpre-drawnpixel-accurate guides.Some designerscreate theirown,andothers
adhere tosystemslike the 960 Grid System5. Whicheveryoustartwith,the template shouldbe clean.Make the canvas
widerthanthe widthyou’re designingtosothat youcan addnoteson one side.
•Add the colorpalette and basicbrandingelements(e.g.fonts) inthe marginsof the canvasso that youhave themfor
reference whenviewingonscreenorinprint.
•Draw everythingtoexactpixels,anddrawclearguidesandslicesarounddesignelements.Thisbecomescritical when
youexecute the designinHTML later.
•Organize all designelementswithalogical folderorsub-folderstructure,andlabel eachitemclearly.If the designerwill
be handingfilesoff toanHTML specialist,thisisespeciallyimportant.“Sidebareventsheader”isclear;“Layer14 Copy”is
not.
•Make clear notesaboutfonts,alignment,repeatingbackgroundelements,gradientsandanythingelsethatwill be
implementedwithCSS.Photoshop’ssticky-note feature canhelpwiththis.If somethingisunclear,ask the personwho
will be convertingthe design.
•If you’re usingacommon style forheaders,navigationorotherdesignelementsthatappearthroughoutthe website,
considermakingseparate templatesforthem.These willalsocome inhandylaterinthe designprocess,once mock-ups
have beenapproved.
•Use realisticcontent.Designersoftenuse Loremipsumtofill space,whichisokayforbodycopy.But forheadlines,
titles,eventsandsoon,use real copy.Considerthe twofollowingheadlines.The layoutconsiderationswouldbe
differentforeach:
•Widgets,Inc.WinsGreenManufacturingAward
•Widgets,Inc.EmployeesWinLandmarkCourtCase AffirmingEmployee RighttoPetitionforCollege Tuition
ReimbursementWhenTrainingIsRelevanttoWorkRole
DesignApproval andRevisions
Afteryouhave submittedthe initial mock-upsforapproval,there couldbe arevisionprocesswhere the designerand
keystakeholdersgobackand forth a fewtimes,tryingavarietyof editsuntil the designisapproved.
WebStyle Guide
A style guide iswhere properplanningshines.A style guide determinesanddefinesall the design,layout,interactive(i.e.
JavaScriptand Flash) andtype elementsusedthroughoutthe website.These include butare notlimitedto:
Navigationstyles;
14. <h1> through<h5> (headingtags);
Paragraphs;
Lists;
Blockquotes;
Italics,boldingandunderlining;
Links,includingactive,hoverandvisitedstates;
Icons;
Use of imagesandimage style;
Use of backgroundimages(watermarks);
Commonelementssuchas sidebars.
The mock-upsand style guide are the foundationof the nextstepsindevelopment.
IntegratingWithContentManagementSystem
At longlast,yourbrilliantdesignhasbeenconvertedtocode andisreadyto be integratedintoaCMS. The individual or
teamtaskedwithdoingthiswill provideyouwithlog-indetailsforthe CMS thatallowsyouto add content,including
text,photos,videoanddocuments.Mosteditorsprefertocut andpaste from MicrosoftWord.
Dependingonthe specificsof the CMS,you mightbe able to dothis easilyandretainsimpleformattinglike bold,italics
and lists.Sometimes,though,the CMSwill stripoutthe formattingwhenyoucutand paste,andyou’ll have toputit
back. Thiscan be tedious,butitensuresthatyourcontentremainsneatandorderlyandthuscan be easilyprinted,
cited,indexedbysearchenginesandconvertedtootherformats.
PuttingItAll Together
Afterfollowingthesesteps,youshouldbe sittingonaprettysolidwebsite.Regardlessof the size of the project,nowisa
goodtime to do the following:
•Reviewthe contentonce again,andcheckit againstthe pointslistedunder“Writingforthe Web”above.
•Ask a thirdparty to proofreadall of yourcontent.Thisisnot the task of the designerororiginal writer.Bringin
someone withafreshperspective.Don’tproofreadyourownwork.
Beta TestingandLaunch
Whenyoufeel thatthe website isalmostreadyforthe publictosee,it’stime forbetatesting.Gothroughthischecklist
(whichisthe bare minimum):
15. •The website lookscorrectinall targetedWebbrowsers.Webbrowsersinclude the usual InternetExplorer,Firefoxand
Safari,as well as(dependingonthe specifications) lesscommonbrowserslikeChrome andmobile devices(iOS,
BlackBerry,etc.);
•Interactive featuresworksmoothly;
•Contact and otherformsworkpredictablyandsendthe correctinformationtothe userand recipient(s);
•Internal andexternal linkswork;
•Imagesare sizedproperly;
•All placeholdercontenthasbeenreplacedbythe final copy;
•Linksfrom third-partysoftware,suchasemail campaigns,work.
Once you’ve thoroughlybeta-testedthe website,launchit.
Post-Launch
Afteryou’ve launched,maintainthe website.Here are afew helpfultoolsforthat.
WebStatistics
Visitorstatisticsprovide insightintohowpeople use yourwebsite.You’ll needatleastamonthor two of data to make
any determinations.Here are a fewquestionstoconsider:
•Where are visitorscomingfrom?See searchengines,directtraffic(i.e.visitorswhotype yourwebsite’sURLdirectly
intothe addressbar),ads, linksfromotherwebsites,etc.
•Where do visitorslive?Are theymostlylocal,regional,national orinternational?
•What pagesare the most popular?
•How longare visitorsstayingon the website?
•What is the bounce rate?That is,how manyusersvisitonlyone page onthe website before leaving?
Google Analyticsisone of the mostcommonlyusedWebstatisticsapps,andyouwill findanswerstothese questionsin
the high-level dataitpresents.Othersoftware shouldprovidethese answersaswell.
Documentation
Much of your documentationwill consistsimplyof the differentelementsdiscussedearlierinthisdocument,including
wireframesandPhotoshopdocuments.You’ll alsoneeddetailednotesonhow variouspartsof the website are
implementedinthe CMS.Thinkabout whatinformationwouldbe neededif youbroughtinnew people tomaintainthe
16. website,peoplewhowere notatall familiarwithit.Whatwouldtheyrequire inordertopickup the project?Thisis
whatproperdocumentationis.
Back Up
Schedule regularback-upsof the website’sfilesanddatabase.Dailyisideal.Yourhostingcompanymightprovidean
automatedwayof doingthis,so that if yourfilesordatabase gethacked,erased,corruptedorotherwise damaged,you
can restore themwithcopiesfromthe previousday.Dependingonthe size of the website,updatefrequencyandsome
technical mattersthatvary fromwebsite towebsite,youcouldschedule more frequentback-ups.
Maintenance Plan
Your maintenance planshouldclarifyrolesandresponsibilitiesforeveryaspectof the website.Forexample,if two
articlesperweekare to be posted,whoisresponsible forthem, andwhoisthatperson’sback-up?If yourwebsite
requiresthatphotosor graphicsbe createdregularly,make sure thisworkisassignedandunderstood.Decide whowill
checklinks.
Write a simple maintenance plan,andshare itwitheveryoneinvolvedinthe website’scare anddevelopment.
Remember,agoodwebsite isn’taone-time event,butratheranextensiblecommunicationtool thatrequiresregular
updatestostay valuable,relevantandcompellingforvisitors.
SolicitVisitorFeedback
A greatway to improve the impactof a website istosolicitvisitorfeedback.There are avarietyof waysto do this,from
conductingsimple online surveystoon-sitefocusgroups.Website visitorsoftenhave trouble articulatingwhattheylike
and don’tlike abouttheirexperience.Withthisinmind,craftveryclearandspecificquestionswhensolicitingfeedback.
Andremember:if you’re goingtotake a significantamountof visitors’time,offersomethinginreturn(aproduct
discount,aprize or simplyahandwrittenthank-younote).
It isvital that yournewwebsite iswell organised,meetsthe needsof yourusers,deliversthe objectivesandgoalsof
your departmentandcontainsonlyaccurate,up-to-dateinformationasitreflectsyourdepartment'sreputationtothe
outside world.If youcarefullyconsiderandplanthe stagesinvolvedincreatingyournew site,you're more likelyto
deliveraneffectivewebsite.
Please readthe followingguidance notes,whichaddressthe mainareasinvolvedinwebsitecontentdesign.
1. Planningthe newsite
You will needtoconsiderthe following:
17. Your audience
You may wantto gatherinformationaboutyourusers'requirements(ie,theirneeds,tasks,andgoals) byconducting
some userresearch.
If you do nothave the resourcestogatherinformationaboutyourusersortalk to them directly,trytoput yourself in
your audience'sshoes.Don'tjustreplicate the structure of yourdepartmentasthe basisforyour website.Whoisyour
website aimedat?
•People withinthe University?
•People outsidethe University?
•Prospective students?
•Undergraduates?
•Postgraduates?
•International students?
•Membersof staff?
•Alumni?
•Potential businesspartners,etc?
Andwhat are the keytaskstheyneedtocarry outon your site?
Content
•If youhave existingcontent,whichpartsare still relevant?Cansome sectionsbe editedtobringthemupto date?
•Identifythe 'gaps'inyour content;make a listof new material thatisneeded.
•Remembertoconsiderthe use of imagesonyoursite.These addinterestandwill greatlyimprove the lookandfeel of
your site (CEUFlickr).
•Make full use of contentthat alreadyexistsonthe 'top-level'Universitywebpages.Thiswillsave youduplicating
information.
Navigation
What are the mostimportantaspectsof the information/servicesyouare offering?Ensure these areasare easyforusers
to findandnavigate to.
2. Organisingthe workloadanddevisingaworkplan
18. Dependingonthe size of yourwebsite:
•IdentifyaUnit'sWebteam(Unit'sstaff members,faculty) whocandrive forwardthe site developmentand helpshare
the workload.Thisteamshouldinclude aseniormemberof staff (see departmentalapproval below) andstaff whohave
a responsibilityforandare able tosupportthe site andkeepitup to date whenitislive.Updatingwebpagesismuch
simplerusingthe templatesasthere isword-processor-like editor;webpublishersnolongerneedtolearnXHTML
coding.
•Assignpagesandsectionstomembersof the teamas appropriate.Thisshouldincludeeditingexistingandwritingnew
material.Identifyareaswhere more more helpisneededandshare tasksaroundthe team.
•Set a realisticworktimetable andmonitorprogress.
•Afteryoursite has gone live,youshouldstillmeetregularlytodiscussandplannew pagesandto review the accuracy
of existingcontent.
3. Draftingnewcontent
Whenyouare writingnewcontent,rememberthatuserstendtoscan webpagesratherthanreadeverywordon the
page.Use the followinglistasguidance.
•Ideally,beginpageswithasummaryof what can be foundon that page so that userscan easilyidentifywhetherit
containsthe informationtheyare lookingfor.Thismightinclude linkstosectionsthatappearlowerdowninthe main
contentof the page.
•Use informative headings.
•Avoidjargonwhere possible.
•Avoidirrelevantcontent.
•Be concise:keeppagesasshortas possible.
•Write acronyms infull where theyare firstused(oneachpage).
•Make pages'scannable',forspeedreading.
•Highlightimportantwordsorphrases(usingthe <strong>or <em> tags NOT <b> or <i>).
•Proofreadyourpagesto ensure there aren'tanytypos.(remember:publishingawebpage can be the same as emailing
a Word documentto thousandsandthousandsof readers!).
•Use ordered(numbered) listswhere appropriate.These are easierforpeople withlearningdifficultiestofollowthan
unordered(bulleted)lists.
•Keepa consistentpresentationstyle.
•Ensure the contentiscompliantwithcurrentDataProtectionandFreedomof Information(FOI)legislation.
19. We have produceda summaryof currentweb bestpractice guidelines.We stronglyrecommendthatall membersof
your unit readthroughthese guidelinesbeforecreatingnew pagesandcontent(thiscansave a lotof time whenyour
site isauditedpre-launch).
You can findmore tipson writingforthe webfromthe followingsources:
•JakobNielsen:Writingforthe web•Webwritingformanyinterestlevels•Webreference - Writingwellforthe web4.
Departmental approval
Obtainingapproval foryournewwebsite beforegoinglivecanbe one of the hardest andmost time-consumingstages.
Everyone will have aslightlydifferentopinionandit'simpossibletoplease everyone!TalktoyourHeadof Department
(Unit) to decide whose approvalisnecessarybefore yourequestthatthe site cango live.
5. Launchingyour site
If the majorityof yoursite isreadyto launchbut some sectionsare incomplete,youcanalwaysremove linksto
unfinishedpagessothatyoucan launch yoursite.
6. Afterlaunch - keepingyourwebsite up-to-date,accurate andinteresting
If your department(unit) hasaWebteam(groupof people whoare responsibleforUnit'swebsite),trytosetup regular
meetingstomaintainaforumfornewideasand content(thiscanbe everyothermonthor termlydependingonthe size
of yoursite andhow oftenthe contentchanges).Developanupdatingtimetable sothateachmemberof staff knows
whatareas theyare responsible forandrunthroughthisat each meeting.Ultimately,the contentonyoursite isthe
mostimportantthingto yourusers,therefore itisinyourinteresttokeepitup-to-date,accurate andinteresting.