This post demonstrates the styling features available within this design

This article is styled with the tried and trusted design formula used in magazine print for decades. Any or all of these features are available and flexible, so let me talk you through them…

We start with the ‘first-para’, also known as the ‘standfirst’ (there’s a lot of jargon to come). This is styled differently from the body copy that follows in order to get the attention of the viewer. Editorially, it is an overview of the article’s content. Think of it as the ‘abstract’.

The ‘drop cap’ (dropped capital) first letter is a throw back to the illuminated characters created by monks. Visually, it is a strong, eye-catching ‘call to action’ which has been at work since way before Caxton invented the printing press, let alone UI/UX designers coining the ‘call to action’ phrase.

After the first para, we move into the body copy. We’ve engaged our reader so we now keep our copy clean, simple and easy to read. However, we must be careful not to present our reader with an intimidating wall of text. If we don’t have illustrations or photos to break up the text, then we can deploy ‘crossheads’.

This is a crosshead

Also called ‘sub-heads’, these headings serve two functions, they provide some visual relief breaking up the body of the article, but they also serve as a call to the viewer who is scanning or scrolling through the copy. They work as little chapter headings.

The ‘pull quote’, or ‘callout’, is a device which works in much the same way as the crosshead. These may be actual, cited quotes, or simply be an interesting phrase from the article.

An eye-catching quote is placed in a ‘pull quote’ or ‘callout’ panel

Tim Baggaley

There is another thing we can do with text to put some variation in its landscape; we can ‘box-out’ stories. A box-out story contains information which is relevant to the body article but does not need to be read in the main thread of the article. Think of box-out stories as asides.

A popular use of box-outs is to accompany visual content. The text serves to explain the connection of the visual content to our main article, but in such a fashion that if our reader simply wants to pursue the main story without distraction, the box-out indicates they can skip this, and find it easily if they want to come back to it later.

Putting you in the picture

Speaking of visual content, let’s look at pictures. Single images can be displayed in two formats; full-width or left/right-justified.

I code my design such that left or right-justified images occupy 50% of the story width down to a breakpoint at 450px, whereupon, the image occupies the full width of the article. This is responsive design, tailoring the layout to the screen size of our reader’s device.

When justifying images, it is generally considered good practice to only use right-justification.

For readers with dyslexia or visual impairment, left-justified text with a constant, left margin position is easier to read¹, indeed, easiest for all readers. Note, we have a footnote in that previous sentence, a nifty function you academics will find very useful.

Images which illustrate an aspect of the article should be captioned in a fashion which describes the content for the benefit of someone who cannot see it. Screen readers used by visually impaired visitors will then use the caption to describe the content.

Google can’t see pictures

Given the common perception of Google and its kin being the all-seeing eyes, they’re not. Search engines only know the content of an image if we describe it in words in the caption and the metadata fields (we’ll talk about metadata when we come to the practical aspects of posting content). Suffice to say, a photo with no text description attached to it is a blank space when Google comes to index it.

If an article has a lot of visual content, images can be displayed in a gallery. This one uses a ‘justified’ layout, but there are numerous options available.

Note that all of our images with editorial content ‘zoom’ when you mouse-over them on a desktop device. This is to indicate the image can be clicked on to open in a ‘lightbox’ overlay, allowing our visitors to inspect an image using all the available screen on their device.

References

1. Web Site Design Suggestions for People with Dyslexsia ↩︎