- Home /
- Web Team /
- Training & guidance /
- Web style guide
Web style guide
The Web Style Guide sets out how we should phrase, punctuate, spell and capitalise words and phrases on the website.
This guide supplements the University’s House Style Guidelines, addressing web-specific issues that aren’t covered there.
- Page titles & URLs
- Headings & sub-headings
- Capitalisation
- Downloadable files
- Images
- Links
- Tables
- Emphasis
- Web-specific vocabulary
Page titles & URLs
Choose a meaningful title and main heading for your page and bear in mind that these will be displayed in search engine listings. Avoid puns or ambiguous terms.
Every web page must have a unique title that is meaningful to the user. Because people can visit a page out of context – directly from a search engine, for example – the page title must be meaningful, even when viewed in isolation.
The title also influences how search engines list our web pages and what a user will see when a match is made to their search. Meaningless or blank titles may result in users not finding your web pages.
Your choice of title is a factor in the ranking your page will receive from search engines so make sure your title is specific to the content.
Remember that your headings and labels should sound friendly and inviting.
 |
 |
|---|---|
| Accommodation | Student accommodation on the Edinburgh Campus |
| Applications | How to apply for Postgraduate courses |
| Information for businesses | How Heriot-Watt can help your business |
The title you choose will form the URL of that page. You can change the URL but it should still match the title as much as possible.
Headings & sub-headings
Readers can arrive at your page directly from a search engine, so it is important that your text and layout provides clear navigation cues and relevant information.
There are 5 headings available in the main body of the page:
These are hierarchical: heading 1 is the highest level and heading 4 is the lowest level. Page titles are given heading 1 status automatically by the CMS.
The other headings should not be used for visual effect: they are a way of categorising your content on the page into topics and sub-topics and must be used hierarchically. For example: Heading 2 should be used to denote sub-topics of the content on the page; heading 3 is used to denote sub-topics of content under heading 2; and heading 4 is used to denote sub-topics of content under heading 3; and so on
Another way to think of nested headings is in the way you might use numbers to divide up a report:
| Section/topic number | Heading style |
|---|---|
| 1 Main topic |
heading 1 |
| 1.1 Sub-topic |
heading 2 |
| 1.1.1 Sub-sub-topic |
heading 3 |
| 1.1.1.1 Sub-sub-sub-topic |
heading 4 |
Capitalisation
Too many capital letters makes reading on-screen more difficult. Avoid unnecessary capitalisation of text. Also avoid writing words entirely in upper case except for brand names or acronyms/initialisations where they would usually occur, eg, SCHOLAR, SUPA, UCAS, MACS, etc.
Titles, headings and subheadings should be expressed in sentence case: only the first letter of the first word and any proper nouns and names should be capitalised. (Schools, services, departments are classed as proper nouns. Job titles are only classed as proper nouns when used with the job holder’s name.)
|
|
|---|---|
| Entry Requirements For International Students | Entry requirements for international students |
| How to Apply for Postgraduate Courses | How to apply for postgraduate courses |
| Contact the school of management and languages | Contact the School of Management & Languages |
Downloadable files
Bear in mind that not all users have the relevant software to access downloadable files. Rather than relying on the user to download PDFs for more information, you should aim to feature all relevant content in web page format instead.
Downloadable files can still be posted in addition to the web page content and in cases where it is not practicable to make web pages with the information (eg for a 100-page policy document), or where the files offer supporting information that the user does not necessarily need to have to understand the web page content.
Downloadable file attachments – including any forms, brochures, policy documents and maps – should not exceed 10MB. PDF files can be reduced in Adobe Acrobat (Document -> Reduce file size).
PDF files should also contain meaningful and accurate metadata (title, author, subject, keywords). These can be edited in Adobe Acrobat by accessing the document properties (Ctrl + D or File -> Document properties):
- Title should be the same as the file name.
- Author should be Heriot-Watt University.
- Subject and keywords are optional.
Never add a PDF if it simply duplicates the content on the page. There is a “Download PDF” link at the bottom of each page that allows users to print the page off as a PDF.
Images
Avoid the use of graphics that are not relevant to the information on the page or do not add any additional information.
Large graphics will cause pages to download slowly. You might not notice the difference at work, but using a home internet connection it could take a lot longer. Make sure your images are properly optimised for the web (in Photoshop, "Save for web" or Ctrl + Shift + Alt + S).
| Image type | Width (px) | Height (px) | Max. file size (rec'd) |
Example |
|---|---|---|---|---|
| Standard page | 200 | 112 | 24kb |  |
| News/event image | 800 | 450 | 192kb | See: Astronaut touches down in Edinburgh |
| Staff profile | 135 | 180 | 32kb |  |
| Student / graduate profile | 160 | 200 |  |
|
| Landing page column* | 213 | 90 | 16kb |  |
| Promo* | 50 | 50 | 4kb |  |
| Block* | 211 | 90 | 16kb |  |
* These images are usually set by the Web Team or site approver.
Images should always be given a text equivalent (“alt text”) that describes what the picture is showing. When writing the text equivalent, it is useful to imagine reading the document aloud over the telephone: how would you describe the image to the listener?
See the section on Web design for more information on the use of imagery, video and multimedia content online.
Links
There are three types of link:
- links to pages on hw.ac.uk (internal links)
- links to other websites (external links)
- email address links
Links can be added “inline” (in the body of the text or as a “See also” (in the right hand column of the page. Any links added or referred to in the body of the page or referred to, should also be added to the third column.
Internal links (links to pages on hw.ac.uk)
All links in text need to be explicit and should tell readers where they will end up if they click on the link. It should be as short as possible, but never hyperlink the phrase “click here”. Not only is this phrase device-dependent (it implies a pointing device) it says nothing about what is to be found if the link if followed.
Visually impaired users often use screen readers, which can read links out of context, so the link should convey where it goes. Be direct, consistent and make sense.
|
|
|---|---|
| Click here for an application form. | Complete the application form online |
| Click here for case studies. | Read our case studies. |
If more than one link on a page shares the same link text, all those links should point to the same web page. Being consistent in this way improves the page design as well as accessibility.
External links (links to other websites)
External links should display the website title (not the web address). This provides valuable information for screen readers and search engines and makes more sense to users when the description pops up as the cursor hovers over the link.
|
|
|---|---|
| Visit www.ukvisas.gov.uk for more information | Visit the UK Border Agency (UKBA) website for more information. |
Avoid “deep-linking” (linking to pages deep within a website). Websites are continually being improved and redeveloped, meaning that pages will be moved around or deleted. Try to link to the homepage wherever possible and remember to check links periodically to make sure they are still valid.
Email addresses
Email address links should be formatted with person’s name used as the link text and the email address used as the alt text, so that they can see the email address when they hover over the link.
Avoid writing out personal email addresses as these can be picked up easily by spammer bots that crawl the web looking for email addresses.
Wherever possible, generic email addresses should be used as the main contact address for a group, team or department wherever possible to avoid using individual employees’ names online. IT is responsible for setting up generic email addresses, such as webeditor@hw.ac.uk and registry@hw.ac.uk, which can be accessed by groups of people.
|
|
|---|---|
| Contact j.bloggs@hw.ac.uk | Contact Joe Bloggs Contact the Web Team |
Tables
Tables are a useful tool for presenting information charts on your webpage, e.g. class timetables or other structured data. Tables should never be used for visual layout of regular text and images; they should only be used for tabular data as below.
Emphasis
Bold should be used for emphasising important text, but should only be used sparingly. When read by a screenreaders, bold text is “shouted” for emphasis, so make sure you don’t embolden whole sentences or paragraphs. Your heading structure and writing style should be enough to emphasise the text that is important (remember that important information should be put first).
Underlined text generally indicates a hyperlink and it is misleading if used for emphasis.
Italic text can be difficult to read on screen and is reserved for image captions (which are styled in larger text, to make them easier to read).
Web-specific vocabulary
- Online not on-line
- Email not e-mail
- Website and webpage, not web-site and web-page or web site and web page