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 WCAG 2.1 AA-compliant 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 Centre for Global Health Policy.”

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. Read about accordion usability.

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 must not change them.

Accessibility

Accessibility means people being able to use our website regardless of any impairment.

Our web components have been developed to meet accessibility guidelines and should be used as intended.

Checking web pages for accessibility

You can check web pages to see if they meet WCAG 2.1 accessibility criteria.

You will need some specialist software:

  • Apple VoiceOver is freely available on all Apple devices
  • NVDA screen reader can be installed on a Windows computer – you can request this through ITS
  • Paciello group Colour Contrast Analyser (for testing downloadable documents) can be installed through a request to ITS.

See a WebAIM guide to using NVDA or a complete guide to Apple Voice Over.

Screen readers

Using a screenreader, you can identify if there are any issues affecting the user experience of a visually-impaired user.

To do this:

  • go to the page you want to test
  • open the screen reader
  • attempt to navigate the page using both the mouse and keyboard commands (Ctrl+Alt+Arrows on Mac; just the arrow keys on Windows).

To navigate tables an extra step is required on Apple devices – use command Ctrl+Alt+Shift+down-arrow to enter the table and the command Ctrl+Alt+Shift+up-arrow to leave the table.

Colour contrast

Web pages on the Sussex site should use our accessible components, meaning colour contrast issues should be minimal.

On any web page, you can copy its URL and paste it into the input box of the WAVE web accessibility evaluation tool.

This will give you an immediate accessibility report. The Details tab on the right of the screen will show you any issues with colour contrast. The tool will also flag other accessibility issues your page may have.

Keyboard navigation

Checking web page navigation is as simple as only using the keyboard to navigate. There should be no issues with keyboard navigation if Sussex web pages use our standard components.

Find out more about digital accessibility and what this means for the Sussex website.

Writing for web users

People are more likely to read our content online than in print.

In addition, unlike print, the way people browse online varies considerably. They may land on:

  • our homepage and navigate through our site or use the search bar
  • a page from search results and have no context of how it relates to other pages on our website
  • a page linked from email
  • a social media post, or a page linked from a social post
  • one of our news items, which in turn links to another page on our website
  • a bookmarked page they’re familiar with.

They could be on any device, in any location, and may read only part of the page.

Make the purpose obvious, keep the content concise and use plain English. Avoid FAQs if possible.

Lead with the most important information for your audience; don’t tell a story. Read our guide to writing well.

As an editor of our website, develop a schedule for regularly checking every page. Write in a way that avoids information being out of date (for example, linking out to term dates).

Data gathering and GDPR

If you set up a facility, such as a web form, to collect user data then it is important you comply with good records management and GDPR practices and policies.

WCM forms

If you have access to the University’s Web Content Management system, you can set up forms to collect various types of data (such as enquiries or incident reporting).

If you use forms, however, remember the data submitted is held indefinitely within the WCM system. It is not automatically deleted at regular intervals. It is important this data is managed appropriately, in line with data protection requirements and records management principles.

In particular, any personal data collected in forms should be:

  • limited to what is necessary and only used for the purpose for which it is collected
  • kept only as long as it is required for that purpose.

Only those who process the data collected from each form as part of their role should be accessing it. Once data has been retrieved from the form and stored securely locally, the form data should be deleted.

This helps us to ensure we comply with data protection requirements and maintain our records in accordance with the Records Management policy [PDF 190KB].

Within your area, decide who is responsible for each form. Routinely deleting data should be scheduled into your work.

If you have any questions about data protection principles or need records management advice, email the Information Management team: gdpr@sussex.ac.uk.

For technical assistance with the WCM system, email the Digital and Creative Media team: dcm@sussex.ac.uk.

Back to top

You might also be interested in: