- Editing tools
- Headings
- Inserting links
- Anchors
- Links to documents
- Breaking links
- Checking for links
- Bullet points / lists
- Quotes
- Style guide (and how to present an academic year)
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.
- 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.
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.
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:
- 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.
- 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.
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.
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.
You insert the URL and the CMS will tell you where it is being used:
When you click on the Usage stats you are taken to a listing of every page, with the option to edit each one:
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:
- Just
- Like
- This
The other option is to make them stand out more like this:
To apply this style, highlight the text and apply Numbered list, then select num-list-circles from the Styles menu.
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:
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:
Here you can see it 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.
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.