Best practice for web editors

Read our best practice guidance for editing web pages on the Sussex site to give our users a consistent and intuitive experience.

Why best practice matters

Web best practice encompasses all the things editors and developers should do to make websites easy to discover and use.

People look at websites on various devices, in a variety of settings and across networks ranging from lightning-quick to dial-up speed. Our students and colleagues are no different.

Accessibility

The term web accessibility refers to making sure our website can be used by everyone – regardless of any impairment or disability. We must strive to make our website perceivable, operable, understandable and robust.

Find out more about accessibility.

Our web pages should have:

To cater for everyone, our web pages also need to be:

Branding

Consistent branding lets people know they are on the Sussex website and assures them they’re reading reputable content.

Find out about the Sussex brand and see our brand guidelines for designers.

Colours

Our brand colour palette has been carefully defined and curated to meet colour combinations. In many cases, the combinations are AAA-compliant.

We have also considered accessibility with our web page components. These should be used consistently across our site.

Colour should not be relied on to convey meaning (such as green for sport or sustainability), because colours mean different things to different people and some users may be colour-blind.

Links

Clear links and calls to action help direct users to the right content on our website.

All links are URLs – commonly known as web addresses or web links.

Be descriptive

Don’t use an actual URL as the text for a link.

Rather than writing out the web address in full on the page, describe the thing you’re linking to. For example, “Visit the .”

There’s no need to enter a URL alongside a link for print purposes – it will automatically appear in print.

Avoid “click here” or similar because it:

  • is meaningless and can affect the performance of screen reading software
  • is not appropriate if a web page is printed out
  • will affect search engine optimisation as it will be ignored by major search engines
  • assumes the user is using a mouse to follow links – link text should be device-independent.

Hyperlinks should be unique within content – try to avoid the same link text. But make sure they are visually consistent – don’t change the style of links (for instance, using bold).

Email links

Use the full email address when providing an email link.

Write J.Smith@sussex.ac.uk rather than John Smith.

This gives better results when a page is printed out and allows someone to copy and paste the address.

Calls to action

A call to action (CTA) is typically embodied using a button or navigational item.

The purpose is to drive users to complete a task they already know about.

Start with a verb and stick to two or three short words.

You can, for example, see CTAs being used on our homepage.

Go to homepage

See our web components for CTA items.

Document links

The File List tool in the WCM provides accessible links to documents, showing the file type and size in square brackets.

For example, Download our terms and conditions [PDF 2MB]. Users want to know what they’re downloading beforehand, especially if they’re using mobile data.

Position your cursor on an empty line and open the File List to select a pre-loaded file, such as a Word document.

If you’re linking to a document held on another part of the Sussex website, don’t copy the file and upload it to your own WCM file list. Link to the page where the document is held.

Deleting a document link

If you delete a link to a document, also delete the document from the WCM. Just deleting a link won’t clear the document from our search index, meaning the document could be found by anyone searching for it. If you need a copy of the document, save it on a network drive.

Entering URLs

When typing URLs they should be lower case.

If you’re creating URLs in our system, separate words with hyphens.

For example: www.sussex.ac.uk/study/international-students/information-by-country

By doing this, rather than having a long string of letters, search engines will be able to discern keywords.

Opening URLs

The default within the WCM is for links to open in the same window. Stick to this.

Although there are some circumstances in which we’d want to open a new window, users will just use the back button to return to a previous page.

File sizes

Pictures should be cropped to the dimensions for their intended purpose. Check our components list for developers for the dimensions you need. You can crop pictures using Photoshop and "export for web" under saving options.

Keep files such as PowerPoint presentations as small as possible by avoiding large images. When saving, you can sometimes opt for a compressed version.

Video

Videos on our website should be hosted on Vimeo. This platform optimises videos so they play quickly when selected.

PDFs

Portable Document Format files serve a purpose where something needs to be printed out (such as an invitation), stored on record (like terms and conditions) or referred to in a scenario where someone isn’t browsing the web (such as a map or instruction sheet).

Most of the time, however, PDF content should instead be reproduced as HTML web content.

This is mainly because PDFs are:

  • unresponsive – they don’t change size or shape to fit browsers and devices, meaning lots of zooming and scrolling
  • not designed to be read on a screen, leading to strain on the eyes and brain
  • treated differently by browsers, apps and devices
  • viewed in isolation from the navigation of their hosting website
  • not as easy to update and might have been created by an agency
  • harder for search engines to crawl and index
  • difficult to measure and analyse in terms of usage.

PDFs also interrupt the natural flow of using a website; you have to wait for the reader to load before you see the content.

Ask yourself: when was the last time you were pleased to download a PDF?

If you need to upload a PDF, see advice on optimising files for accessibility.

Search engine optimisation

A whole industry exists around search engine optimisation (SEO).

SEO focuses on making sure certain web pages rank highly in the results you see when you search for something using Google, Bing or a similar search engine.

Use keywords

Make sure your content makes use of key terminology. Think about what people are likely to search for and try to include these words in your content – especially in headers.

Keywords should be relevant to the content so search engines can rank a page according to those keywords.

More focused keywords will get better results. For example, “research” is quite a broad keyword; something more focused, such as “sustainable energy systems research” will get better results.

If you already have access to tools such as Google Analytics, you can find out what keywords are being used to reach your pages. If not, contact us.

Make sure the title of the page uses key terminology. For good usability, the title should reflect what is on the page. The title will appear in search results and is a key ranking factor for Google and other search engines.

When creating pages, make sure the URLs contains keywords. They should be intelligible but not too long and reflect the content.

Links to your site

Get as many links from external sites as possible to your part of the Sussex site. If a site has a high ranking itself (such as the BBC) then that link will be seen as more important and help increase your ranking. Getting links on social media sites will help.

Make sure your content is constantly updated, engaging and fresh. News, events, blogs or social media feeds are a good way of doing this.

Internal links

Cross linking to important pages within our own website can help optimisation. It helps a search engine ascertain that our site has a good structure.

The navigation menu at the top of this page, and the “You might also be interested in” links at the bottom, are examples of this.

Metadata

You should add a meta description to each page. Do this in the WCM.

A meta description is a short sentence that explains what someone will see if they select your page from search results. It’s shown underneath the title and URL of a page in a list of results.

Descriptions should be no more than 160 characters in length, including spaces. If you go over this, a search engine may display random parts of your page instead and use ellipses (...) to join them together.

Metadata is not a ranking factor. However, a good description may entice someone to “click” on your page (and boost your “click-through rate”).

Page structure

Follow good standards in the mark-up of each page, in line with our standard page structure.

Nest headers appropriately and never bold or self-style them. Bulleted lists and plain English also demonstrate a user-centered approach.

These things help search engines crawl our site and improve navigation for users.

Think about the user

Search engines decide where pages rank based on what users are looking for.

Write and structure pages based on what is useful for people and you’ll stand a better chance of appearing in search results.

What to avoid

Search engines such as Google may prefer to rank other sites if they detect:

  • keyword stuffing, where you overload a page with keywords
  • irrelevant keywords, where you try to add popular generic terms or celebrity names
  • links to dubious websites
  • links that have been paid for.

Duplication

Duplicate content is where two or more pages share the same semantic theme. This is not only confusing for users in search results but damaging for us.

If you’re starting a new project that includes web pages, check our website to see if the content already exists.

Good navigation

When people use a website, they “learn” behaviours that help them assess what they’re likely to expect when they select a button, shaded block or menu item.

For this reason, all our external navigation elements and internal navigation elements should be consistent.

This means using:

  • the same colour on navigation blocks so people quickly identify them as having a particular purpose
  • navigation blocks to send people to other pages on our own site, not other websites
  • highlight or feature boxes to pull out important information, not everything
  • call-to-action buttons to drive people to complete a task
  • descriptive links for downloads, with file sizes specified so users know their data usage.

Avoid signposting to design elements within body text (such as, “Scroll down,” or “See left menu”). What people actually see depends on the device they’re using, the orientation of the page and templates managed from a central database.

See the correct components for sections of the Sussex website. They have been designed to be accessible, responsive and on-brand.

Navigating text

How people navigate the text on a web page is just as important as how they get to it.

Headings

All headings should be in sentence case

The title of every Sussex web page is an h1 heading. Formatted automatically by the WCM, this is the first heading on your page.

The main sections of the page that follow should be formatted as h2, with sub-headings as h3 (and sub-sub headings as h4).

Aim for at least one line of body text between headers.

Only use heading styles for headings. Don’t bold text instead.

Paragraphs

Ensure your text is surrounded by the HTML code for a paragraph, rather than line breaks.

If you find the spacing on your page looks odd, try:

  1. placing your cursor at the end of the last line of the paragraph above where the odd spacing starts and press the delete button
  2. the text below will move up to sit alongside it (you may need to press delete a couple of times before this happens)
  3. keeping your cursor in place, press the enter button – this should create a new paragraph, properly spaced from the one above
  4. repeat the process until your page is properly spaced out.

Lists

Using lists (where appropriate) can greatly enhance the reading experience of our users.

There are two list tools in the WCM toolbar: unordered (mainly bulleted) and ordered (such as numbered). This page section uses both examples.

To use the list tool, make sure each line of your intended list is spaced a paragraph apart. You can then select the entire list content and click on the appropriate icon on the toolbar. Your content will be formatted in a list.

Accordions

A list of accordions, which show information when you select one, can help present a lot of content.

They should be used where someone only needs to view some of the information on a page.

Don’t use them if someone needs to see all the content on a page – opening each accordion is another step for a user. .

Find out about our external accordion components and staff page accordions.

Mobile-friendly web pages

Many people now look at web pages on a mobile device. About half the audience of our website browse on a phone or a tablet.

Search engines, in particular Google, rank websites based on their mobile performance. This is called “mobile first” and means we must build web pages based on how they will primarily look on a mobile device, not a desktop computer.

Our web components have been developed to respond and perform according to different devices. You m