Modern website designs are founded on the principle of Micro Content.  Paradoxically as broadband speeds have improved and page load speeds have dropped, users have become more inclined to click away from a page that does not quickly satisfy their needs,  Click-away times are dropping all the time. We need to engage users and keep them engaged, especially at the top of our content tree – the pages where users alight first.

Microcontent helps us achieve this by slashing the number of words on a page.  Graphics are used to signpost users to sections. Words are kept to the minimum with no repetition and simple language.  White space abounds. The idea is that a user can absorb the intent of a page in under 7 seconds

Drive down deeper into the site and the content becomes increasingly “encyclopaedic” – large tracts of text become the norm.

These guides are a good example.  They cover complex topics which would overwhelm a reader if presented as a continuous page.  Complex topics need to be broken down so that they can be consumed in bite-sized chunks.  The accordions we use here are a great way of doing that, allowing a content creator to absorb the intent of a page quickly and jump to a specific section without excessive scrolling.

Accordions are an advanced topic.  You will need a supeuser/site admin’s help to set them up, although once that’s done, editing the content is relatively straightforward

When constructing content, break it up into sections and subsections by using Heading Styles

Heading 1

Heading 2

Heading 3

Heading 4

And for content, we use normal or paragraph style. 

Visually these heading styles look differentto the eye, but they are significant from a system perspective too.  Using the predefined heading styles causes hidden tags to be applied to them that act as a magnet for search engines.  And, of course, they make it easier for a person to skim content looking for the content they need, which reduces abandonment rates.  Because the use of heading styles is so important, we have disabled the ability for you to change the font size.

Bold is not the way to create headings but that doesn’t mean it has no place.

Bold is used to emphasise words or phrases in a sentence but it is only a visual cue for a reader.  Search engines are blind to it. So if you want to make a phrase stand out, use bold.

Here are the rules:

1. Use italics when you need to de-emphasise some text to make a relevant but lesser point without detracting from the main topic.  See how it works?
2. Use bold as the first level of emphasis to grab a user’s attention as they are reading or skimming.
3. Use bold and italics in combination for a further level of emphasis
4. Use bold and UPPERCASE to go the next level
5. NEVER use underscore.  Many older sites use underscore to indicate thet the words are linked to another page.  Ours doesn’t, but let’s not create any confusion.

Coloured text is not the way to create headings. 

In fact, coloured text must not be used under any circumstance because of usability and accessibility reasons. 

Red is particularly troublesome. For people with visual impairment such as cataracts, red text can be difficult to read.  In some forms of colour blindness, red text may be indistinguishable from black and, in some cases, may appear to have less emphasis than black text.  And, as with bold, search engines place no priority on coloured text.

Images make content more appealing to people.  A picture equals a thousand words.

And if images are provided with Alt-text they become attractive to search engines too, which boosts our SEO rankings.  Alt-text is an alternative description for an image with the original purpose of describing the image to visually impaired people (their screen reader will find it), but without it, search engines would also be blind to what an image means.

Alt-text can be applied to an image during or after the process of adding it to the media library.  The description should be succinct and avoid unnecessary fluff. It should NOT start with phrases such as “An image of / picture of …” because screen readers will identify it as an image automatically.

Featured Image

Most of the content types that we use have a concept called a Featured Image.  As the name implies this is a special, one-off image, It’s special status means that it is called upon by various functions through the site to form the headline image.  Featured Images are really important to showcase our content and must always be used. unless an individual guide says otherwise.

Size Matters

Images must be of the exact size required for the content type.  For example, events images must be 300 x 300 px including shading.  The detailed instructions for each content type will specify the required size.  If an image is not the correct size.

• Too large and the system has to resize it during page load to make it fit the screen, which will slow down page response times.
• Too small and not only does it have to resized but the displayed version is likely to be grainy / poor quality .

Icons are not so relevant to dynamic content but are more important on high-level static pages.  They are used extensively on throughout the website to provide visual clues about the purpose of a section of text.  For examples, see the Where we are page.

If youebelieve your content may benefit from icons you’ll need to contact a site admin.

Long sentences with comma-separated lists are difficult to scan.  Bulleted/numbered lists overcome this and also draw the attention of somone who is skim-reading, causing them to pasue/slowdown – which is what we want.

Bulleted/numbers lists are also known as unordered and ordered lists respectively and these titles help understand how to use them correctly and consistently.

• Bulleted/unordered lists are used to list items for which the order is unimportant or irrelevant

1.  Numbered/ordered lists are used:
   1. When the there is a sequence in which a series steps must be taken
   2. To rank the listed items

When you create a hyperlink to another piece of content please do NOT apply any styling to the words e.g. bold, italics, underline.  Bold and italics are reservered for emphasising normal text and underscrores must never be used.

The site will take care of link styling in the frontend, using the parameters that have been set for the site. It is bad practice to add hyperlinks to headings.

When a hyperlink refers to an external site, including the shop site, make sure to adjust the settings to make the link open in a new tab.  We want to refer users to other sources of information but we don’t want to lose them from our site.

Plain and Engaging English

However we may view it,  genealogy is a dry enough subject without turning it into an academic treatise.  We want to engage and hold our readers’ attention, A lot of our content is encyclopaedic but we can still make it engaging.   

Avoid repetition

Say it once and say it well

Be succinct

Don’t use fifty words when ten will do.  Online readers will become bored and move on

Use short paragraphs and sentences

There is no definitive “good” length for a paragraph or sentence but because people are inclined to skim-read, long constructions will only encourage them to move on.  This guidance is relevant: 

https://owl.purdue.edu/owl/general_writing/academic_writing/paragraphs_and_paragraphing/index.html 

In particular:

You should start a new paragraph:

• When your readers need a pause. Breaks between paragraphs function as a short “break” for your readers—adding these in will help your writing be more readable. You would create a break if the paragraph becomes too long or the material is complex.

If we provide long tracts of text  then our readers will need a pause