Articles in this section

See more

Email Design Best Practices

Avatar
Vision6
  • Updated

Last updated
20241126
Article type
Best practice / Theory / Information
Applies to
Starter, Business, Pro-Marketer
Special contents
n/a

Introduction & Index

Whenever you plan on building a new email, it's recommended to adhere to best practice so your email will render and function correctly in the widest range of email clients.

In this guide, we'll take you through a range of different topics to ensure the best compatibility. Use the index below to jump down to a particular section:

 

Email Width

Your email width will govern the rest of the content and how it is arranged within the design. We generally recommend a 600-800px email width.

 

Images

Images help break up an email and can add a nice visual connection to your content. This could be through the use of full-width email banners, or images included inside or next to areas of text - even something as simple as social media icons in your footer.

When deciding on images for your email, it's often a good idea to use imagery that suits your colour scheme, branding and the topic of the email.

 

Background Images

Although our email builder supports an email background image, not all email clients support this. You can test your email designs with Litmus Inbox Previews to learn more.

 

Use of Colour

Colour is particularly important for brands, as it can be used to accentuate key brand colours throughout the design - as shown below with the use of purple appearing throughout the email design.

email-preview.PNG

Sizes & DPI

Something to take note of, is to seldom use an image which is drastically larger than it needs to be and let the drag and drop editor scale it down. This can lead to problems with various email clients as well as making the email slow to load for recipients.

Instead, determine how big (typically how wide) in pixels the image needs to be and arrange for it to be saved exactly or very close to that width.

Also, make sure your images are saved at either a 72dpi or 92dpi resolution. Having DPI values much higher than this usually indicates the image was initially intended for printing and would make the size of the file (in kilobytes or megabytes) much larger and cumbersome.

 

Colour Space

The colour profile of the image is another thing to take into account. If you have been provided with an image(s) that was intended for print, then it may be in a CMYK colour profile. This is not what you want for emails. Make sure your images are either in an RGB or an Indexed colour profile.

 

File Formats

Another important point to be aware of is the format in which you save your images. Typically, for graphics (eg. social media icons, logos, graphics requiring transparency) the file format should be a PNG, otherwise if transparency is not required, a .JPG image will suffice.

We support .GIF images / animations, but some email clients only display the first or last frame (not the entire animation); a limitation of the email client, not our system. You can test your email designs with Litmus Inbox Previews to learn more.

 

Image-only Emails

Finally, we don't generally recommend making your email only out of images (this was popular in the late 2000's for marketing or sales catalogue style emails).

Users with screen-reader software (such as persons with a vision impairment), as well as users with voice assistants such as Google Assistance, Siri, etc will not be able to detect anything usable inside your email and these systems will ignore it or junk the email.

Additionally, an email with very little text may be filtered into the spam folder by some email clients. Also, it's not possible to search for text inside an image - so if someone's trying to find your email in their inbox, it will be almost impossible for them to do so.

 

Padding, Margins & Borders

When designing your email, it's always a good idea to use some padding or margins - this ensures that text isn't right up against the edge of an email and / or an image.

Furthermore, when creating images to fit into your email, it's always a good idea to take padding into account. For example, if your email width is 700px but you have 10px padding around your components, your image width (once inserted into your email) will actually end up being 680px. This is due to the 10px padding (per side), which reduces the usable width the image has access to, by 20px.

The same applies with margins and borders. Padding, margins and borders on any component in your email will take up additional space, which needs to be considered in the overall design.

 

Links

Using links inside your email may seem self explanatory, however there are a few things to keep in mind.

For instance, if you paste in a long URL which spans multiple lines in the drag-and-drop email editor, this can cause rendering issues in some email clients. In most cases, it's always best to link some text (such as "Register here") instead of pasting the actual link as text.

The Click Map report is also handy for seeing what links people click on, which can help drive (and improve) email design & layout.

 

Content & Text

The content (text) in your email is generally the most important part - as it is the crux of what you're communicating. Here are a few things to consider when working with content in our email builder;

  • Creating content in another word processing application (such as Microsoft Word) can cause issues when pasting that content into the email you're building. We generally recommend writing your email inside the editor provided - or pasting from your word processing application into a plain text editor, such as Notepad, first. This will remove any unusual formatting that word processing applications tend to add. You could also try the icon provided within our text editor's floating toolbar to remove Word formatting (as shown below).
    remove-word-formatting.png
    Word processors are designed for print, so they'll add a lot of hidden code to make sure the document looks exactly the same on your printer as it did on the screen. Email is very different, as you're dealing with different screen sizes, resolutions, operating systems, email apps and more. This additional and unnecessary code won't work in an email and can make the email appear differently than expected.
  • Pasting text from PDF files can cause spacing issues, or create new lines & paragraphs where you don't intend them to appear (this is due to the way PDF files work).
  • When working with text, it is important not to use the spacebar to attempt to format or align your content. Doing so will insert a large number of non breaking spaces ( ) into the HTML behind the scenes. This will cause display issues with your email in some email clients. Instead, make use of the alignment options in the toolbar.
  • Use headings & subheadings to structure longer areas of text.

Our editor is designed to automatically reflow and wrap text on all kinds of screen sizes (mobiles, tablets, desktops, etc) - so try not to manually line-break important areas of text - such as headlines or headings as they will look different on the device your recipient is viewing it on.

This is evident in the comparison below, with the manually line-broken heading on the left (desktop view) displaying strangely on the right (mobile view).

email-comparison.jpg

 

Personalising Your Email

A personalised email will always perform better than a generic one, as it's going to resonate better with your contacts. Personalising can be as simple as greeting the contact by their first name, or as advanced as changing the imagery and colours in your email if your contact is on your 'Gold' loyalty plan, vs. 'Platinum' or 'Basic'.

Here are some articles to assist in personalisation;

 

Tables

While tables are useful for organising information, it is important to note that doing so will affect the way in which your email shows up on mobile devices such as phones and tablets.

Furthermore, nesting tables inside other cells or tables is strongly discouraged as this creates a lot of unnecessary code & causes display issues on most devices. Use tables sparingly if possible, as tables are generally not mobile-friendly.

Bulleted lists can sometimes be a suitable replacement for tables.

 

Columns

Although our drag-and-drop email editor supports the use of many columns in your email design, we don't recommend using more than two, in order to ensure compatibility with the largest number of email clients.

Some versions of Microsoft Outlook on mobile don't support columns.

 

Designing For Mobile

If you use our drag-and-drop editor to build your email, mobile support is automatically added for you. However, if you find that your reports are showing a higher-than-50% open rate on mobile devices, there's a few things you might like to do to make your email even easier to read on a mobile device;

  • Avoid using large, or very high-resolution images.
  • Use smaller blocks of text - as opposed to lengthy paragraphs.
  • Make good use of headings and subheadings.
  • Increase line spacing & padding a little.
  • Try not to add hyperlinks to elements which are very close to one another.
  • Use image banners that are less rectangular, and more 'square' (see sample comparison below).

email-comparison.jpg

 

Subject

Try and keep your subject concise, yet informative. According to our research (at the time of writing), the following can help increase your open rate through a well-written subject line:

  • Using between 4-8 words in your subject.
  • A total length of approximately 30 characters.
  • The use of an emoji (but only if it suits your audience).
  • Using Title Case Appears to Work Well.
  • Using a numerical digit, if you're going to use a number (eg. 2, not two).
  • Personalising the subject by inserting a wildcard.
  • Never use all caps (unless for an acronym or other accepted use case) - this is unprofessional and denotes shouting. No one likes being shouted at.

If you have several subjects in mind but aren't sure which may perform better, you can use our platform to automatically A/B test them.

A personalised subject line can have a six-fold increase on the open rate of an email.

 

Pre-Header Text

This text appears in some email clients, sitting under the email subject - and forms the 'preview' of the message. This is a great way to improve the open rate of your email. Learn how to add pre-header text to your email.

 

Designing for Accessibility & Supporting Those With a Vision Impairment

Tips & Tricks

The World Health Organisation estimates that there are 1.3 billion people with visual impairments, 36 million of which are considered blind. Here are some tips for ensuring your email can be read - and heard - by everyone who may receive it;

  • Keep email content to the point; the average attention span in email is just 13.4 seconds.
  • Use short sentences.
  • Use paragraphs with 2 - 5 sentences, then create another paragraph.
  • Left-align your text (this improves readability as it gives the eye a known anchor to start each line on); never use the justified setting and don't center text (headings excepted).
  • Use a minimum font size of 12px.
  • When writing headings, use the 'Heading 1', 'Heading 2' and 'Heading 3' presets offered in the font dialog when editing text areas of your email. These headings are compatible with screen-reader software and allow the recipient to easily skip through your email or jump to a certain section.
  • Use line spacing to make text blocks easier to read (though this is not supported in all email clients).
  • Use a colour palette that contrasts well. If you're not sure, test your proposed colours using a tool such as those recommended by Vision Australia.
  • Steer clear of image-only email designs. Anything that is not text cannot be read out aloud by screen readers or by voice assistance such as Google Assistant, Siri, etc.
  • When inserting an image into your email, use the ALT text field (located on the right hand side of the email editor) to briefly describe the image.
    alttext.PNG

 

Web Content Accessibility Guidelines

Our platform currently supports WCAG 2.2. You can read more about this at the World Wide Web Consortium (W3C).

 

High Contrast Colour Mode

If you use a high contrast colour mode on your computer, our platform will support this by adjusting the colour palette that we use.

This doesn't change anything in your email designs; just the colours used within our user interface. Please consult your operating system documentation for more details on enabling a high contrast colour mode.

 

Email Language

Our platform allows you to set the 'email language'. Note that this setting doesn't change the language of the email, nor does it translate the email. However, it automatically reflects in the email code, ensuring that assistive tools, such as screen readers, can provide the right language experience.

The setting for this can be adjusted on a per-email basis within the email editor (using the Email Settings panel, on the Design tab):

image (3).png

...or system-wide, by opening the Account area (⚙️ icon, at top right), then selecting Details from the sidebar:

settings-email-language.jpg

 

Further Reading

 

Avoiding Spam Filters

If you have followed the best practices in this guide but find that your email is still being marked as junk, try the following guides;

 

Test Your Email

Before sending your email, it's always best to test it. This could include using our test function to email yourself (or a colleague) a test version of your message - or using our integrated Litmus Inbox Previews to see how your email will appear in almost any email client.

 

Common Issues With Microsoft Outlook

Not all email clients are created equally. Some clients, such as Microsoft Outlook, do not follow common web standards & guidelines as set out by the World Wide Web Consortium (W3C). We have a separate article dedicated to this topic.

Common Issues With Microsoft Outlook

 

Article is closed for comments.