Effective departmental homepages

Introduction and context setting

Effective departmental homepagesWeb Office, March 20121Introduction and outlineImportance of a good homepage

How to build good homepage content and avoid common problems

What well do next to help you, and what you can do to help yourself

Importance of a good homepageHomepages in contextCompetitive environment fees etc.York, more than most of its competitors, relies on department sitesNo central course listing means prospective students HAVE to use dept. sitesEnhancing departmental marketingInTandem work on messages etc. and brochure and homepage changes arising from thatRather than waiting to InTandem-ise everyone, seemed prudent to offer some general guidanceFocussing on whats importantKnow your audienceProvide content targetted to that audience

How to build good homepagesMany different styles of homepageMany different types of departmentSome core needs, and certainly some core web dos and dontsTop 10 tips to build good pages

What well do to help

2

What were not trying to doPhoto credit: djwudi via photopin ccWere not trying to make everyone the sameWere not telling you exactly what to doAll departments are differentYour homepage requirements will varyThese are guidelines onlyThe key thing is that we encourage you to think about it and bear in mind some best practices

What we do want to achieve:Higher quality content and design, which leads to:Better outcomes for departments (applications, attendance at events etc.)Better search rankingsBetter engagement with the Web OfficeWe can help you build better sites, but we dont know who to talk to

3

A word about SEOChasing keywords is unproductiveBetter to focus on website optimisation than search optimisationGet the former right, the latter will follow4

Not specific, but based on real sites

5Top 10 tips for better homepages10 specific, actionable tips which will improve your pagesForm the basis of a print guide well distribute laterAlso form the basis of a report well complete for each department by the end of next weekMost are not CMS-specific, but implementation may vary on other platforms6

1. Make the most of image bannersNot so good:Generic pictures of campus or from stock photo sitesNo information about what were looking atA couple sized incorrectlyToo many most people will never see them allNot telling us much about the department just decoration71. Make the most of image banners

Not so good:Generic pictures of campus or from stock photo sitesNo information about what were looking atA couple sized incorrectlyToo many most people will never see them allNot telling us much about the department just decoration8

1. Make the most of image bannersNot so good:Generic pictures of campus or from stock photo sitesNo information about what were looking atA couple sized incorrectlyToo many most people will never see them allNot telling us much about the department just decoration9




1. Make the most of image bannersMuch better:Show actual departmental activityInclude specific messages and facts to back them upLink to further informationIllustrate key messages tell a story about the department3 or 4 key pictures is plenty

13


14


15


16

2. Write for the webBad example:Abbreviated dept. name; you might know what it means, but lots of people wont!Single block of textNo links to details of specific RAE claimRead more badly named link

Better example:Remove department name not neededMuch easier to scanLinks to supporting informationLink to full research content makes sense when read alone (web users scan links on the page they should make sense in isolation)

Always ask yourself these questions, and check your page is communicating the answers:Who are our audiences?What are our USPs?What are the key messages we need to communicate?

17

2. Write for the webBad example:Heading isnt descriptive enough (could mean as a student, for example)The introductory text isnt necessaryRepeating vacancy for is wasteful and makes it harder to scan the jobs available

Better example:Descriptive headingNo superflous words, just the titles

In general:Say the least possibleDont make users think if its job vacancies, say so18

2. Write for the webBad example:Heading is fine, butStudents call degree programmes courses, so when we use a different word it becomes harder for them to find what theyre looking forWhy start with About us? Is that the most important link to a prospective student?Careers on its own, even within a Study at York box, could mean get a job rather than Jobs you might get

Better example:Same headingJust two links one UG and one PG: no possible confusion about where to go, and gets them to a sub-homepage which can present a whole range of persuasive contentUses very brief descriptive text to elaborate on what lies behind the link (but doesnt link straight there we want them to see the landing page)

In general:Always use the language of your audienceLink to landing pages which give more context and orient users in your site better when appropriate19

2. Write for the webBad example:Join us could mean as student, as staff, for an eventWhy DVS whats DVS?Athena Swan whats that? (and its capitalised wrong)Social media jargon to many people (well come back to this one later)

Better example:Our research instead of trying to use the dept. nameSupporting women in science instead of Athena Swan: tells the reader what it is aboutJob vacancies: clear and to the pointNews and events have icons; will come back to those laterA couple of extras Alumni and Meet our students. Important content deserves highlighting.

In general:Readers should be able to scan the headings and know if theres anything of interest and get a sense of what youre about

20

2. Write for the webBad example:Click here and read more give no clue about where they point to when read in isolation

Better example:Even if the user doesnt read anything else on the page, they would know where these links go

In general:Web users scan links, so they should make sense when read in isolationWeb browsing is active; people look for the next thing to click, so help them find something interesting

21

3. Highlight key links within contentBad example:Alumni section only linked from navigation

Better example:A whole content area in the page makes it much more visible, and allows us to say something about the section

In general:Dont rely on left-hand navigation for core content; many users wont see itWhen we run usability testing, we frequently see people missing links in the left-nav; always provide contextual links in the body of the page(NB. This doesnt mean we should scrap the nav bar completely its key use is getting around the major sections of the site when moving back up the hierarchy)

22

4. Encourage scrollingBad example:Full width content creates vertical stops when scrolling the page users may think theres nothing more to see and not scroll down

Better example:By using narrower content spaces and varying their length, the page encourages vertical motion and discovery of everything on the page

In general:Try to encourage scrolling by avoiding the use of full-width content blocks235. Provide an informative welcome

5. Provide an informative welcomeBad example:Repetition of Department name in main heading, and again in the text, is unnecessary and fills spaceThe first sentence doesnt add anything of valueThe second paragraph is too longClaims arent backed up with facts (high quality teaching, world class research etc.)Click here at the endNo attribution who is the picture of?

Better example:Judiciously pruned text sticks to core messages but still sounds personalText formatting emphasises key phraseLinks point to supplementary information to back up claimsFinishes with a call to actionIncludes name and position at the end, making it clear what weve been reading

In general:Dont feel obliged to have one at all, but if you do then apply all the standard writing for the web guidelines especially carefullyKeep it very short 50-60 wordsMake it sound personal24

6. Use news effectivelyBad example:Headlines are not very informativeHeading as a link is inconsistent with other sections on the pageOnly one image makes the box unbalancedStories are old and stale

Better exampleStories are more recentEvery story has a small thumbnail to give visual interestHeadlines are more informative summaries of the storiesLink to more news stories is more prominentEnabling an RSS feed allows interested readers to get automatic updates

In general:2 or 3 stories should be enoughUse thumbnail images (or dont one or the other)Think about what news stories you publish who are they for? Always remember your audiencesUse the RSS feed header to help people keep upProvided a link to your news archiveDont let them go stale25

7. Promote your events

Worst case:In the worst case scenario, we could have no events listed, just a heading. Hopefully obviously this doesnt look good, but we see it often nonetheless.

Bad example:Event names are undescriptiveThe first description is too longThe second description loses useful information (what the seminar is about) amongst filler + see below for details makes no senseThe third uses abbreviations people wont understandHeader text being a link is inconsistent with the rest of the page

Better example:Event names now communicate far moreDescriptions are short and supplement (not repeat) information from the titleLinking more prominently to the full events page helps people find more

In general:Never let it be empty (nothing coming up? Remove the listing)Link to a full list and archivePut the most interesting information in the headingKeep teaser text short but informativeUse the RSS and iCal header

26

8. Put the most important stuff firstBad example:Study links are two-thirds of the way down the page

Better example:Study links are immediately following the image banner and much quicker to find

In general:Structure your page so that the most important content is at the top of your page (ie. the content the largest proportion of your audience is looking for)

27

9. Add good metadataBad example:Not including a meta data description means search engines have to work it out for themselves

Better example:Provide your own summary of what your site is about and search engines, and thus people, will get a much better first impression

In general:Descriptions are easy to add and well worth the troubleFocus on key messages and not waffleNo more than 155 characters (max Google snippet length)Keywords meta data can help Yorks internal search engine if people might be searching for terms which arent on your page (eg. abbreviations of your name), but theyre not used elsewhere28

10. Invite engagement on social mediaBad example:One full name, one an app-style iconTwitter logo poor qualityNo calls to actionSocial media is a bit jargon-y

Good example:Consistent with links to University accounts elsewhere on the site (eg. social media page, study site, student site)Encourages behaviour with calls to actionNo longer includes a header since it was superflous

In general:Use calls to action to encourage next steps (do this, get in touch, rather than this is, contact details)Check to see if the University has a standard way by checking corporate content29

Nothing here that departments cant do themselves (sometimes with a little set-up help from the Web Office)Much, much better than where we started (even though the changes in isolation may have seemed minor)

30

Information-denseDont have to click many links to learn a lot about the departmentInteresting and engagingEasy to scan and interact withFocused on key messages about teaching, research and departmental activityWorth spending the time on reviewing and rewriting content31

A guide to the 10 tipsA printed guide to the 10 tips to take away todayAlso available online, along with full size views of the flawed and improved pages

32

Departmental homepage reportsComing in the next week to HoDs and attendees here todayWill focus specifically on the 10 areas discussed today

Web Office available to help you make changesWeve not shown anything that isnt already availableWeve not shown anything that cant be done by the department (with some small initial setup by the Web Office in a few cases)

Dont go to work directly on your homepageCreate a hidden page and work on thatWe can help if you dont know how!33

Who runs your homepage?We quite often dont know who runs dept. sites, so please tell us

What works best?One person in charge, with deputies in their absenceApplies across whole websites, but especially important for homepages

Too many cooksMassive training overheadMassive support burden for usHuge inefficiencies in maintaining a sitePoorer quality output at the end of it

34Homepages are important!

Following some simple tips and taking time over your page will make it better

Well send you a report about your homepage and provide support from the Web OfficeSummaryGetting homepages right matters: its worth spending time onOur guidelines should help (but theyre not a straightjacket)

35Fill in your feedback sheet for this sessionTell us who runs your site (wiki.york.ac.uk)Read and act on our reportWell help you apply changesReview how you run your site and how effective that system isWere happy to adviseNext actions for you36?Any questions37

Documents

Effective departmental homepages