25 Expert Ways to Build a Better HTML Email
A strong HTML email, that generates results, doesn’t have to be sexy. But it needs to be practical, easy on the eyes, and targeted to your audience. Here are 25 expert ways to build a better HTML email:
1. Keep the good stuff above the fold.
The most important information needs to stay near the top of your HTML email. Content loses value when you have to scroll down in order to see it. This way, the best stuff is right in front of their faces.
2. Stick to universal fonts.
We recommend using fonts like Arial, Verdana, Tahoma, or Times New Roman. Newer fonts aren’t installed on every computer. You don’t want your email getting lost in translation.
3. #FFFFFF no to using white text.
Spammers sometimes use white text on white background to hide messages. This can be picked up by spam filters, meaning your HTML emails will get lost in the day-to-day email mix.
4. Create a call-to-action that makes sense.
Tell your email recipient exactly what to do. Click? Call? Leave no room for interpretation.
5. The sweet spot for email subject lines is 40 to 50 characters.
Anything longer will get cut off for recipients using smartphones.
6. Use bullet points to clean up clunky email content.
This helps to quickly identify your key messages while minimizing the amount of copy.
7. Test graphics and images for email service compatibility.
Beware. Your email image or graphics aren’t going to show up for everyone. That’s because many recipients have images disabled for their email accounts. Usually, this means they will be prompted to click whether to download the images. If your text is formatted into your HTML, your recipients will be able to read some text. This encourages them to download the pictures.
8. Avoid placing words on graphics.
Sometimes print text on an image or graphic can appear fuzzy or blurry because the file is resized to meet maximum download speeds. This can negatively affect text readability.
9. Fewer images means faster email downloads.
Too many images and graphics can really bring the download speed of your email to a turtle’s pace. Potential customers may immediately close your email when they realize it’s taking too long to load.
10. You want more text, fewer images.
A higher image-to-text ratio in an HTML email increases your spam score, the likelihood of an email service filtering your email into a user’s spam folder. We recommend no more than 30% of a design area be used for images or graphics.
11. Read your headline out loud to determine whether it sounds “right.”
There’s a difference between spoken and read language. Something you say every day may not necessarily translate the same way in written text. This practice helps to eliminate potential disconnects in comprehension between you and your audience.
12. Make sure there’s a clear connection between your image and copy.
Nothing makes less sense than a graphic of pineapple paired with a sales pitch about lawn mowers. Not on this planet at least. Keep your email recipients on track with imagery and copy that thematically agree. The last thing you want is to confuse your audience because your HTML email missed the mark.
13. Literally proofread everything.
We’re talking about more than the copy in your image or the email body. Look at the date to make sure you have the year correct. Look at the header, the subject line, and footer copy. The little details matter.
14. Give the recipient a contact point.
This is especially true if your email doesn’t connect them directly to your website. An email address or another form of contact works in place of a landing page when you’re in a pinch.
15. Keep your message brief and to the point.
No one reads overly long emails. If you spend too much time getting to your selling point or call-to-action, you’re more likely to lose potential new customers. Save the in-depth information for your website or landing page.
16. Include more than one hyperlink to your website.
This gives the recipient multiple ways to get back to your website. Be sure they’re displayed prominently so the links are impossible to miss.
17. Your header should include your brand or logo.
This is one of the fastest ways for your recipient to identify your company, brand, or product.
18. Host your images on public web servers.
This allows email recipients to download your images. Beware of free hosting sites because they may prevent your images from showing up.
19. Keep your HTML email coding simple.
This helps to ensure your email will correctly appear on web browsers like Microsoft Edge and programs such as Microsoft® 365.
20. Use basic HTML tags for the coding.
If your HTML software uses CSS for formatting, adjust the preferences to apply basic HTML formatting tags only. If necessary, inline style sheets are an acceptable substitute for CSS, but they may still be stripped by some ISPs and email clients.
21. Set your email width to 600 pixels or less.
The fact is most people look at their emails using their email providers preview pane. This means anything larger than 600 pixels will be cut off, creating a less effective HTML email.
22. Some email providers will strip your code.
Email services such as Gmail™ and Yahoo!® will sometimes strip out body and head tags. This means you need to make sure your code doesn’t overlap theirs.
23. Avoid Javascript, Flash, and other rich media.
Most email clients will not support these. So, they should be avoided at all costs.
24. Test your email subject lines and headlines.
Deploy your HTML emails with different subject lines and headlines. The version with the higher open- and click-through rates is your winner. Then you can use the winning email for future deployments.
25. A catchy buzzword may just be another spam word.
Be careful when using words like best, free, no, discount, and anything else that sounds too much like a hard sales pitch. This can be picked up by personal spam filters and block your email from recipients.