Purpose of the Website
Download as DOCX, PDF0 likes209 views
The document provides guidance on planning the architecture and structure of a website. It discusses several techniques for organizing content, such as card sorting, content inventories, site maps, and paper prototyping. The key steps outlined are to understand the goals of the website, gather resources, organize content hierarchically at both the top and page levels, assess the work based on user profiles, demonstrate the plan, get approval, and then move forward with development. Content is emphasized as the starting point, with recommendations to keep it concise and focused on the user experience.
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.