How to create a good HTML email message
The suggestions presented on this page don’t need to all be followed to the letter. Overall, however, they represent best practices that have proven to result in email messages that are effective, compatible with all of the most popular email clients, and with high deliverability (the rate at which a message is delivered to the Inbox versus the Spam or Junk folder).
This document is based on the hands-on experience of our staff, who over the last 9 years has overseen billions of email messages sent by thousands of MailUp customers. Our experience tells us that more and more antispam filters are focusing on the reputation of the mail servers to determine whether a message might be SPAM, rather than on the contents of the message (which can often lead to false positives). Some filters also analyze the level of engagement. Two more reasons to choose a proessional system like MailUp to send your messages. That said, the message itself (its contents and its structure), still plays a role in determining whether it will be delivered in the Inbox or in the Junk or Spam folder.
Before we start
What does it mean when we say something like: (0.48 points)
In some cases we will highlight the number of points that are likely to be debited to the message if you violate certain rules. Each element (called token) is not particularly relevant when considered on its own, but it contributes to an overall message score. When the score exceeds a certain threshold (typically 5.0), the message is labeled as SPAM and is either blocked by the spam filter or automatically moved into the Junk/Spam folder by the email client. When the value associated with a certain element is negative, that’s a positive thing as it reduces the overall score.
A) Message subject
Together with the sender of the message, it’s the element that has the biggest effect on the open and click rate.
Back to top
- We recommend that the subject be of four words or less. We also recommend using 35 characters or less, including spaces.
- Always include the name of the company or main message sponsor. This not only provides immediate recognition, but also allows you to keep building your brand. Alternatively, you can include the name of the company or main sponsor in the name of the sender.
- Don’t be generic (e.g. add the month or the date to differentiate from other messages with a similar or same subject), and try come up with a subject that will motivate your customers to open the message, but never use a statement that is untrue or misleading, or unrelated to what’s included in the message. It never pays off to do so.
- Don’t use special characters. For example, if the language you are writing is uses accented letters, replace accents with apostrophes (e.g. not “à”, but a’). Avoid using characters such as “& < >” and make sure that you have set the correct charset for your language (this is done in the list settings).
- Do not write a message with ALL CAPS (0.48 points)
- Don’t use consecutive exclamation points.
- Make sure the subject is not empty (0.34 points)
- Don’t use the word FREE in ALL CAPS (0.43 points)
- Don’t start the subject with an amount (e.g. $100 or 5000 points), or with the word “Free” (0.30 points) or “Hello” (1.58 points)
- Don’t use the word “GUARANTEED” (0.62 points)
- Don’t start with the user name (the portion of the recipient’s e-mail address that comes before the “@”) (2.86 points), while using the recipient’s name can provide an advantage.
- Don’t use multiple white spaces (2.64 points)
- Avoid using question marks or exclamation points (0.10 points)
- Use the word “list” (-0.22 points)
- Use the word “news” (-0.62 points)
- Use the words “in review” (-1.00 points)
- Use message frequency indicators, such as “monthly” (-0.48 points)
- Include the date (-1,60 points)
B) Message Body
Things to avoid
- The size of the message should not exceed 50KB (and definitel below 60KB), including images. It is recommended to slice large images into multiple slices and recombine them using an HTML table;
- Make sure that all links are valid;
- The design of the message should be based on a width of 600px or less. The recommended width is 560 pixels. This is to minimize the chances of any horizontal scrolling.
- Enter relevant information immediately at the top of the message. Many mobile devices do not download the HTML message, but rather only the first few lines of the text version of the message. So remember not to rely on images to convey important messages, and include engaging content right at the top, so that the recipient is motivated to download the rest of the message.
- Remember that images are often not downloaded by deafult, and therefore the text included in the ALT tag of the image will be shown instead (e.g. Microsoft Outlook).
- Including customer service information (e.g. phone number and/or e-mail) is often a good idea;
Things to do
- Do not use dark backgrounds;
- Don’t use background images: they are often not displayed;
- Don’t use absolutely positioned
- Don’t position images using X-Y coordinates;
- Don’t use the image “low source” attribute (lowsrc);
- Don’t use the image “roll-over” attribute (hsrc);
- Don’t use the image map “shape” attribute: image maps should not be used at all due to inconsistent support;
- Don’t use white text;
- Don’t use pop-ups;
- Avoid using special characters such as
< > & €.
- Avoid using IP-based links (e.g.
http://22.214.171.124/). Use the domain name instead.
- Avoid using links that point to domains that end in .info and .biz. We recommend that the email sender is also not using these domains.
- Avoid creating messages that contain too many images and too little text. Remember that text is what counts. Images are there only to improve the look of the message, if needed.
- Avoid using the
mailto: tag. Instead, link to a page that includes contact information or a contact form.
- Avoid using text that includes spaces, which appears as an attempt to hide a word (e.g.
s p e c i a l t e x t)
- Do not include message indicating that you complay with anti-SPAM regulations. Typically, it’s only the spammers that include that kind of language (from 1 to 3.48 penalty points).
- Do not transform all text in a link: most of the text included in the message should not be a link (just like on a regular Web page).
- Do not use the domain name as the link text:
That’s because anti-phishing filters such as the one used by Mozilla Thunderbird could interprete the link as phishing unless link text and HREF value are absolutely identical, which is typically not the case because the link is replaced by MailUp with a tracking link. Instead, use link text that is different from the domain:
My Web Site
Words that could trigger a “red flag”
See this article
- Always open links in a new window by using the
target attribute set to
_blank. Otherwise you risk having the destination URL open within the current frame of the Web-based email client that the customer may be using, which is not what the customer wants.
- Always include one or more links, so you can track activity on the message, but try to limit the number of links to 10 or less.
- Use descriptive names for your images (e.g. 30-dollar-discount-promotion.gif), instead of generic ones such as image1.gif, image2.gif.
- Use simple, validated HTML syntax (you can use the W3C HTML validator right from within MailUp);
- If you are adding attributes to your links (e.g. name, target, class, style, etc.), place them after the main
- If the link points to a Flash-based landing page, make sure that there is also an alternative, HTML-based landing page.
- If you are using the
<font> tag, make sure to use absolute sizes (e.g.
size=2) and not relative ones (
size=+1), and don’t use a font size that is too large (e.g. 4 and above).
- Add a signature, without empty lines (-0.30 points)
- Add a signature, with empty lines (-2.09 points)
- Add a long signature (-3.13 with empty lines, -0.30 without)
- Include a message between quotes (-0.83)
- Always include the image
ALT tag, containing only a few words that describe the image;
- Use text buttons for a “call for action”
- Make sure that the HTML code includes a doctype declaration;
- Make sure to include the
Title HTML tag, with a title that’s different from the default one created by many HTML editors (e.g. ‘Untitled’ or ‘New page’);
- Ensure that all links are valid. You could use a link validator such as the one provided by the W3C: http://validator.w3.org/checklink. You can also do this directly from within your MailUp console when reviewing a message before sending it.
- Use simple XHTML tags: h1, h2, h3, h4, h5, h6, p, ol, ul, li, table, tr, th, td, a, img
- There are many tags that are often removed by the email client (especially if it’s a Web-based one). For example:
<meta>, <link≫ <script> </script> <title></title> <noframes></noframes> <iframe></iframe>
- If you are sending a message with images embedded into it, make sure the image names do not contain spaces as they could create problems in certain email clients. If the image is a GIF, you should avoid using names with more than 8 characters.
- Text-only email clients will show the text version of your message and display the link as the URL to the page. For that reason, you shouuld make sure that links are short enough not to wrap (recommended: 75 characters or less). URL-shortening systems should be avoided as they are sometimes abused by spammers and could therefore become a “red flag” in your message.
- When using CSS, make sure to include it inline. This is especially important for table cells: you cannot use a CSS class or an external stylesheet, so you will have to include the style inline for each cell, and you should do this because otherwise the styling my be applied based on another, external CSS when the message is shown in a Web-based client. Also ensure that links are underlined, so that it’s clear that they are links (
<span style="text-decoration: underline;">My Link</span>).
- Keep in mind that there is certain text that will be automatically turned into a link by the mail client, even if it is not a link. For example,
janeDoe@example.com, www.example.com, test.example.com, etc. The style used for the link will be the default style used by the email client, which will change depending on the email client (e.g. Gmail vs. Yahoo! Mail). Run some tests to see how the message will be rendered.
- Use the
title="This is a description of this image or link" attribute for images and links to provide a description of the image and link on mouse over. This can improve the user experience. Please note that the
title tag should be used for describing an image with a sentence, not the
alt, which is instead intended to provide a very brief description of the image (typically 3-4 words).
- Use the
<br> tag instead of the
<p> tag, unless you are styling the
<p> tag with inline CSS, including margins and padding. Otherwise it might inherit default styling from the mail client, rendering the message differently from what you expect.
- The old HTML design trick of using transparent, 1px GIF images to set the width of table columns becomes handy again when designing an email message due to the lack of support for CSS.
- The background of the HTML message should always be white. If you need other backgrounds, create an HTML table and assign the background color at the table or table cell level.
- Make sure to keep your HTML code clean. A cleaning service for your code is available free of charge here: http://infohound.net/tidy/
for a list of words that could trigger a “red flag”.
Back to top
C) General Recommendations
Back to top
- Since the reader’s attention is highest at the beginning of the message, make sure to include compelling content in the first 3/5 rows. You will want to catch the reader’s interest and motivate her to open or further read the message. If you have an image at the top of the message, remember that in many email clients it will not be shown when the message is first opened (or previewed), so make sure to include both an
alt tag (very brief description, 3/4 words) and a
title tag (longer description).
- Keep the HTML code at the top of the message as short as possible: that’s what will be shown by many email clients until the message has been opened, so make sure the reader can see what the message is about.
- Don’t use MS Word to write your message. If using Word is the only option, paste the text from Word into the MailUp HTML Editor using the corresponding feature (Paste from Word), so that the code is properly sanitized (many non-standard tags are removed). Instead of Word, use an HTML editor, if you prefer not writing the message directly in MailUp: for an updated list of HTML editors – including some free ones – we recommend visiting Web sites like Wikipedia or About.com.
- Always test your message, both on Web-based clients (Hotmail, Gmail…) and desktop-based ones (e.g. Outlook and Thunderbird). You can find older versions of a particular browser here: http://browsers.evolt.org/)
- Configure email authentication, which allows to provide more information on your identity to the receiving servers. See Instructions for implementing email authentication. There are several antispam systems that add **SPAM** to the subject of the message, if the sender cannot be authenticated.
- Any call-for-action button (buy, signup, visit, etc.) should be available also in text format, and clearly visible (not just an image).
D) Message Structure and HTML Code
MailUp offers several services aimed at ensuring that a message is not blocked by antispam filters:
- Keep the HTML code as simple as possible.
- Gmail only renders inline cascading style sheets: all other CSS is ignored. Therefore, you will need to use something like…
<p style="font-family: Verdana, sans-serif; font-size: 12px;">
… and not:
Outlook 2007 also has limited support for CSS. If you wish to use CSS, you must use it inline, even if this goes against any Best Practices about designing Web pages with CSS. The design standards that apply to Web pages – when it comes to cascading style sheets – unfortunately do not apply to email messages at this point in time. For more information on the rendering capabilities of different email clients, please see http://www.email-standards.org/
- Remember that the first few lines of the message will be shown in the preview pane of many email clients without rendering the HTML: the more HTML code you have at the top of the document, the higher the chance that none of the actual content of the message will be shown in the preview pane, reducing the chances that the message will be opened.
- Images should be JPG or GIF. The use of PNG really depends on your user base: older versions of Lotus Notes (prior to version 8) and Outlook (2000 and earlier) did not properly support PNG. This means that – with an users – support for PNGs is now rather widespread. In the business community, however, where sometimes older software versions are upgraded more slowly, there could be some compatibility issues.
- GIFs are best for images with a limited number of colors, such as logos. GIFs are great when the image contains text. The GIF format supports up to 256 colors, so it does not do a good job with imags that contain a lot of colors, such as with gradients. JPG is best when a lot of colors are used, such as with photos.
- Do not use animated GIFs as the email client may not support the animation (E.g. Outlook 2007 will only show the first frame).
- If you are using an image map, which you can create in the editor included in your MailUp console, make sure that the code that defines the links for the map is within the BODY of the message. Also note that Hotmail no longer supports image maps.
- Don’t use white form on a dark background because the background may not be rendered in some email clients and the text would not be visible. This can create issues not only with your customers, who will not be able to read the message, but also with some antispam filters that might consider that as a “red flag”.
- Avoid using accented letters (such as è, à, ò, ì), and instead use the letter followed by an apostrophe, or use the HTML equivalent of that character (e.g.
à for à). Be careful with special characters used by MS Word that may not look like special characters (e.g. quotes, dashes, etc., which are turned into a special character by Word). Use the Paste from Word feature when pasting text from Word in order not to run into this problem.
- Test the message in different Web- and desktop-based email clients, or use the Email Analysis service to speed up the process.
- Studies have shown that the content in the top-left typically attracts the most attention. For more details: http://www.poynterextra.org/eyetrack2004/main.htm
- Different email clients interpret the same HTML (and CSS) differently. A very useful, in-depth analysis with visual examples is available at http://www.email-standards.org/clients/
- Always make sure there is enough text in your message. A message that is predominatly made of images typically will have lower deliverability and a lower overall click rate.
- To avoid unexpected white space between images on Gmail and Hotmail, use the following methods (changes depending on the location of the image):
style="display:block;" added to the image
align="left" added to the image
align="right" added to the image
style="float:left;" added to the image
style="float:right;" added to the image
- Insert the image in a paragraph with
style="line-height:10px;" or equal to the height of the image
- Insert the image in a paragraph with
style="font-size:2px;" or smaller
- Email Analysis:
An optional feature that allows you to preview how your message will be displayed across all of the most popular desktop- and Web-based email clients, with different settings. It also allows you to verify that the message will not be blocked by the 10 most popular antispam filters used both at the desktop level and at the ISP level.
- Return Path certification
The most prestigious international white list, which guarantees that your message will not be blocked by the most important antispam systems.
Our team of experienced email marketing gurus will monitor your message deliverability and proactively contact you about making changes that can improve it.