The following guidelines are not simply good practice, or 'house style' - they must be followed to ensure that our website is fully accessible (e.g. adding a meaningful tag to a photograph, and hyperlinking words correctly).  

Some of these guidelines  - like those concerning headings - apply to working in other media too (e.g. Word, or other work that will be printed). 


On this page:


Headings

Don't type news headlines or events titles in capital letters. IT'S LIKE SHOUTING.

Use proper styles for headings, rather than simply making normal text bigger or bolder. Screen readers, other assistive technologies, and some more general-use programs such as Word and Adobe Acrobat understand and can make use of the semantic differences between the various levels of heading to create tables of contents, indexes and internal links.

  • Each page should have a H1-level heading at the top (like the phrase 'Style Guide - contributing to this site' at the top of this page.
  • use other pre-set headings (H2 and H3) elsewhere on the page.

This is an H2 heading

Followed by an H3.

(Other levels of heading are available, but they are currently configured to display the same as H3.)


Punts at Magdalen Bridge

Steve Allen

Photos (and other images)

While the system does a good job of resizing images to be displayed correctly in all contexts, it's best to try to use images that are the right size in the first place.

Ideally, mages should be:

  • 1030px wide for use across the whole content area of a page,
  • 750px wide (and a fixed 500px tall) for use across the width of the text column, or
  • 400px wide for use as a smaller image within an article. (This last type will display on the right-hand side of a column of text like this gratuitous picture of punts, with text wrapping around it on the left-hand side. This can't be changed by the user.)

We have separate page which features annotated examples of a number of the different image types, and an important note about labelling images with the alt-tag for the benefit of users of screen readers.

There is a video giving step-by-step guidance on how to upload images.


Links...

Never spell out links in full.  They interrupt the reading flow and are unhelpful in this form for someone using a screen reader (which will of course announce it as it is written - http-colon-slash-slash-double-u-double-u-double-u...) So:

DON'T write sentences like:

Hamlin, Hamlin & McGill's criminal law specialist is Saul Goodman. You can find his profile at: http://www.hhm.com/people/partners/biography.html?person=saul.goodman

(To see how a screen reader presents links, you might like to watch this short video). While it might be tempting to replace that long link with the word 'here' (or the sentence 'click here to see her profile'), this is actually little better from the screen reader's perspective (particularly if there's more than one such link on a page) and in any case, is not the most compact or elegant turn of phrase, so instead...

DO hang links on relevant words or phrases, like this:

Hamlin, Hamlin & McGill's criminal law specialist is Saul Goodman.

Here's a quick (less than 1 minute) video showing how to make neat links rather than ugly ones.

(To do the same sort of thing when writing an email on most systems (including Outlook on Mac), select/copy the text you want to link from, click Ctrl-K (⌘-K) to Insert Hyperlink, and paste (Ctrl-V or ⌘-V) the full link into the popped-up dialog box. Click OK.)

... and links on pages, or in documents, that are likely to be printed

There are some cases where it is necessary to spell out a url, for example where the page (or perhaps .pdf, or Word document) is especially likely to be printed out. In these cases, there is still usually no need to write it out in full. But remember, the actual underlying link does need to be complete.

You should leave off the intial 'http://' or 'https://', as modern browsers will assume the former, and automatically redirect to the latter if appropriate.

If the closing bit of the url is, 'index.htm', 'index.html', 'index.shtml', 'index.php' or similar; or 'default.htm' etc., or 'home.htm' etc., you can leave that off too, for a similar reason. So:

DON'T use:

Detailed instructions on how to use BiblioCite can be found at http://www.imaginarysoftware.com/bibliocite/index.html

User reviews of the software are at https://www.imaginarysoftware.com/bibliocite/reviews.html

DO use:

Detailed instructions on how to use BiblioCite can be found at www.imaginarysoftware.com/bibliocite/

User reviews of the software are at www.imaginarysoftware.com/bibliocite/reviews.html


Tense and time

While this is perhaps most obviously relevant in the case of news items, it does also apply to almost all pages, as you - the author - can never be sure when the item is being read. This means that text needs to be written in such a way that the item still makes sense long after the event, so:

DON'T use phrases like:

Last week a team from Lonsdale College won the Lance Todd Trophy for the third consecutive time.

or

We will be introducing this new course next year.

DO use:

On 14 May 2020, a team from Lonsdale College…

We will be intoducing this new course in the 2022-23 academic year.


Be careful doing copy/paste from other applications

Text copied and pasted directly from Word or email often carries with it a bundle of hidden and usually unwelcome formatting, leading to blocks of content which sit uncomfortably with those around them, or with the other pages on the site. Often the differences are fairly subtle, like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

and sometimes more obviously jarring, like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 

One way to avoid this is to paste first into an app that will discard all the formatting (including bold and italics, unfortunately). Notepad on the PC does so as soon as you paste into it, and TextEdit on a Mac can do so by  pressing Shift-Cmd-T after the content has been loaded.

Alternatively, most of the edit boxes you will find on our Editing System and blog sites now offer 'Paste as Plain Text' and 'Paste from Word' buttons, like those highlighted in yellow here:

which perform the same function, so you get content that fits in properly with its surroundings.

But if you forget to use one of those special Paste buttons, or if you come across a page that contains some odd formatting, it is a simple matter to strip it away and restore the standard house look. Simply select the problem text (or the whole page) and click the 'Remove Format' button, highlighted in pink in the image above. Importantly, this won't remove any links, but you may need to restore bold and italic text.


Text Formatting

DON'T use underlines

Underlined text can look a bit like a link, which is unhelpful, and also it's very old-fashioned, dating from the the days of the mechanical typewriter, when it was the only way to add emphasis to a word or phrase. Use bold to make something stand out, and italics to add emphasis.


A note on abbreviations

  • The following abbreviations don't take full-stops: Dr BCL MSt MSc MPhil MJur DPhil
  • When using an abbreviation that may be unfamiliar to the expected audience - for example those that are 'special' to your field of interest - you should offer the full version together with the abbreviation the first time it appears, but can use just the abbreviation thereafter e.g.:

This website is partially compliant with the Web Content Accessibility Guidelines (WCAG) version 2.1 AA standard.

then:

This page is fully compliant with the current WCAG standard.