UCL FACULTY OF ARTS & HUMANTIES (AH)
UCL FACULTY OF SOCIAL & HISTORICAL SCIENCES (SHS)
UCL SCHOOL OF SLAVONIC & EAST EUROPEAN STUDIES (SSEES)
Web Toolkit
September 2013
Website Audiences
External












Prospective students
Research partners
Academic collaborators
Wider academic community
Sponsors
Individual philanthropists
Alumni
Media and press
Prospective staff
Local community
General public
Schools
Internal
 Current students
 Staff
 Wider UCL
How Users Read on the Web
Typically they don't read very much, cherry-pick the information and concentrate narrowly on what they
want.
Scanning text is an extremely common behaviour with users reading something like just 20% of the text
and often only the first 2 words of a paragraph.
The dominant reading pattern looks somewhat like an F and has the following three components:
• Users first read in a horizontal movement, usually across the upper part of the content area
• Next, users move down the page a bit and then read across in a second horizontal movement that
typically covers a shorter area than the previous movement
• Finally, users scan the content's left side in a vertical movement.
Above the Fold?
Above the fold simply means viewable without further action. During the web's first years, users often
didn't scroll web pages at all.
Today, users will scroll. However, you shouldn't ignore the fold and create endless pages for two
reasons:
• Long pages continue to be problematic because of users' limited attention span. People prefer sites
that get to the point and let them get things done quickly. Besides the basic reluctance to read more
words, scrolling is extra work.
• The real estate above the fold is more valuable than content below the fold for attracting and keeping
users' attention.
The fact that users scroll doesn't free us from prioritising and making sure that anything truly important
remains above the fold.
Hotspot map of
the general ‘F’
pattern of eye
movement
Content Strategy
Carrying out a content audit will enable you to identify which content to keep, lose, rewrite or create.
Also think about the types of content required which might include images, video etc.
Recognise that some content shouldn't be online
By putting everything online, important information can get lost amongst much less useful content. Navigation menus become
overly long and searches return irrelevant results.
Think about your audience
Before adding any content, always make sure that it is important to the audience you are writing for. What information is it
giving them? Is it adding value to their experience of the website? Is it clear, concise and easy to read?
Make your content is easy to act on
Once you've drawn your reader in, what do you want them to do now? Apply online? Register for an event? Get in contact?
Whatever the action is, make sure that it is clear to the reader, and easy for them to do it. Never leave them at a dead end, for
example by saying ‘Contact us for details’, but then not providing contact details.
Remember the inverted pyramid format:
1. conclusion 2. explanation 3. details
Always consider:
• Does this page cater for the first time visitor?
• Are the benefits of accessing this page clear?
• Is key information clearly in sight (at top)?
Quick Tips – URLS
Before You Start
Make sure you follow these simple rules and ensure your URLS are:
• Permanent and unique
• Consistent and hierarchical
• Meaningful and readable
Also always be sure that URLS are:
• All lowercase
• Use hyphens not underscores
• Concise and clear
For example, the original URL below could be shortened right down in the following way and still be all of the above:
www.ucl.ac.uk/faculty-of-xyz/about-the-faculty/index.php
www.ucl.ac.uk/xyz/about
Some Thoughts on URLs
“URLs…are the one universal syntax of the web. Don’t take that for granted.” (http://warpspire.com/posts/url-design/)
“If the URL looks like garbage people won’t click it.” (http://www.not-implemented.com/urls-are-for-people-not-computers/)
“It is the duty of a Webmaster to allocate URLs which you will be able to stand by in 2 years, in 20 years, in 200 years.
This needs thought, and organization, and commitment.” (http://www.w3.org/Provider/Style/URI.html)
Quick Tips – House Style & Content
UCL
UCL is always UCL; the only exception is the UCL address (University
College London, Gower Street, London WC1E 2BT).
Departments, Faculties, Schools
Use an ampersand in all UCL subdivision names and always use the
following format:
UCL English
UCL Spanish & Latin American Studies
UCL Faculty of Arts & Humanities
UCL School of Slavonic & East European Studies
Only capitalise the words ‘faculty’, ‘department’ or ‘school’ when used in the
name of a specific example of one of these.
.
E.g. ‘The Department of Mathematics offers several degree programmes.
Staff in the department specialise in...’
Further Reading
 Building and editing your website
https://www.ucl.ac.uk/isd/staff/websites/silvaCMS/structuring-your-website/
 Digital Communications (Writing for the Web)
http://www.ucl.ac.uk/cam/communications/digital-comms/
HOUSE STYLE
(i.e. NOT)
UCL, university,
institution
college, College
combined-studies
joint-degrees, combinedhonours
single-subject
single-honours
degree programme
course
courses (for units)
modules
A level
A-level
IB Diploma
International
Baccalaureate
coursework, fieldwork
course work, field work
international student(s)
overseas student(s)
website
web site
www.url.com
http://www.url.com
Master's degree
masters Degree
first-class Bachelor's
degree
First Class Honours
Degree
ACCESS course
access course
BSc degree
BSc Degree
the civil service, the
military
the Civil Service, the
Military
BA, BSc, MA, PhD
B.A., BS.c., M.A., Ph.D.
i.e., e.g.
ie, eg
Dr A Smith
Dr. A. Smith
CU (for Course Unit)
c.u.
Quick Tips – Social Media
'Social media' is a term that refers to methods of allowing any users to publish content
online. This can include:
• Posting news, events, research, videos, audio or images onto forums or social
network sites
• Writing and commenting on blogs
• Collaborating on an online project (e.g. a Wikipedia article)
This sharing of information, and interacting with other users, can help:
UCL Examples
Facebook
The Bartlett
Twitter
UCL Engineering
• Share information immediately and to a wide audience
• Reach different individuals not using traditional methods
• Create online communities of collaboration and trust
YouTube
There are existing joint faculty channels for: YouTube, Soundcloud and LinkedIn
(SHS) and (AH)
Flickr
The central UCL team uses Twitter and Facebook, and offers its own blogging
service, which UCL departments can take advantage of.
Further Reading
 UCL Social Media Guidelines and Tutorials (website)
http://www.ucl.ac.uk/social-media
 UCL Visual Identity
http://www.ucl.ac.uk/visual-identity
 Digital Communications (Social Media in Comms)
http://www.ucl.ac.uk/cam/communications/digital-comms/
UCL Dutch
UCL News
Soundcloud
UCL AH and SHS
LinkedIn
UCL History
Blogs
SSEES Research Blog
Quick Tips - Search Engine Optimisation (SEO)
All major search engines such as Google, Yahoo and Bing show, rank and return search results based on what the search
engine considers most relevant to users. Therefore it’s important to ensure that your webpages are easy for search engines
to find and, ideally, rank and return so that they appear towards the top of the list of results.
Search Engines DON’T Like
Search Engines LIKE
• Links like 'click here', or 'more'. Instead use text for
linking e.g. 'Recent Publications', the Speech given by Prof
Teasdale. (search engines ignore words without 'meaning'
such as 'here‘)
• Simple ID names
• Full URLs – instead, describe the URL and link to it. e.g.
UCL Centre for Therapy
not http://www.ucl.ac.uk/centre-for-therapy
• Titles on every page - don't use Heading style instead
• Italics – Also, copy in italics is difficult to read for people
with certain types of dyslexia
• Hyphens in ID names not underscores (e.g. lectureseries not lecture_series)
• Heading style for important info –Avoid sub/ subsub
heading styles.
• Underline - it implies it's a link
• Keyphrases – think of the words users would type into
Google and use them for Headings, links etc. on relevant
pages.
Further Reading
• Bullet points for lists of links, rather than 'embedding‘ them
in text
 SEO For Your Web Pages
http://prezi.com/u7i1uawxuovs/seo/
• Alt text (title) on images – giving images a proper name
means they can be indexed
 FAQS (SEO)
http://www.ucl.ac.uk/isd/staff/websites/silvaCMS/structuringyour-website/faqs
Central Resources
SILVA
Communications & Marketing Toolkits
Manuals
http://www.ucl.ac.uk/cam/toolkits/
http://www.ucl.ac.uk/isd/staff/websites/silvaCMS/training
Publications & Marketing (PAMS) Advice on Department
Websites
Building & Editing Your Website
http://www.ucl.ac.uk/isd/staff/websites/silvaCMS/structuring-yourwebsite
http://www.ucl.ac.uk/prospectivestudents/pams/websites/departments
Publications & Marketing Style Guide
Silva A-Z Guide
http://www.ucl.ac.uk/isd/staff/websites/silvaCMS/a-z
http://www.ucl.ac.uk/prospective-students/pams/auditdesign/style-guide
External Source Codes (Widgets)
UCL Visual Identity
http://www.ucl.ac.uk/isd/staff/websites/silvaCMS/structuring-yourwebsite/external-sources
http://www.ucl.ac.uk/visual-identity
Editing Responsibilities
http://www.ucl.ac.uk/isd/staff/websites/silvaCMS/responsibilities