Design how-tos Email design

We have a set of default and regular templates in GovDelivery for official corporate emails. All external facing HTML emails should follow ONS branding.

There are also templates used for internal communications, such as newsletters, which have been adapted from the main ONS template.

Discuss your needs with the External Affairs team (contact details found on the intranet), who can set you up with a GovDelivery account if needed.

Designing HTML emails

Email technology is supported differently across different email clients, and can result in an email displaying one way in Outlook and another in Gmail, for example. For this reason, it is best to keep things simple and not rely too much on images or complex layouts, as they may not look as intended.

Accessibility

Litmus is a (paid for) tool you can use to test out emails on different clients and browsers. They have written a helpful blogpost on creating accessible emails.

If you want to read more about email accessibility, this GitHub repo on email accessibility has many links you can explore.

Layout and styling

The main principle is the simpler, the better. Do not try to over-complicate the email design, the most important thing is to have clear content so your message lands with the audience.

  • Keep content to one column ideally, around 600px wide. This makes it more straightforward when displaying on mobile.
  • You can use images to add visual interest, but don’t rely on them – as well as not being accessible, they often fail on different email clients and browsers. Avoid using images of text where HTML could be used instead (which can be read by screen readers), and ensure your content still makes sense even if styling images don’t display.
  • The ONS logo should be full colour and sit at the top left of the email on a white or very light background. The size should be around a third of the column width, no bigger.
  • We use a coloured bar with white text for the title and date of the email. The default ONS style is Night blue, but other brand colours can be used for internal emails or for specific cases, such as census.

Text

Follow guidance on accessible text formatting for advice on how to format your content, such as writing simply, using a heading structure and left-aligning text.

  • Use font size 16pt or larger for body text and check it on mobile to ensure the text is large enough. GovDelivery templates are coded to adjust the text on mobile.
  • Ensure there is a way to view the email in a browser. Most email clients will have this option; in GovDelivery you can use the [VIEW_THIS_URL] macro.
  • We predominantly use Open Sans as our primary typeface, but for emails we use the fallback Arial to avoid issues with it not displaying properly.

Examples