Editing text

Editing tools

Text can be edited like you would in Word and the toolbar contains some familiar icons. There are also a few others to be found alongside the obvious ones.

Editing tool icons explained

  • Spellchecker – takes a second to do and is recommended to be used on every web page before you submit for publishing (see instructions below).
  • Insert Image – this will be covered on the Images page.
  • Insert Link and Unlink – pretty self explanatory, usage described below.
  • Insert symbol – gives you a selection of symbols, eg £ © ½ €
  • Remove formatting – select the text and click this if text has unwanted styling.
  • Find and replace – does what it says on the tin.

Spellchecker

Click on the spellchecker icon and any possible spelling mistakes will be highlighted – you may need to scroll down the page to see them. If there are no spelling issues then you get a gold star, but also a message to say no spelling mistakes have been found. Right click on any words that have been highlighted and a sort of drop-down will appear:

  • a selection of likely words it could be – if the correct spelling is there then select it, job done.
  • Ignore word – if it’s an usual surname for example, then use this and it won’t register as an issue on the page (or just ignore it yourself and go back to whatever you were doing before).
  • Ignore all occurrences – if it’s an usual surname but you know it’s going to be used loads on the website, then select this.
  • Add to dictionary – good for things like unusual scientific words that may well crop up again in news items or research pages. Click this and it will never appear as a spelling mistake again. Make sure the spelling of the new word is correct. Do not use this just to make the issue go away. You will be found out and hunted down.

Screengrab of the drop down options in the spellchceker

You’ll need to click the icon again to turn it off. Sounds obvious but might not be at the time.

Text styles

All text must have the Paragraph style – this is applied when you press return at the end of a paragraph, so if the text looks strange when you preview it, you may need to press return at the end of the paragraph. You will see the Format menu change to Paragraph.

Applying the paragraph style form the Format menu

Intro panels – the first sentence in an intro panel appears in a larger font. This is applied when you press return at the end of a paragraph/sentence.

If you are copying and pasting in from Word (for example) add the Shift key to your usual keyboard shortcut, this way you’ll get the text without any formatting. Or you can use the Remove Formatting tool.

Whilst we’re talking text formatting, here are a few things to keep to a minimum:

  • bold (distracting)
  • italics (harder to read)

And a couple of things to NEVER do:

  • underlining (it will look like a link)
  • ALL CAPS (challenging for dyslexics, screen readers will pronounce each letter separately, looks like your nan shouting at you).

The same applies to the intro-para style which should be used sparingly.

Headings

Headings should be applied in a sequential way – don’t use an H3 until you’ve used an H2:

  • H1 – this is the page title
  • H2 – these are the panel titles
  • H3 etc – applied as required

This is important for people using screen readers as it dictates the structure of the page.

Headings have a set style so should not be bolded. Plus it looks terrible.

Inserting links

To insert a link, select the link word(s), select edit/insert icon from the toolbar pictured above. Then select the link type:

Options when inserting a link

  • CMS content (another page in the CMS) – browse to file and select (tick box), save, ensure it has a link title (About us below) and save again.

Selecting a page in the CMS to link to

  • URL (an external web page or document) – paste in the URL, give it a link title and save.
  • Email – insert full email address, give it a link title and save. To be clear, use the email address in full on the page as the text for your link.

Exceptions

News items – these should now be added as external URLs.

We have started using ‘content types’ on the website, and new items are now created in content types. Content types completely separate the content (words and pictures) from the styling which dictates how they look online, so there is no page as such to link to. In the future more and more of the website will be made this way.

Never insert a shortened link such as email.brighton.ac.uk or bitly etc into the CMS – link destinations should be transparent. There is no way of knowing where a shortened link will take you so they can look suspicious, not a good look for a university.

Link guidelines

Link text should be descriptive:

  • Good link text: Find out more about the CCA.
  • Not good link text: Find out more about the CCA.
  • Bad link text: To find out more about the CAA click here.

While the second link text example is correct in that it states the destination, it isn’t great for people who find precision clicking problematic, this could be due to visual and physical impairments, or just a combination of sausage fingers and a mobile screen. The solution is to write the sentence with the link in it so that you can link to more than one word. Simples.

The problem with the final link text is that people skim read online so a sequence of ‘here’ links means they have to stop and read each sentence that ends ‘here’ to work out where the link will take them. As with almost everything online, making it obvious gives a much better user experience for everyone.

You can see how ‘click here’ is also bad link text for a screen reader in this short video.

Never use internal (or external) URLs as link text:

  • Good link: Find out more about our south coast locations.
  • Not great link: Find out more about our south coast locations.
    Just because you have to read it all which isn’t as instant as the link text above.
  • Bad link: Find out more about our south coast locations at www.brighton.ac.uk/accommodation-and-locations.
  • Crime against humanity: Find out more about our south coast locations at https://www.brighton.ac.uk/accommodation-and-locations/index.asp.
    Come on now, everyone will think this your first day on the interweb!

However you can state a URL if you are specifically trying to advertise it:

  • You can watch our award ceremonies live at www.brighton.ac.uk/livestream.

If you are stating a URL in full then leave off http:// or https:// at the beginning as well as any trailing slashes at the end/ . The exceptions are URLs without www in which case you can leave the http:// or https:// at the beginning if you like. Also any files called index or default at the end of a URL should be removed.

  • Yes: www.brighton.ac.uk/studying-here
  • No: www.brighton.ac.uk/studying-here/
  • No: www.brighton.ac.uk/studying-here/index.aspx
  • No: https://www.brighton.ac.uk/studying-here/
  • No: https://www.brighton.ac.uk/studying-here/index.aspx
  • Yes: https://analytics.google.com
  • Yes: analytics.google.com

Email addresses should be stated in full (all lowercase) on the page rather than linked behind a name or word.

Links should NEVER open in a new window.

Links have a set style so should not be bolded or italicised.

Anchors

If you want to link to a particular point in a page you can insert an anchor using the icon in the toolbar. Place your curser where you want the anchor to be and click the icon.

Inserting/editing an anchor option in the toolbar

A window will open and you must give the anchor a name. Make it a short proper word (ideally), and all lowercase. It will need to be unique on that page.

Now when you insert a link to that page you will be offered the anchors in a drop down menu, in the order they appear on the page.

The drop down menu of anchors you can link to

You can linked to a tabbed panel but not to a particular tab.

Links to documents

The CMS is not a document store. Almost every department and school now have a publicly accessible space on Sharepoint. Documents should be published there and linked to from the CMS. This way document owners remain in control of updating their documents and storage space in the CMS is not filled up with documents.

There is guidance on how to link to Sharepoint documents available on Sharepoint itself, which you should follow to ensure they are publicy accessible. The difference between an accessible link and an inaccessible one is pretty clear in the URL Sharepoint gives you:

  • Accessible: https://unibrightonac.sharepoint.com/:b:/s/public/ERnGc9TIcktBpkCBlOtQMU0BbZ0CLmsNfHOLF_h4U4eVXA?e=cy46yV
  • Not accessible: https://unibrightonac.sharepoint.com/sites/public/docs/Forms/AllItems.aspx?id=%2Fsites%2Fpublic%2Fdocs%2FMarketing%5Fand%5FComms%2FClearing%2FHow%5Fto%5Fsign%5Fa%5Fdigital%5Fpdf%2Epdf&viewid=6389ded9%2De1c0%2D43f8%2D9707%2D350cd5bb3547&parent=%2Fsites%2Fpublic%2Fdocs%2FMarketing%5Fand%5FComms%2FClearing

Unless you wish to allow users to edit documents it is advisable to upload them as pdfs.

When you link to documents you should state the format in brackets afterwards (pdf) or (Word), and the size if it is over 2 MB.

Accessibility

Accessibility regulations require that documents (e.g. Word files, PDFs, presentations) should be accessible. These standards are easily achievable, mainly entailing commonsense use of text, document structure and labelling of images. Information Services run courses on creating accessible digital documents as well as self- help resources.

FYI you also need to make video content accessible.

Breaking links

Place your cursor in the text which has a link you want to remove and click on the Unlink button that sits right next to the Link button. Job done.

Checking for links

Not everyone has access to this but it’s useful for everyone to know. There is a way to check if there is a link in the CMS to (for example) a document on Sharepoint or an external webpage – BEFORE you delete it. It’s called Hyperlink Management and lives in the Management Console.

Management console in CMS files

You insert the URL and the CMS will tell you where it is being used:

Link Manager Search

When you click on the Usage stats you are taken to a listing of every page, with the option to edit each one:

Link Manager results page

Bullet points / lists

Our approach to punctuation is to keep it as minimal as possible, for easy reading online. There are generally two types of bulleted lists:

Standard lists

  • pencil case
  • lychee
  • tazer.

Items are lowercase, with a single full stop at the end to signify the list has ended.

Longer lists

  • In the longer lists each bullet point is a sentence in its own right. And sometimes more than one.

Items here are sentence case and usual punctuation rules apply, so a full stop at the end of each sentence.

For visual clarity we try not to mix the two styles – but then bullet pointed lists are usually one or the other.

Numbered lists

Numbered lists follow the same guidelines as above. However there is a visual variation available. Standard visual style is:

  1. Just
  2. Like
  3. This

The other option is to make them stand out more like this:

Some text in a numbered list with the numbers in red circles

To apply this style, highlight the text and apply Numbered list, then select num-list-circles from the Styles menu.

Window showing the num-list-style option

Two things to note:

  • we would not recommend using this with a numbered list that is all links – that’s a whole lotta red!
  • If your numbered list is in a full-with panel then the list will distribute itself in columns across that panel rather than appear as a vertical list.

You can see both of those things (technical term) in this example:

A full-width numbered list with red numbers

Quotes

If you wish to use the quote style inside a panel there is an icon in the toolbar you can apply to text to achieve this:

The blockquote icon in the toolbar

Here you can see it in use in a tabbed panel:

A blockquote in use in a tabbed panel

If you want some text under that quote, the name of the person who said it for example, insert the text and apply the ‘underquote’ style from the Styles dropdown menu.

Applying the underquote style in a blockquote

If you wish to make more of a statement then there is a blockquote or pull-stat option, which is fullwidth and comes with a quote graphic.

Style guide

The university style guide can be very useful if you are unsure how you should present something: upper or lower case, hyphenated, bolded, dates and so much more. Really, so much more. You don’t have to make decisions or have opinions – it’s all been decided for you so you can concern yourself with more important things…

One change to note is that we ask you to refrain from presenting an academic year as 2020/21 and now use 2020–21. If you really want to know more about this change, see the post on stating the academic year.