SlideShare a Scribd company logo
1 of 19
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
Readmore:http://www.entrepreneur.com/article/201650#ixzz2jKO1Bi1n
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.
 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
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.
 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.
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
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;
•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.
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
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.
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
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;
 <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):
•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
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:
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
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.
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.

More Related Content

What's hot

DrupalCon - 10 Ideas for Personalization
DrupalCon - 10 Ideas for PersonalizationDrupalCon - 10 Ideas for Personalization
DrupalCon - 10 Ideas for PersonalizationJon Meck
 
Content Strategy for Small Business
Content Strategy for Small BusinessContent Strategy for Small Business
Content Strategy for Small Businesscdelk
 
Developing an effective website captovate 2012_hs_v8
Developing an effective website captovate 2012_hs_v8Developing an effective website captovate 2012_hs_v8
Developing an effective website captovate 2012_hs_v8Captovate
 
Growing Your Business With A Website: WIBO
Growing Your Business With A Website: WIBOGrowing Your Business With A Website: WIBO
Growing Your Business With A Website: WIBOMardy Sitzer
 
Your window to the digital world
Your window to the digital worldYour window to the digital world
Your window to the digital worldMasih Nabizadeh
 
Aias Grass Roots 2016
Aias Grass Roots 2016Aias Grass Roots 2016
Aias Grass Roots 2016.SKI
 
Full Writing Service Offering Brochure - DSR Ghostwriting
Full Writing Service Offering Brochure - DSR GhostwritingFull Writing Service Offering Brochure - DSR Ghostwriting
Full Writing Service Offering Brochure - DSR GhostwritingDaniel Rosehill
 
Copywriting for Startups and Entrepreneurs
Copywriting for Startups and EntrepreneursCopywriting for Startups and Entrepreneurs
Copywriting for Startups and EntrepreneursAndrea Goulet
 
Behind the Scenes of Interactive Content
Behind the Scenes of Interactive ContentBehind the Scenes of Interactive Content
Behind the Scenes of Interactive Contention interactive
 
AIAS GRASSROOTS 2015 Technolog Track
AIAS GRASSROOTS 2015 Technolog TrackAIAS GRASSROOTS 2015 Technolog Track
AIAS GRASSROOTS 2015 Technolog Track.SKI
 
Seo the soul of web design Anand Saini
Seo the soul of web design Anand SainiSeo the soul of web design Anand Saini
Seo the soul of web design Anand SainiDr,Saini Anand
 
Web development chandigarh
Web development chandigarhWeb development chandigarh
Web development chandigarh49 Webstreet
 
American Institute of Architect Students Grassroots 2015
American Institute of Architect Students Grassroots 2015American Institute of Architect Students Grassroots 2015
American Institute of Architect Students Grassroots 2015Rob Rozicki
 
Starting Your Own Graphic Design Business
Starting Your Own Graphic Design BusinessStarting Your Own Graphic Design Business
Starting Your Own Graphic Design BusinessLara Kisielewska
 
Designing the Designer - Landing and Thriving in Your UX Role
Designing the Designer - Landing and Thriving in Your UX RoleDesigning the Designer - Landing and Thriving in Your UX Role
Designing the Designer - Landing and Thriving in Your UX RoleKate Wilhelm
 
SEO Workshop - St. Edward's University Instructional Technology
SEO Workshop - St. Edward's University Instructional TechnologySEO Workshop - St. Edward's University Instructional Technology
SEO Workshop - St. Edward's University Instructional TechnologyMegan Ura
 
Seo Training By Anand Saini
Seo Training By Anand SainiSeo Training By Anand Saini
Seo Training By Anand SainiDr,Saini Anand
 
Web Design by Client Perspective
 Web Design by Client Perspective Web Design by Client Perspective
Web Design by Client Perspectiveeginni
 

What's hot (19)

DrupalCon - 10 Ideas for Personalization
DrupalCon - 10 Ideas for PersonalizationDrupalCon - 10 Ideas for Personalization
DrupalCon - 10 Ideas for Personalization
 
Content Strategy for Small Business
Content Strategy for Small BusinessContent Strategy for Small Business
Content Strategy for Small Business
 
Developing an effective website captovate 2012_hs_v8
Developing an effective website captovate 2012_hs_v8Developing an effective website captovate 2012_hs_v8
Developing an effective website captovate 2012_hs_v8
 
Growing Your Business With A Website: WIBO
Growing Your Business With A Website: WIBOGrowing Your Business With A Website: WIBO
Growing Your Business With A Website: WIBO
 
Your window to the digital world
Your window to the digital worldYour window to the digital world
Your window to the digital world
 
Aias Grass Roots 2016
Aias Grass Roots 2016Aias Grass Roots 2016
Aias Grass Roots 2016
 
Full Writing Service Offering Brochure - DSR Ghostwriting
Full Writing Service Offering Brochure - DSR GhostwritingFull Writing Service Offering Brochure - DSR Ghostwriting
Full Writing Service Offering Brochure - DSR Ghostwriting
 
Copywriting for Startups and Entrepreneurs
Copywriting for Startups and EntrepreneursCopywriting for Startups and Entrepreneurs
Copywriting for Startups and Entrepreneurs
 
Services brochure
Services brochureServices brochure
Services brochure
 
Behind the Scenes of Interactive Content
Behind the Scenes of Interactive ContentBehind the Scenes of Interactive Content
Behind the Scenes of Interactive Content
 
AIAS GRASSROOTS 2015 Technolog Track
AIAS GRASSROOTS 2015 Technolog TrackAIAS GRASSROOTS 2015 Technolog Track
AIAS GRASSROOTS 2015 Technolog Track
 
Seo the soul of web design Anand Saini
Seo the soul of web design Anand SainiSeo the soul of web design Anand Saini
Seo the soul of web design Anand Saini
 
Web development chandigarh
Web development chandigarhWeb development chandigarh
Web development chandigarh
 
American Institute of Architect Students Grassroots 2015
American Institute of Architect Students Grassroots 2015American Institute of Architect Students Grassroots 2015
American Institute of Architect Students Grassroots 2015
 
Starting Your Own Graphic Design Business
Starting Your Own Graphic Design BusinessStarting Your Own Graphic Design Business
Starting Your Own Graphic Design Business
 
Designing the Designer - Landing and Thriving in Your UX Role
Designing the Designer - Landing and Thriving in Your UX RoleDesigning the Designer - Landing and Thriving in Your UX Role
Designing the Designer - Landing and Thriving in Your UX Role
 
SEO Workshop - St. Edward's University Instructional Technology
SEO Workshop - St. Edward's University Instructional TechnologySEO Workshop - St. Edward's University Instructional Technology
SEO Workshop - St. Edward's University Instructional Technology
 
Seo Training By Anand Saini
Seo Training By Anand SainiSeo Training By Anand Saini
Seo Training By Anand Saini
 
Web Design by Client Perspective
 Web Design by Client Perspective Web Design by Client Perspective
Web Design by Client Perspective
 

Viewers also liked

Evoluciòn y retos de la educaciòn virtual
Evoluciòn y retos de la educaciòn  virtualEvoluciòn y retos de la educaciòn  virtual
Evoluciòn y retos de la educaciòn virtualLeonor Olvera Gómez
 
Membuat usb memakai flasdist menjadi kunci komputer,
Membuat usb memakai flasdist menjadi kunci komputer,Membuat usb memakai flasdist menjadi kunci komputer,
Membuat usb memakai flasdist menjadi kunci komputer,ikramwahab
 
A new way bright career - arise dreams roby
A new way   bright career - arise dreams robyA new way   bright career - arise dreams roby
A new way bright career - arise dreams robyArise Roby
 
Architecture in a business context
Architecture in a business contextArchitecture in a business context
Architecture in a business contextKim Parker
 
Understanding the Home, Week 1: The Dream of Home
Understanding the Home, Week 1: The Dream of HomeUnderstanding the Home, Week 1: The Dream of Home
Understanding the Home, Week 1: The Dream of HomeDavid Week
 
Exterity Certificate
Exterity CertificateExterity Certificate
Exterity Certificatesameer ahamed
 
Change Et Al. Interim Management Services
Change Et Al. Interim Management ServicesChange Et Al. Interim Management Services
Change Et Al. Interim Management ServicesKarunesh Prasad
 
DSARROLLO DE LA MINERIA PERUANA
DSARROLLO DE LA MINERIA PERUANADSARROLLO DE LA MINERIA PERUANA
DSARROLLO DE LA MINERIA PERUANArenzastefanybc
 

Viewers also liked (13)

Evoluciòn y retos de la educaciòn virtual
Evoluciòn y retos de la educaciòn  virtualEvoluciòn y retos de la educaciòn  virtual
Evoluciòn y retos de la educaciòn virtual
 
Lat soal wjb 1
Lat soal wjb 1Lat soal wjb 1
Lat soal wjb 1
 
Membuat usb memakai flasdist menjadi kunci komputer,
Membuat usb memakai flasdist menjadi kunci komputer,Membuat usb memakai flasdist menjadi kunci komputer,
Membuat usb memakai flasdist menjadi kunci komputer,
 
A new way bright career - arise dreams roby
A new way   bright career - arise dreams robyA new way   bright career - arise dreams roby
A new way bright career - arise dreams roby
 
Fundamentos de redes
Fundamentos de redesFundamentos de redes
Fundamentos de redes
 
Kromium
KromiumKromium
Kromium
 
Logam alkali
Logam alkaliLogam alkali
Logam alkali
 
Architecture in a business context
Architecture in a business contextArchitecture in a business context
Architecture in a business context
 
Understanding the Home, Week 1: The Dream of Home
Understanding the Home, Week 1: The Dream of HomeUnderstanding the Home, Week 1: The Dream of Home
Understanding the Home, Week 1: The Dream of Home
 
Enseñanza de matemáticas de secundaria
Enseñanza de  matemáticas de  secundariaEnseñanza de  matemáticas de  secundaria
Enseñanza de matemáticas de secundaria
 
Exterity Certificate
Exterity CertificateExterity Certificate
Exterity Certificate
 
Change Et Al. Interim Management Services
Change Et Al. Interim Management ServicesChange Et Al. Interim Management Services
Change Et Al. Interim Management Services
 
DSARROLLO DE LA MINERIA PERUANA
DSARROLLO DE LA MINERIA PERUANADSARROLLO DE LA MINERIA PERUANA
DSARROLLO DE LA MINERIA PERUANA
 

Similar to Purpose of the Website

How to Storyboard your Website
How to Storyboard your WebsiteHow to Storyboard your Website
How to Storyboard your WebsiteFil Sullivan
 
Lecture4
Lecture4Lecture4
Lecture4hstryk
 
T2L3.doc
T2L3.docT2L3.doc
T2L3.docbutest
 
Steps and elements of web design
Steps and elements of web designSteps and elements of web design
Steps and elements of web designDr. Amaresh Jha
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhiCss Founder
 
The Essential Guide to Web Planning
The Essential Guide to Web PlanningThe Essential Guide to Web Planning
The Essential Guide to Web PlanningSerious SEM
 
Introducing Communication Sites for Communicators #spfestchi #CM101
Introducing Communication Sites for Communicators #spfestchi #CM101Introducing Communication Sites for Communicators #spfestchi #CM101
Introducing Communication Sites for Communicators #spfestchi #CM101Kanwal Khipple
 
Designing with content-first
Designing with content-firstDesigning with content-first
Designing with content-firstAndy Parker
 
Web Design Process - Tips & Guidelines
Web Design Process - Tips & GuidelinesWeb Design Process - Tips & Guidelines
Web Design Process - Tips & GuidelinesAmanda Kern
 
Website design essentials
Website design essentialsWebsite design essentials
Website design essentialsfumra
 
WordPress Tools and Tips for any Niche
WordPress Tools and Tips for any NicheWordPress Tools and Tips for any Niche
WordPress Tools and Tips for any NicheNile Flores
 
Rocking Out Your Site With WordPress
Rocking Out Your Site With WordPressRocking Out Your Site With WordPress
Rocking Out Your Site With WordPressNile Flores
 
Web Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptxWeb Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptxasmeerana605
 
What Do When Plan A Site-Website Developer Jackson
What Do When Plan A Site-Website Developer JacksonWhat Do When Plan A Site-Website Developer Jackson
What Do When Plan A Site-Website Developer JacksonWise Guys Technologies
 
A guide to writing a great website brief
A guide to writing a great website briefA guide to writing a great website brief
A guide to writing a great website briefMark Kelly
 
Important factors to consider while designing your website !
Important factors to consider while designing your website !Important factors to consider while designing your website !
Important factors to consider while designing your website !Shubhankar Gautam
 
Content Management & Page Structure - Best Practices for Structuring Content ...
Content Management & Page Structure - Best Practices for Structuring Content ...Content Management & Page Structure - Best Practices for Structuring Content ...
Content Management & Page Structure - Best Practices for Structuring Content ...D'arce Hess
 

Similar to Purpose of the Website (20)

How to Storyboard your Website
How to Storyboard your WebsiteHow to Storyboard your Website
How to Storyboard your Website
 
Guide to Planning Your Next Web Project
Guide to Planning Your Next Web ProjectGuide to Planning Your Next Web Project
Guide to Planning Your Next Web Project
 
Lecture4
Lecture4Lecture4
Lecture4
 
T2L3.doc
T2L3.docT2L3.doc
T2L3.doc
 
Steps and elements of web design
Steps and elements of web designSteps and elements of web design
Steps and elements of web design
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhi
 
Principles of good website design
Principles of good website designPrinciples of good website design
Principles of good website design
 
The Essential Guide to Web Planning
The Essential Guide to Web PlanningThe Essential Guide to Web Planning
The Essential Guide to Web Planning
 
Introducing Communication Sites for Communicators #spfestchi #CM101
Introducing Communication Sites for Communicators #spfestchi #CM101Introducing Communication Sites for Communicators #spfestchi #CM101
Introducing Communication Sites for Communicators #spfestchi #CM101
 
Designing with content-first
Designing with content-firstDesigning with content-first
Designing with content-first
 
Web Design Process - Tips & Guidelines
Web Design Process - Tips & GuidelinesWeb Design Process - Tips & Guidelines
Web Design Process - Tips & Guidelines
 
Website design essentials
Website design essentialsWebsite design essentials
Website design essentials
 
WordPress Tools and Tips for any Niche
WordPress Tools and Tips for any NicheWordPress Tools and Tips for any Niche
WordPress Tools and Tips for any Niche
 
Rocking Out Your Site With WordPress
Rocking Out Your Site With WordPressRocking Out Your Site With WordPress
Rocking Out Your Site With WordPress
 
Web Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptxWeb Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptx
 
What Do When Plan A Site-Website Developer Jackson
What Do When Plan A Site-Website Developer JacksonWhat Do When Plan A Site-Website Developer Jackson
What Do When Plan A Site-Website Developer Jackson
 
A guide to writing a great website brief
A guide to writing a great website briefA guide to writing a great website brief
A guide to writing a great website brief
 
Important factors to consider while designing your website !
Important factors to consider while designing your website !Important factors to consider while designing your website !
Important factors to consider while designing your website !
 
Content Management & Page Structure - Best Practices for Structuring Content ...
Content Management & Page Structure - Best Practices for Structuring Content ...Content Management & Page Structure - Best Practices for Structuring Content ...
Content Management & Page Structure - Best Practices for Structuring Content ...
 
Lesson 3 - IA for web
Lesson 3 - IA for webLesson 3 - IA for web
Lesson 3 - IA for web
 

More from Patty Baraibar

More from Patty Baraibar (9)

somali_callvolume_vri
somali_callvolume_vrisomali_callvolume_vri
somali_callvolume_vri
 
vri_callvolume_byclinic
vri_callvolume_byclinicvri_callvolume_byclinic
vri_callvolume_byclinic
 
invitation_template1
invitation_template1invitation_template1
invitation_template1
 
talentshow_concept1
talentshow_concept1talentshow_concept1
talentshow_concept1
 
concept2
concept2concept2
concept2
 
maria_retirement_presentation
maria_retirement_presentationmaria_retirement_presentation
maria_retirement_presentation
 
criticalmeasures_xculturalprogram_v1
criticalmeasures_xculturalprogram_v1criticalmeasures_xculturalprogram_v1
criticalmeasures_xculturalprogram_v1
 
viewpoints_red_gray_v2
viewpoints_red_gray_v2viewpoints_red_gray_v2
viewpoints_red_gray_v2
 
lal_red_gray_v5
lal_red_gray_v5lal_red_gray_v5
lal_red_gray_v5
 

Purpose of the Website

  • 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.