Homepage | (Static sitemap) | ? Help |   Links | Contact us

 
 

Style on the website
(written English and presentation)

Headings on this page :

Introduction

ABC...

With "style", we're referring here to :

  • the style of written English relating to the visible text (language, spelling, punctuation etc), and
  • the presentation of the text, images etc

It's all about effective communication.

So, on most of this page we're not dealing with style relating to computer programming/ coding, HTML, Cascading Style Sheets (CSS) and the like.  (The Web design page deals with these.)

Style and the CharityBags website

The guiding principles we've used include :

  • By default, follow convention (see the list of published style guides below).
    Don't re-invent the wheel.
  • Make things as clear and helpful as possible.
  • Be conscientious - but not over-rigid, pedantic or purist.
  • Where there are alternatives, try to be consistent (eg spelling).
    In many cases the choices are arbitrary.
    Consistency also gives better results with searching (higher recall).

Examples relating to the CharityBags website

Below are examples of the "rules" we aim to follow on the website.

Scales of justice

Content - keeping it neutral / unbiased

See the About us page.

Content - making criticisms

See the About us page.

Statistics charts (courtesy of wikimedia)
Statistics
(pie charts and histograms)

Content - statistics

See :

Content - respecting privacy and confidentiality

PadlockPadlockPadlockPadlockPadlockPadlock

See the About us page for our rules on this.

Content - ambiguity

Avoid it.

Using examples

Where explaining things, give examples - for clarity.
Also, sometimes give synonyms (as belt-and-braces) - eg "with Acts (=legislation) ..."

Map of the UK (Wikipedia)

UK English

Use UK English - eg 'colour' (not color).

However, remember you have to use US-English spelling in the hidden code in the webpage (HTML, CSS, JavaScript etc) - eg 'color', 'center', 'gray'.

s or z?

Where "s" and "z" are alternatives, use "s" - eg organise (not organize).

Plain Language Commission logo (our thanks)

Plain English / plain language

  • Use plain English - for example, avoid legalistic, over-complicated phrasing.
  • But don't resort to a "Janet and John", lowest-common-denominator style either.
  • See the page on Plain English.

Informality

Use an informal, oral (=spoken/conversational) style - for instance using apostrophes (eg: we're, isn't).  Test it by reading it out aloud - does it sound "natural"?

Use the active voice (not passive), and be personal, referring to "we" and "you".  Examples:

  • "If you're concerned, we suggest contacting your local council."
    rather than: "It is advisable to contact the local council."
  • "We feel that ..." rather than: "The writer feels that ..."

On occasions make things into questions - it's been shown to improve communication.
Example: headings such as: "How do I check if a collection is genuine?"

Use idioms and metaphors - they add to the informal feel.

Using humour - see the About us page.

Sentences and paragraphs

  • Use shortish sentences.  Get the basic idea across first.  Then use the sentences following this to elaborate on it - giving the details, exceptions, qualifications, complications etc.
  • Use semi-colons ";" cautiously.  Consider using a new sentence instead.
  • Within a paragraph, consider putting certain new sentences on a new line - for clarity.
    • Do this with a <br> tag - eg by Shift-Enter.
    • However, for more-intelligent line breaks, you can put non-breaking spaces between each of the first few words of the sentence (or use CSS's nowrap).  Then, if you edit the text above, the sentence in question will automatically start on a new line (or not) in an aesthetically pleasing way.

Abbreviations and acronyms

When first mentioning them, give the name in full, eg:
 "The Charity Retail Association (CRA)  . . .  the CRA says . . ."

However, there are exceptions - eg names which are as familiar (or more familiar) to people in their abbreviated form - such as IT, HTML, NSPCC, RNLI, Aslib, VAT, MoT, TV, UN.

UPPER or Sentence case? - We prefer upper case - eg 'PLC'.  However, 'Plc' is very popular.

Abbreviations - email and texting

Avoid them - eg IMHO, LOL, UR.

:(    ;)

Smiley characters

Avoid them :(

Characters

Generally, try to use standard ASCII characters (especially characters 0-127) - quotes, apostrophes, hyphens etc (rather than fancy &xxx; ones - such as “intelligent” quotes).

Numbers

0-9

  • Use commas in thousands - eg £2,500 per tonne (rather than 2500 or 2 500)
  • Words or numerals? :
    • Multiple digits:
      Everyone agrees that these are best expressed as Arabic numerals - eg 265.
    • Single digits (1-9) :
      Should we use words or numerals? - eg "six charities" or "6 charities"?  We're not prescriptive about this.
      Traditionally, publishers used words for 1 to 9.
      We're pleased to see that convention is moving away from this to numerals.
  • When abbreviating ordinal numbers (2nd, 3rd etc), use standard text size (not superscript).
  • Don't over-use Roman numerals (iii, iv, ix etc) - Arabic numerals and letters are easier to understand.

Ignore "The" when sorting A-Z

Ignore any "The" prefix (or similar) in an entry when sorting lists alphabetically.

“...”

Quoted text

Reproduce it faithfully - except for alterations which are considered ethically acceptable by convention - eg correcting obvious typo errors, spelling.  See the Copyright page for more on this.

Make it clear that it's a quote from a third party (rather then written by us).  For example put it in a <blockquote> panel (like this example) or use different colour text or italics and/or "put it in quotes".

Letter 'A'
Letter 'Z'
Letter 'A'
Letter 'Z'

Individual words and phrases (listed A-Z below)

  • add-on (not addon) - eg with Firefox
  • "CharityBags" when referring to us (all one word, no space)
    "charity bags" when referring to the bags delivered by collectors
  • treat "data" as singular - eg "The data on collections is sparse."
  • disc - when referring to CDs and DVDs
    disk - when referring to floppies and hard drives
  • drop-down (not dropdown) - eg menus
  • email (not e-mail or Email)
  • homepage (not home page)
  • house-to-house (unless we're referring to the "House to House Collections Act 1939" or the "House to House Regulations 1947")
  • Internet (not internet)
  • less versus fewer - beware
  • licence:  with a "c"   =the physical object - a piece of paper   =a noun
    licensing, licensed etc:  with an "s"   =when not a noun
  • program - when referring to computer software
  • don't say "regular" when you mean frequent
  • second-hand (not secondhand)
  • sitemap (not site map)
  • web page versus webpage (see also homepage):
    We've used "web page" so far.
    The Guardian newspaper's style guide recommends "webpage".
    Also see: http://forum.wordreference.com/showthread.php?t=209911  
  • website (not web site)
    See: http://mashable.com/2010/04/16/ap-stylebook-website/  
    Apparently the AP Stylebook switched to "website" in 2010.

and/or

Don't be afraid of using "and/or" where appropriate - it's not pretty, but it's clear and concise.

Foreign language words

Don't use/over-use unfamiliar foreign-language words, phrases or abbreviations (eg Latin, French) - such as:

  • quid pro quo, ibid, de jure, recto, verso, cf?, et al?

However, some foreign expressions are OK (or may be OK) - such as:

  • etc, ie (short for id est), eg, per, per se, sic, non sequitur (=it does not follow), fait accompli, bona fide, minutiae, de facto?, raison d'etre?

Punctuation

   `¦!"£$%^&*( )-_= +
   [ ]{};:'@#~\|,.< >/?

Use the modern "block style" with minimum punctuation (eg no full-stop after Mrs or tel, or within abbreviations).

Quotes:  We tend to prefer "double-quotes" to 'single-quotes' (for clarity on the screen) - but we 'mix-and-match' sometimes.

Don't use apostrophes in plural abbreviations - hence CD-ROMs, PCs, QUANGOs.

Avoid greengrocers' apostrophes - such as:
"orange's are 15 pence" or "the bag and it's colour are ... "
See "Eats, shoots and leaves" - the iconic book by Lynne Truss.

Laptop computer keyboard

Minimise use of exclamation marks "!".  Never use more than one at a time.

Use visibly-paired dividers (eg round brackets) in preference to commas - for clarity.
Alternatively, use dashes parenthetically, eg:
 "Charities - the genuine ones - will get a licence."

Restrict use of [square brackets] to traditional purposes - eg text added by the editor in a quote.

We're happy to use the equals sign - to mean "the same as", eg:
 "... house-to-house (=door-to-door) collections"

Spaces

  • Use two spaces (not one) between sentences for clarity (by using "&nbsp; ").
  • Consider using two spaces (not one) after a colon ":"
  • Consider using a space before colons (to make it easier to see them on screens).
  • Put a space either side of a forward slash if it adds clarity (especially with phrases), eg: "Home Office / Cabinet Office ..."

Lists and bullets

  • With most lists, use bullets - rather than using a run-in (=all-on-one-line) style.
  • Bulleted lists are easier to read (although they occupy more lines).
  • Don't add semi-colons at the end of each line.
  • Don't add a full stop at the end of the last item (unless it's a sentence).
  • If you don't use bullets, consider using numbering or lettering (for clarity), eg:
    "... (1) the police, (2) licensing and (3) trading standards ..."

UK population table (our thanks to wikipedia)
Table (our thanks to Wikipedia)

Tables

Use where appropriate.

Information can be much easier to understand in a table (compared with presenting it as body text).

With larger tables, consider adding table software - eg "HTML Table Filter" (see the Web design page for details).

Headings

<hx>

Use them liberally.

With sub-headings, sometimes use a different style for different levels to make the hierarchy clearer (eg <h2> vs <h3>).  Do this by using different colours, italics, UPPER-case etc.

Run-in headings

Use these with short/minor topics, eg :

"National Exemption Orders:  These are granted by the Cabinet Office (part of central government).  Currently 44 charities have them, such as Oxfam ..."

"National Exemption Orders - These are granted by the Cabinet Office (part of central government).  Currently 44 charities have them, such as Oxfam ..."

"National Exemption Orders.  These are granted by the Cabinet Office (part of central government).  Currently 44 charities have them, such as Oxfam ..."

Using emphasis in the body text

Liberally use emphasis on key words and phrases in the body text (for ease of reading, at-a-glance, skimming) - eg: "Councils can use the 1939 Act or the CPRs when enforcing ..."

Do this by bold, italics or UPPER-CASE (or occasionally by underlining).
In a few cases, add colour too.  In extreme cases add highlighting.

Navigation

Make it easy - eg via drop-down menus (DDMs), a sitemap, a table-of-contents (ToC) per page, cross-references.  See the Help page for details.

Bear in mind that information in the JavaScript drop-down menus (eg links) is ignored by search engines.

Navigation - Links

With a displayed web address :

  • do it as follows:  www.a-typical-website.org.uk   (with no http or closing slash)
  • only begin it with "http ..." if there's no "www"
  • add arrows after it thus    if it's an external site and/or opens in a new window

Ensure hypertext links are obvious - eg by underlining and/or colour.

With other text, most of the time, avoid underlining (instead, emphasise using bold, italics, colour etc).

Don't apply the colour(s) used for links to other body text - especially blue (it's confusing).

abcABC

Markup - typefaces and fonts

Use non-serif for body text.
Use serif for some headings.
See the Web design page for more on this.

UPPER case

MIMIMSE THE USE OF UPPER-CASE - partly because lower-case is easier to read.

Use all UPPER-case for abbreviations - eg CD-ROM (not CD-Rom), RAM, HTML, PLC, OFT.

Italics

Use italics cautiously - they're less easy to read on a screen than regular text.
Examples: quoted text, names of publications.

Line breaks

Avoid undesirable line breaks - eg the splitting of phrases on the screen between lines.  Examples:  telephone numbers, postal addresses, names of organisations.
Solutions to this include using :

  • an HTML non-breaking space character (&nbsp;) instead of a normal space
  • an HTML no-break tag pair in the code (deprecated nowadays):  <nobr>...</nobr>
  • style="white-space:nowrap;" in a <span> tag around the phrase (=CSS)

Alignment of text

Use ragged (=left-justified) - it's easier to read than fully-justified text.

GENERAL AND NON-TEXT ISSUES

Whitespace

Be generous with this.

Divisions

Use liberally where appropriate - to show the structure and boundaries.
Do by whitespace, <hr> horizontal rules, style="border: ...", different colours, boxes etc.

Colour-selection hexagon (from a web design program)

Colour

Be creative with the colours you use - with text, headings, backgrounds, horizontal rules, borders etc.

Images

Add them here and there - for example to provide extra information, clarity, instant recognition (especially logos) and to make the page more attractive.
Remember the saying: "A picture is worth a thousand words".

Add descriptive alt= text, title= text and a caption as appropriate.
See the About images page for details.

In the adjoining body text, refer to the image if appropriate.

Add a border to the image if appropriate.

Make the image enlargeable if it helps (eg by hovering).
See the Web design page for more on this.

Now and again, use screen-grabs.  Add fades, torn edges, drop-shadows etc if it helps.

Bear in mind that HTML's title="..." facility works with most types of tag - not just image tags (eg try hovering over this paragraph).  However, remember that it won't print out.

Animation

Avoid it (=anything that moves, such as animated GIFs).  Many people find it distracting.

HTML5 and CSS3

Increasingly, consider adding new features available with HTML5 and CSS3.  See Web design.

Accessibility (disability) guidelines

Where possible, comply with the guidelines - eg typefaces, font sizes, colours, contrast, use of descriptive "alt=" text on images.  See: www.abilitynet.org.uk  

Designing for printing out

Bear in mind that you're producing the pages for use on the screen and as hardcopy printouts.  You may need to modify the design to accommodate this.

Examples :

  • By default, browsers don't print out some components of web pages - such as background colours, and lines done with <hr> horizontal rules.
    (However, thankfully, CSS borders do print out OK.)
  • Many users will print in black (not colour) - eg with mono lasers.
    So, for instance, red text on the screen will print out the same as black.
  • Print-pages have page breaks.

CHECKING

Use a spellchecker (and ensure it's configured as UK English).

Do manual checking (proofreading).  Do this in several ways :

  • Divide it into several short sessions - so your concentration doesn't wane.
  • Read the text as a whole.
  • Also check it by successive theme - eg links, headings, paragraphing, punctuation, images, HTML coding, meta-information and SEO.
  • Use the Hilitext program (free) to assist visual checking.
  • Also, get other people to check your efforts - they're fresh pairs of eyes.

Use code-validation tools - eg use Shift-F6 in Dreamweaver and W3C's CSS style sheet checker.

Use link checkers - eg the Xenu's Link Sleuth program (free).

Use Depeche View (free) for checking by a variety of searches.
The program stores copies of your files in RAM - so searches are instantaneous.  Searching is incremental, in real-time.

Test the site with different hardware and different software.
For instance, try it (a) with different browsers, and (b) at different screen resolutions.

Don't just test the site/pages on your local server - also test it once you've uploaded it (by FTP) to your host server.

Perfection?  With checking, remember the saying: "The best is the enemy of the good."
Life's short - you can overdo checking - by being a perfectionist.
Also remember the principle in economics of "diminishing marginal returns".

Book shelves

Resources (books, websites etc)

For guidance, see sources such as :

  • The Oxford Manual of Style (book)
  • The Chicago Manual of Style (book)
    (You can download parts of it for free via Google Docs, eg the chapter on indexing.)
  • The Cambridge Handbook: Copywriting (Butcher)
  • Publication Manual of the American Psychological Association (APA) (book)
  • The AP Stylebook   (=The Associated Press Stylebook) - "the journalists' bible"
    ="the standard for all things grammar and punctuation in the news world".
    It's around 500 pages.  It's a gem.
    You can find free PDF copies on the web (eg the 35th edition, dated 2000).
    Also see the website: www.apstylebook.com  
  • The Guardian [newspaper] style guide (around 185 pages, arranged A-Z)
    http://image.guardian.co.uk/sys-files/Guardian/documents/2004/07/15/styleguidepdfjuly2004.pdf  
  • The Yahoo! Style Guide (free) - aimed at websites
  • Standards - eg British Standards (BS), ISO standards, ANSI standards (US)
  • The "about.com: Grammar & Composition" website, eg:
    http://grammar.about.com/od/60essays/a/Top-Ten-Online-Style-Guides.htm  
  • "authoritative" websites - such as the BBC and GOV.UK - learn from their styles

Related pages

  • See the Plain English page
  • See the Help page - on using the website (and on its design) - eg the drop-down menus, searching, browsing and related IT matters
  • See the Web design, HTML and CSS page
  • See the Software page.  It includes an annotated list (a table) of around 90 software programs which we've found useful (especially utilities).  Most of them are free.  There are web links to the producers of the programs.
  • See the About images page
  • See the Copyright page
  • See the Statistics page
  • See the About us page

Laptop computer