Web documents - Style Guide

Web documents - Style Guide

This is an example of a British English style guide.

A style guide sets out rules for content on the web site.

Please consider

All the content on a web site must support the objectives of the web site.

Content must meet our Web document publication Policies and Rules - this Guide is intended to promote that. Breaking the Style Guide will usually reduce the users' experience of our site, and undermine our objectives. So the Guide is not absolute, but must not be broken without the best of reasons.

General Style

Our style should be consistent with a "Quality Broadsheet". However, most websites are read by "scanning", so everything should be shorter (perhaps 50% shorter) than in equivalent paper content. Do use lots of headings, bulletted lists and other aids to scanning (see www.useit.com for lots of information on style, and the reasons for these recommendations).

The Times has an online version of their style guide (which is also available as a book) http://www.timesonline.co.uk/tol/tools_and_services/specials/style_guide/ which is probably a good standard (and is still available outside the paywall). Generally, websites use shorter sentences than printed material. Since much of our material is actually printed as well, some compromise may be required.

Comprehensibility

Our style should also be comprehensible to visitors who are unfamiliar with our culture, philosophy and language and must not seem forced to our "home" audience.

Our Accessibility Requirements mean that we need to meet the following guideline to achieve WCAG 2.0 AAA compliance:

3.1.5 Reading Level: When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content, or a version that does not require reading ability more advanced than the lower secondary education level, is available. (Level AAA)

We suppose that the education level specified may be equivalent to completing Secondary education in England with at least three GCSEs at at least C grade (open to interprettation). We do not offer this extract from WCAG as an examplar of any aspect of comprehensible style!

There are other WCAG guidelines from the same section which we need to (try to) meet.

Structured content

In web pages, we can have Headings and Body Text. Headings are achieved by using the Format drop-down in the Visual editor toolbar (Heading 1, Heading 2, ... - these correspond to <h1>, <h2>, etc). Body text is paragraphs, lists, pictures, tables, and other things that people can view.

I seem to remember that Body Text has to read reasonably with out reading the headings.

The headings have to be logically ordered.

There should be one, and only one, <h1> on a page. Our design makes this the same as the page's title (which appears in the browser bar), so you should never add another one in content (and never need to).

There can be one or more Heading 2s on a page, and these can enclose Heading 3s, which in turn can enclose Heading 4s, etc.

Each Heading is followed by Body Text

If this sounds like outlining, that's because that's what it is - outlining for people who need help with accessing our content (which is everyone, by the way - all users need some help some times).

Tables

Tables are only used for data. So every table can have headings for columns and rows (correction - must have).

Tables must not be used to get things on the page in specific relationships (layout) - that breaks our requirement to separate content and presentation. If you can't see how to layout a page, consult the web master and the visual designer - you need help with presentation!

Web conventions

Many sites, including this one, underline things to show that they are links. You must never underline anything which is not a link, otherwise you will confuse people.

Hyphenation and Spacing

Do not attempt to hyphenate content to get it to lay out (do not attempt to justify text, either - it is to be ranged left). Text sizes and fonts on the web are in the hands of the user, and any attempts will fail, and look stupid. Just don't do it!

Pictures and Images

Pictures and images, unless they are just decoration (i.e. styling and not content) must have an alternative text, so that people who have turned images off (or are using something like a screen reader) can be told what the image is. You should also supply alternative text or titles for downloadable documents, so that people can tell what they're going to get before they download it.

Dates and Times

Never use numeric only dates. Always spell the month (we all know when 9/11 is, don't we?).

I have two different British English Date formats. You should decide which one you will use, and then use it consistently.

The 24-hour version is probably more useful internationally - people from most cultures will cope with it.

The am/pm version is more commonly understood in the UK (and the USA), and so is more suited to a site that is used mostly by people in those countries.