We want to help you create effective HTML emails that engage your audience and drive results.
This article explores the best practices for designing HTML emails, including:
- Optimising your emails for mobile devices
- Choosing the right fonts and colours
- Creating a strong call to action
- Testing your templates
Layout
Having a clear understanding of your brand is key and this should always reflect in your emails, which then makes them easy to identify as a customer.
Headers and footers
Include a header and footer in all of your email templates.
This helps to create a consistent look and feel throughout your emails, making them easier to recognise.
Consistent width
Set a consistent width for your email template - 600px is a good standard size for most emails.
A set width also makes it easier to build more complex structures into your template, e.g. three or four images on one row, as long as the image sizes add up equally to 600px:
Optimise for mobile
More than half of all email opens happen on mobile devices.
Keep this in mind when designing your email and make sure it is mobile-friendly and responsive:
Keep the layout simple
The layout of the email should be simple and easy to navigate.
It's best to use a single column layout, as it works well on both desktop and mobile devices.
Use a responsive design
A responsive design will automatically adjust the layout of your email to fit the screen size of the device it's being viewed on, so your email will look great on both desktop and mobile devices.
Use a clear and readable font
Use a font that is easy to read on small screens. Sans-serif fonts like Arial or Helvetica are good choices.
See also: Fonts
Optimise images
Use images that are optimised for mobile devices.
This means using images that are small in file size and can load quickly on a mobile network.
See also: Images
Use a clear and compelling call-to-action (CTA)
Your CTA should be easy to find and should clearly indicate what action the reader should take.
See also: Calls to action
Test your email
Before sending out your newsletter, test it on different mobile devices and email clients to make sure that it looks great and is easy to read on all of them.
See also: Testing your email campaign
Stack your content
Make sure you are stacking content in your emails when needed, so it doesn’t end up looking squashed.
The most attractive emails look clean and simple.
On desktop:
On mobile (stacking):
Balance text and images
Email campaigns that only contain images can affect your deliverability in a negative way, as these emails are more likely to end up in the recipient's spam folder.
Too many images can also slow down your loading speed, so it’s always best to balance text and images as much as you can.
Think carefully about the placement of your content and hierarchy.
Main offers should be close to the top of the email, as you want your contacts to see these first.
If you have a navigation bar in your email, you can hide it on mobile so that your main offer is more visible. Do this by applying class="hide" to the element(s).
Accessibility
Accessibility in HTML email refers to the practice of designing and coding email messages so that they can be easily understood and used by people with disabilities.
This includes people who are blind or have low vision, those who are deaf or hard of hearing, and those with motor or cognitive disabilities.
Keep it simple
Use clear, concise language and avoid complex layouts or designs that can be confusing for people with cognitive disabilities.
Semantic markup
Use semantic HTML elements like headings, lists, and paragraphs to structure the content of your email.
This makes it easier for assistive technologies like screen readers to understand the layout and meaning of your email.
Avoid images with embedded text
Many email clients block images by default, so relying on images with embedded text can make your email harder to read.
Alt text for images
Add descriptive alt text to all images in your email.
In the code this would be alt="" or you can easily add it from the visual editor:
This allows screen readers to describe the image to people who can't see it.
Descriptive links
Use descriptive text for links, instead of generic phrases like "click here."
This helps people using screen readers to understand where the link leads.
Easy to read font colours
Black and dark grey are good font colours for emails.
Avoid using light colours or colours that clash with your background colour.
Use colour with care
Avoid relying on colour alone to convey important information.
Use high contrast colour combinations and provide text alternatives for colour-coded information.
Fonts
Font size
Use a font size of at least 14px
Many people read their emails on mobile devices, so it's important to use a font size that is easy to read on a small screen.
Number of fonts
Limit the number of fonts you use.
Using too many fonts can make your email look cluttered and unprofessional.
Stick to one or two fonts throughout your email.
Formatting fonts
Avoid using ALL CAPS or excessive bolding.
Using all caps or excessive bolding can make your email look like it's shouting, so use these formatting options sparingly.
Custom fonts
If you want to use custom fonts, you'll need to have the font files added to your template.
Not all email clients (Yahoo, Outlook, etc.) support custom fonts, so you should use font-family:
font-family:arial, sans-serif;
font-family:'custom font', arial, sans-serif;
font-family:times, times new roman, serif;
font-family tries to use the first font in the list, and if that’s not possible, works through the list in order.
See also: Can I use custom fonts?
A list should comprise all serif fonts or all non-serif fonts, and they should be as similar as possible.
You should only use one custom font in a list, and it should always be the first in the list.
After that you can use a non-custom font, e.g. Trebuchet or Garamond, then a web-safe font.
Lastly, an instruction for the email client (Yahoo, Outlook, etc.) to use whatever standard serif or sans-serif font they have.
Web safe fonts
| Serif fonts | Sans-serif fonts |
| Georgia | Arial |
| Times New Roman | Helvetica |
| Verdana |
Images
Follow these best practices to make sure your images are effective and enhance the overall user experience.
File format
Using the right format can help preserve the sharpness of your images.
JPEG is best for photographs, while PNG is better for graphics/illustrations and GIF for short animations.
High-quality images
Low-quality images can make your email look unprofessional and detract from the overall user experience.
Make sure to use high-quality images that are clear, crisp, and visually appealing.
Optimise for Retina displays
Retina displays have higher pixel density than traditional displays, which can make images appear sharper.
To optimise your images for Retina displays, use images with twice the resolution you would normally use and then scale them down to the appropriate size.
The newsletter I’m creating requires a banner image to be the width of the email, which is 600 pixels wide.
Rather than scaling my 72dpi image down to 600 pixels (600px), I will set this image to twice the expected size, which is 1200px.
When applying this image in Ometria, I will set the image width to the required size, which is 600 pixels.
As a result, my image fits within the width of the template and looks sharp in all devices.
Optimise image size
Images that are too large can slow down email loading times and increase data usage, which is frustrating for subscribers.
The aim here is to make your file size as small as possible without causing any noticeable loss in image quality.
One of the best ways of optimising images is by using one of the many available free to use online file compressors.
Recommended sites for image optimisation
These websites offer free image optimisation tools that can help you reduce the file size of your images and improve the load times of your emails.
- TinyPNG - TinyPNG is a popular image compression tool that uses smart lossy compression techniques to reduce the size of your PNG and JPEG images. It's easy to use and can reduce the file size of your images without losing quality.
- Compressor.io - Compressor.io is another image compression tool that supports multiple file formats, including PNG, JPEG, GIF, and SVG. It offers both lossy and lossless compression options and can help reduce the file size of your images by up to 90%.
- Kraken.io - Kraken.io is an image optimisation tool that offers both compression and resizing options. It supports multiple file formats, including PNG, JPEG, and GIF, and can help reduce the file size of your images without losing quality.
Use alt text
Alt text is a brief description of the image that displays in place of the image if it doesn't load.
This is important for subscribers who have images disabled in their email client, as well as those using assistive technology to access content.
Make sure to include descriptive alt text that accurately describes the image.
See also: Alt text for images
Use images sparingly and strategically
While images can enhance the visual appeal of your emails, too many images can also make your emails look cluttered and unprofessional.
Use images strategically and only where they:
- break up text
- create visual interest
- add value to your content.
Use images that are relevant to your content and place them strategically to enhance the overall flow and structure of your email.
Test your images
Before sending your email, test your images in different email clients to make sure they load correctly and look good.
You should also test how email looks with images disabled, as some subscribers may have images turned off by default.
For example, you might find that with images turned off the context of the email has been lost.
In this case, consider moving key messaging into a section of the template that contains live text.
Calls to action (CTAs)
CTAs, or calls to action, are an essential component of HTML emails because they encourage the recipient to take a specific action.
Here are some of our best practice tips.
Clear
Using multiple CTAs can confuse the recipient and dilute the effectiveness of each individual CTA.
Stick to a single, clear CTA that tells the recipient what action you want them to take.
Prominent
Your CTA should be placed in a prominent location where it's easy to see.
Good locations include:
- Above the fold
- In the first screen the recipient sees when opening the email.
Buttons
Buttons are more eye-catching than text links and are easier to click on a mobile device.
Use a contrasting colour for the button and make sure the text on the button is clear and action-oriented.
Language
The language you use in your CTA should be clear and action-oriented.
For example, instead of "Learn more", use "Sign up now" or "Get started today."
Concise
Keep your CTA short and to the point.
A short CTA is easier to read and is more likely to get a click.
Stand out
Use contrasting colours, bold text, and a larger font size to make your CTA stand out from the rest of your email content.
Mobile-friendly
Many people read their emails on mobile devices, so it's important to make sure your CTA is mobile-friendly.
Use a large button that's easy to click on a small screen.
See also: Optimise for mobile
Email footers
Here are the elements we recommend including in your email footer.
Unsubscribe link
Unsubscribe links are a legal requirement.
You must provide a way for your customers to opt-out of your marketing emails.
Company address
Include your company address or mailing address.
Preference centre link
This is not a legal requirement, but many businesses include this to get a better understanding of what a customer wants to receive in their mailbox.
Terms & conditions
These can be included in your footer, if there is information that needs to be stated.
View in browser link
This allows a user to click and open within a new tab on their browser.
You might also want to include this at the top of your email.
Privacy policy link
Include this if you'd like your customers to know what your privacy policy is.
Testing your email campaign
Litmus and Email on Acid
Litmus and Email on Acid are great tools to use when creating your email templates as they provide previews of almost all email providers and a variety of different devices.
If you see an issue, you can troubleshoot and use Litmus/Email on Acid to see if your fix has worked.
They also provide a detailed run-through of potential other issues such as loading time, links and accessibility.
Send live tests
It’s always a good idea to send live tests to more than one of your team's inboxes.
We recommend creating as many test email addresses as possible for platforms like Outlook, Gmail and Yahoo.
This way you can see the user experience first hand and troubleshoot any issues that you may see.
This is a good way to check all of your links and images are previewing as you want them to.
Dark mode testing
There is no universal way to target dark mode for all devices and email clients, but there are small hacks you can do in your template that would help a user's experience if they have dark mode set.
Make sure all of your images are PNG files, and remove backgrounds if they are not needed.
This allows the images to look cleaner as the image background will now match the background colour of the dark mode template.
Although having no background can be beneficial for your images, it can also have a negative impact on your logo.
If your logo is a dark colour already, we recommend adding a background colour to the image itself, which should be the same as the background colour set behind it in your email template.
This helps with the visibility of your logo when colours are inverted.
Comments
0 comments
Article is closed for comments.