9 steps to create successful HTML email templates
Email marketing is still one of the most effective digital channels to see an ROI. Many businesses rely on it to build brand awareness, communicate with prospects and customers, and to promote their services and products.
And yet, it’s still an area that’s often disregarded by companies, especially when they want to produce original email marketing efforts (instead of using basic email templates).
HTML emails aren’t web pages – don’t treat them as such
If you thought that they are far too many web browsers out there, things get even worse in the email world.
When you consider the variety of email client programmes that are available right now, an easy looking task can quickly become a daunting task. Outlook, for example, has multiple versions available for desktop, webmail and mobile environments. As you will discover, all these “Outlooks” don’t render the same.
This is a whole new ball game. To create a successful HTML Email Template for your original marketing campaign, there are 9 points to consider:
Table of contents:
1. Learn specific html email coding techniques
2. Design with ‘mobile first’ in mind
3. Use live text on your key messages instead of having them as images
4. Learn the tricks to succeed with Outlook
5. Use safe web fonts as a fallback font if you use ‘custom’ fonts
6. Include fallback colours for your background images
7. Optimize your images
8. Using animated GIFs
9. Test your HTML Email thoroughly
1. Specific HTML email coding knowledge is necessary
You wouldn’t hire a print designer to design a website. You want someone who is experienced in digital design and UX. To maximize your marketing campaign reach, the design of an HTML email requires specific knowledge of email client apps and rendering issues.
Your designer and programmer should touch base very early on to determine the correct approach for your email design. Your programmer needs to be experienced with what does and what doesn’t work for HTML emails. Otherwise you may get an HTML template that looks great through the web browser but renders poorly in emails.
2. Design with mobile-first in mind
Mobile remains the most popular reading environment for HTML emails.
It’s not a surprise then that a recent survey by Litmus showed that 51% of people unsubscribed from newsletters because the emails didn’t display well on their smartphones.
Luckily, most email clients support responsive content nowadays, meaning that you can include specific codes for different screens in your email and optimise the experience for mobile users.
If your design is well-planned, keep the copy as live text whenever possible. Below is a good example of using both techniques: a device-specific image and live text (more on that later).
The first email image is shown on a desktop, whereas the second was opened on a smartphone (where we used a mobile-specific image).
So they don’t look blurry on retina displays, design mobile-specific images twice as wide as the user device width.
3. Keep as much ‘live text’ as possible
In the previous section, you see an HTML email design that combines copy and image on a blue background.
The solid colour allows us to code that section as two blocks: one with a background colour and live text above it, followed by an image block (which makes the responsive HTML email look steady across all devices).
You should use live text on your HTML email design in order to:
1. Edit that text whenever necessary.
2. If your email client blocks your images, recipients will still be able to read the text.
4. BE prepared for Outlook
Unlike most other email clients, Outlook has limited support for modern CSS.
There are technical workarounds that you can implement to make your email render properly across the various versions of Outlook.
Usually, a designer will create some ‘awesome’ email designs, but when coded and sent to you, it looks totally different in Outlook. For example, a call-to-action that’s coded with rounded corners in your design will display as a rectangle with square corners in Outlook:
5. Beware of the ‘Custom’ Fonts
It’s not uncommon for designers with no HTML email experience to try and stay on-brand, designing their emails using the same typography used for the website. It’s important to remember that custom fonts might not render well in your customers’ email programs.
Always put a fallback web-safe font (e.g. Arial) in your email HTML. Web-safe fonts are the default fonts found across the majority of different operating systems and devices.
The following images are examples of how an email might look like without a fallback font:
Corbel custom font is used in the first image. Times New Roman is used in the second as a system default font.
6. Use fallback colour for background images
Let’s face it: Designers love to use backgrounds of all kinds. They’re powerful visual elements that make your messages stand out, and we absolutely agree that it makes everything more attractive and appealing.
One of the biggest pains with HTML emails however, is the partial lack of support for background images.
Backgrounds won’t show up on certain email clients. Instead, you may end up having a blank white area with your important message at the top. If your copy is white, you’ll end up with an hard-to-read (or even invisible) section.
Consider including a fallback colour that appears when the background image doesn’t load or will be seen behind images that have transparency.
The first image shows live text on a background image. The same content with background image blocking is used in the second. We use a fallback blue colour to maintain brand colours and readability.
7. Reduce your assets size
Designers usually include hi-res photos in their email designs but you must be sure that these images are resized and optimised before inserting them into your HTML email template. This results in an email that’s as light as possible and one that can be rendered quickly across various devices.
This is important. Why? Because as well as the page-load time affecting websites bounce rates, having a big latency considerably decreases conversion rates of your email also.
Resize full-size images to no more than 1200px wide, then run them through an image optimiser like TinyPNG. This will give you the right balance between image quality and file size.
8. Should you use animated GIFs?
In 2018, 56.6% of email marketers said that they used animated GIFs in marketing emails.
GIF animations are great for triggering reader interest and to showcase your products and services. In a nutshell? They make complex concepts easy to understand.
Although it’s an attractive approach, there are some caveats:
1. Slow loading time
Heavier files can be slow to load and play, especially for users using mobile data connection.
2. Decrease device performance
This feature will increase your CPU load, which can harm device performance and make an email app unresponsive.
3. Not supported by all email clients.
Outlook, for example, renders the very first frame of your GIF animation.
To give you an example of why this is important, think of a GIF that has an animation ending with the most appealing frame. Outlook users will not see that frame unless you go for the fallback approach.
Consider inserting a separate fallback image for Outlook with your most desired animation frame. For example, the first image below is an animated GIF as you would see it in most email clients. The second image is what Windows Outlook users will see without an Outlook-specific fallback image.
First image – animated GIF inserted in the email. The second image is what Windows Outlook users would see unless you put an Outlook specific fallback image with your preferred animation frame.
9. Test your emails
Before sending an email campaign, test your email to ensure that it’s rendered properly across most – if not all – email client applications.
Don’t forget to send and check your tests on the real devices and programmes that you normally use.
What else do I need to know?
This list includes some of the most important steps you should take to build solid, attractive HTML emails. You’ll need a few more tricks and tweaks – like handling long URLs (which can break your mobile layout), use of gradient colour and many more.