Formatting guidelines

Page length

There is no limit to page length on The Oxford Magazine, however, always make sure a content page is only as long as it needs to be. You can use these formatting guidelines to ensure your content is clear, concise, and easy to scan.

Inverted pyramid

The inverted pyramid is a practice where you put the most important information at the top of the webpage. The pyramid shape reflects that your writing should go from the broadest facts down to the smallest details. The inverted-pyramid style matches how our readers consume content and helps engage and inform them effectively.

For example on an event page, information about what (event title), when (dates and time) and where (venue) should be at the top. Information about how to obtain tickets, etc, should go at the bottom.

Headings

Use headings to divide up the content of your page. This helps people scan the content and find information relevant to them.

Headings must be descriptive and properly tagged and nested. Descriptive headings help by making it clear what that section of the page is about. while tagging and nesting headings allow people, screen readers and search engines to understand the structure and order of the page.

You can tag headings correctly by setting the right heading level. For example, the first heading after the page title should be ‘Heading 2’.

You should nest headings like this:

• Heading 1 is the page title
• Heading 2 is used to divide the page into sections
• Heading 3 is used to divide the content under a Heading 2
• Heading 4 is used to divide the content under a Heading 3

If a page is only divided using Heading 3 or Heading 4 search engines and screen readers will see the page as ‘missing’ a Heading 2. Additionally, if you use headings out of order – for example, multiple Heading 3 uses then Heading 2 at the end of the page – screen readers would jump straight to the Heading 2.

Do not use Heading 5, 6 and so on as too many heading types are confusing. And avoid linking to any part of the headings.

Bold text

You can use bold to help users scan for important information, such as dates or costs, for example: ‘The deadline for applications is Friday 30 October‘. It can also be used for emphasis, for example: ‘Do not report this online if it’s an emergency’.

Use bold sparingly to avoid it becoming meaningless and distracting. Some pages do not need any bold text. And do not bold a whole sentence, paragraph or link – except an intro to a news article, or a long feature.

Bullet points

Use bullet points to make lists easier to scan. Bullets are appropriate when the order of list items does not matter.

When using bullets:

• write a lead-in line ending in a colon, for example ‘When using bullets:’
• use lowercase at the start of each bullet if continuing the sentence
• do not use ‘or’, ‘and’ or a semi-colon after each bullet
• do not add a full stop after the last bullet point

limit yourself to 5-10 items per bullet list

Good example

On this page you can:

• report
• apply
• pay

Bad example

On this page:

• you can report
• you can apply
• you can pay

Number lists

Use numbered lists to present ordered information.

For example, step-by-step instructions to complete a task:

1. This is step 1
2. Here’s step 2
3. And now step 3

Tables

Use tables to display information such as timetables, opening hours or budget figures. Do not use tables to control the layout of your page.

Example of a well-formatted table:

Opening hours

Shoutboxes

Shoutboxes look like this. You can use them to highlight important information.

Avoid overusing shoutboxes, as this makes them less noticeable.

Buttons

Use buttons to highlight the most important link or download on the page.

This is known as a call to action. It’s the main thing the user needs to do when visiting the page.

For example, on the ‘Pay an invoice’ page, the link to the external payment form should be a button.

Example button

Example inverse button

• The link text on a button should describe what happens when you click the button.
• For example: On the ‘Book ticket’ page leading to a ticket booking page, the button text should read ‘Book ticket’. It should not say ‘Book now’ as the reader can’t complete a booking by clicking the button.
• Do not use more than one or two buttons on a single webpage.

Accordions

• Accordions are webpage features that expand to show more content. For example, the information in our style guide is presented with accordions.
• Use accordions for long pages where the user may only need to look at one section of information at a time. For example, FAQ pages.
• Where relevant, treat the accordion title as a Heading 2.
• Ensure all sections of the accordion are closed when the page loads or reloads.

Tabs

• You can use tabs to segment your page content.
• The first tab is always ‘open’ and displays its content.
• Use tabs for similar reasons to accordions, but where your page sections are limited. (Avoid using more than 5 tabs on a webpage.)
• Treat the tab title as a Heading 2.