Content design: How to structure web pages

To make our pages easier to scan, it's important that we:

• provide descriptive headings
• break content into chunks
• provide the most important information as early as possible
• use bullet points when possible

We can apply these techniques to any webpage. They take advantage of the way people prefer to read online. This makes our content easier to read and understand.

Well-written title tags and headings help visitors find our content and navigate pages. Most people scan web pages in an F-shaped pattern. They read across the top of the page in two broad horizontal strips before moving vertically down the left hand side of the page. Visitors will decide whether to stay on the page after reading the first couple of lines. So, it's important to be clear about subject of your page as early as possible. We can make it easy for readers to find our page and understand what it's about by including a unique and descriptive title tag and headings.

When writing headings it's important to:

• Give your page a unique title that describes what it's about. When somebody visits the page or sees it listed in search results they can then decide whether it's relevant to them or not.
• Provide properly nested subheadings that describe what you cover in each section of the page. If the reader removed the paragraphs and just left the headings they should still be able to figure out what each section is about.
• Use the same language that your visitors use. Using the same words that your target audience use to describe the subject matter will help them to find your page.

The title tag is a HTML tag that defines the title of your page in search engines and browser tabs. It's important to make sure that titles make sense out of context. The title is the first thing that people will see when your page appears in search results. If it doesn't make sense outside of your page or your website, you're making people think too hard. The title tag is also an important ranking factor when it comes to SEO – so it's important to get it right.

Titles should:

• be unique – titles that appear more than once on your site confuse readers and search engines
• contain the main keyword for that page just once
• feature that keyword early in the title
• contain less than 55 characters so they don't get cut off by search engines

Let's say you have a page on your website that contains your company address, telephone number, and main email address. It might make sense to call this page 'Contact' in your website navigation. But, if 'Contact' is all that users see when that page appears in search engine results, or in a browser tab running in the background as they look at another site, it won't make much sense. It would be far better to give that page a title like '[your company] contact information'. This makes it clear that the page provides contact information for your company. It would be even better to turn that title into a call to action, such as 'Contact [your company]'.

Headings help your readers and search engines to navigate your page. Avoid writing obscure or witty headings and subheadings. Not only do you risk people not getting the joke, you’re missing an opportunity to include a keyword. A study by Nielsen Norman Group found that most users only read the first two words on a line. Putting the words that your audience are looking for at the beginning of your headings makes it easier for them to find your content and identify what it's about.

Headings should:

• describe the content of the page or section that follows
• be properly nested – a H3 should follow a H2, and so on
• be used for structure not style – don't use headings to emphasise text

Like your page title, your H1 heading should be unique. It shouldn't be used for any other page on your site. It can, however, be the same as the title of the page. This page, for example, has the title 'How to structure web pages' – the same as the H1 heading. Like titles, you should only have one h1 heading per page. You can have any number of H2, H3, H4, H5, and H6 headings – but they must be properly nested. This means that a H2 heading must follow a H1 or a H2, a H3 must follow a H2 or H3, and so on. This is important for both SEO and accessibility. Both screen readers and search engines use headings to navigate web pages.

Finally, headings should be only used for structuring content and not for styling text. HTML tags are intended to be used to define the structure of a page. Heading tags should never be used to emphasise a call to action or other elements on your page. This sort of styling should be done by your developers using CSS.

A solid page of text is unwelcoming and can put off readers. Breaking your content down into chunks helps people to skim read it. Try to write in short paragraphs that each present a single point or idea.

Chunking helps people to skim read your page by creating white space. White space, or negative space, is the empty space on a web page. It reduces visual clutter and makes pages easier to navigate. Proper use of white space can also increase comprehension by almost 20%. Breaking your content into short paragraphs is an easy way to create white space.

Paragraphs are easier to read and remember when they contain 5 sentences or less. Paragraphs of 3 sentences are particularly effective for getting your point across. Writers have long made use of the fact that people find things that come in 3s more memorable, comfortable, and satisfying. This because people like patterns, and three is the smallest number of things required to form a pattern.

Front-loading involves putting the most important information at the start of a web page, section, paragraph, or bullet point. This helps readers to get the gist of an article even if they don’t read it from beginning to end. It’s a common technique in journalism and is also known as the inverted pyramid model.

Front-loading helps people make an instant decision on whether it’s worth reading your content. You might have heard that the notion of people only reading above the fold is a myth. That’s only partly true. People do scroll – but only if what’s above the fold makes them think it’s worth reading further down the page.

Placing the most important information above the fold serves two purposes:

1. It gives people an idea of what your page is about – convincing them that it’s relevant and useful.
2. If they don’t decide to read the whole page they will leave with at least a rough idea of what your piece is about.

Front-loading works at both the page and paragraph level. Including a short summary at the start of each paragraph makes it clear to the reader what that paragraph is about. This way visitors can skip from one paragraph to the next without missing important information.

It's possible to front-load information so that it’s available before a visitor even gets to your page. Make sure you include the most important information in the page’s meta description. This way it will be visible when your page appears in search engine results – saving your users from clicking through to your page. If you’re hosting an event, for example, this could be the date it’s taking place, the location, and the cost of entry.

Front-loading is like the inverted pyramid model used by journalist to structure news stories. Journalists put the most important facts at the beginning of each article so that busy readers can quickly digest the day’s news.

Content written using the inverted pyramid model:

• starts with the main facts
• moves onto further information that helps readers understand the topic
• ends with background information that’s interesting or nice to have

It’s the opposite of the traditional pyramid model used to write essays.

Articles written using the the pyramid model:

• begin with background information introducing the topic.
• expand on the argument with supporting material.
• conclude with a summary of the facts.

So, if you find yourself writing an essay when creating content for your website, stop. Use short summaries to help the reader navigate the page. Think about what the visitor wants to know and front load it.

Like subheadings, bullet points break up text and make it easier for your readers to navigate the page. Sometimes breaking up a paragraph into a few bullet points makes it far easier to read.

Bullet points are a great way of drawing attention to important information because:

• They are left aligned and follow the vertical f-pattern.
• They are shorter and quicker to process.
• They make use of white space and help break up the page.

There are few hard and fast rules when using bullet points. As a result, people often style them inconsistently – which at best can be messy and at worst confusing for the reader.

You can keep your bullets consistent by following a few simple guidelines:

• ​Use a colon immediately before a list of bullet points.
• Begin bullets with the same word class – use nouns or noun phrases for lists of things and verb phrases for lists of actions.
• Use a capital letter at the beginning and a full stop at the end of all bullet points that form a complete sentence.
• Limit your list to 7 bullet points or less – people find it hard to process lists with more than 7 items.

The important thing to bear in mind is that lists of bullet points are internally consistent. So, if you have several lists of bullet points on your page not every bullet point needs to be styled in the same way – but every bullet point in a single list should be consistent with the others in that list.

Many of these techniques are advocated and used by government websites. They are effective ways of communicating and are widely used to design digital services. However, they can also work for blogging and other long form content. I've used all of them when writing this blog. Remember – if any piece of content is worth writing, it's worth making it easy to read.