Digital Skills & Talent Gap Study: Summary of Top Findings – Register Now ›
Popular Today in Business: All Popular Articles

Eleven Keys to a Successful HTML Email

Online Marketing

Eleven Keys to a Successful HTML Email image mailmanEmail is one of the most effective tools in our modern marketing arsenal. It allows us to reach an enormous number of people with at a low cost and with minimal effort, especially when you consider the historical alternative.

Since the word “e-mail” was first used in 1982, the medium has undergone significant evolution. The first email, sent by computer engineer Ray Tomlinson in 1971, contained “something like QWERTYUIOP,” although he’s not at all sure, commenting that “It is equally likely to have been ‘TESTING 1 2 3 4’ or any other equally insignificant message.” Either way, it was a simple text string, a far cry from the colorful and interactive emails that will arrive in our inboxes in 2013.

Email technology is improving, and as marketers we would be amiss to not take advantage of it. However, HTML emails aren’t always easy; there are significant differences between how various email clients render your code, there are government regulations and images are often hidden by default.

Here are 11 applicable tips to ensure that your emails engage your subscribers and stand out from the crowd.

1. Use tables.
Responsive design evangelist Ethan Marcotte won’t be happy about this, but facts are facts: there’s simply not enough support for CSS to make the leap from table-based structures yet. While the rest of the Internet moves on, HTML emails are stuck with nested tables to ensure the highest degree of design integrity.

Related Resources from B2C
» Free Webcast: Digital Skills & Talent Gap Study Summary of Top Findings and How to Apply for 2015 Learning Programs

As of now, the best way to set up a centered, fixed-width HTML email involves creating a first table with a width of 100% and adding another table inside of it:

<table width="100%" cellspacing="0" cellpadding="0">
 <tbody> 
 <tr> 
 <td valign="top" align="center"> 
 <table width="600" cellspacing="0" cellpadding="0" border="0" align="center"> 
 <!-- Your content here! -->
 </table>
 </td> 
 </tr> 
 </tbody> 
</table>
Dust off your <br /> and <p> tags and get coding!

2. Know your restrictions.
While most email services have good support for the majority of HTML and CSS markup, there is a fair amount of scattering across the board on even fairly general issues. Which clients support CSS3’s text-shadow property? How about spacing using margin and its related shorthand?

Funny you should ask! Text-shadow is supported by all clients except for Outlook (all versions, from ’00 to ’13) and margin is supported by most – except for recent versions of Outlook and Outlook.com, which ignore margin-top/margin-bottom and margin/margin-top, respectively.

What about CSS’s background attribute? Well, it has no support on recent Outlook, Outlook.com or Gmail on Android 2.3.

Long story short: Use Campaign Monitor’s The Ultimate Guide to CSS Support, which is a comprehensive and well-designed list of CSS support in various browsers and email clients.

3. Use inline CSS.
While some clients support CSS in the tag, many (including Gmail) don’t. Make sure you’re coding CSS inline:

This is a styled paragraph that works in all clients!

I agree that it can be a hassle to code an email and then manually make a last-second change to each and every element, so I recommend the HTML email pre-mailer. Write the code between style tags in your header and then run it through this tool, which translates it across all of your various email elements.

Share this: Don’t communicate crucial information with images. Strengthen your email with their presence but don’t rely on it.


4. Assume viewers can’t see images.

Images are disabled by default for most of your subscribers, so you’ll have to cater your designs to them in a few different ways:

  • - Don’t communicate crucial information with images. Strengthen your email with their presence but don’t rely on it.
  • - Add ALT tags to everything. Even if the image isn’t displayed, the ALT tag almost always is.
  • - Be sure to scale images appropriate and specify their width and height. If you don’t, some clients may display the images at their actual dimensions.
  • - Leave images to the right-hand side of the email. This way, the content flow remains intact and unharmed even if the images don’t display as they should.

5. Maximum width of 600 pixels
Designers frequently contest that many email recipients now have larger displays and, as such, emails should be wider to take advantage of the increased space. This isn’t necessarily the case.

First, many people still use email clients like Outlook and Thunderbird to access their email. For us at BrightTALK, testing has revealed that well over 40% of our emails are opened on some flavor of Outlook, which has quite a bit of chrome in its interface that minimizes the usable space for email preview.

Second, the growing trend of checking email on mobile means that wider emails will be more difficult to read on mobile devices, and therefore quickly redirected to the trash.

Finally, for web-based clients, larger resolutions don’t necessarily mean wider browser windows. Google’s BrowserLabs site shows the percentage of browsers that can see content at various height/width positionings. Only 80% of viewers have a window wider than 1000 pixels, and that drops to 60% at only 1050 pixels.

In short, if you want recipients to see your email as you designed it, cap the width at 600 pixels.

6. Design with the reader in mind

This is a general design axiom, but is very much applicable to HTML emails as well. Examine your audience for various characteristics, including email client, profession, social media activity and any other distinguishing factors that you might be able to think of.

As you create your list of characteristics, examine the tools at your disposal and make notes on how best to cater your mailings. For example, if you frequently send to new subscribers who use Outlook or Gmail, two clients that don’t show images by default, you might think about minimizing the number of images in your emails in order to make them appear more correctly to new recipients. To examine if it’s worth including a Twitter link, you might check a portion of your email list against the Twitter email address tool  to determine if there is a high enough percentage of users.

7. CAN-SPAM compliance
The CAN-SPAM Act, which was passed in 2003 by the 108th US Congress, is a law that defines rules for commercial email in order to protect our poor inboxes. There are seven primary rules, and all are entirely reasonable, if not totally intuitive. The following is excerpted from the CAN-SPAM page at the Bureau of Consumer Protection at the Federal Trade Commission:

  1. Don’t use false or misleading header information. Your “From,” “To,” “Reply-To” and routing information – including the originating domain name and email address – must be accurate and identify the person or business who initiated the message.
  2. Don’t use deceptive subject lines. The subject line must accurately reflect the content of the message.
  3. Identify the message as an ad. The law gives you a lot of leeway in how to do this, but you must disclose clearly and conspicuously that your message is an advertisement.
  4. Tell recipients where you’re located. Your message must include your valid, physical postal address. This can be your current street address, a post office box you’ve registered with the U.S. Postal Service or a private mailbox you’ve registered with a commercial mail receiving agency established under Postal Service regulations.
  5. Tell recipients how to opt out of receiving future email from you. Your message must include a clear and conspicuous explanation of how the recipient can opt out of getting email from you in the future. Craft the notice in a way that is easy for an ordinary person to recognize, read and understand. Creative use of type size, color and location can improve clarity. Give a return email address or another easy Internet-based way to allow people to communicate their choice to you. You may create a menu to allow a recipient to opt out of certain types of messages, but you must include the option to stop all commercial messages from you. Make sure your spam filter doesn’t block these opt-out requests.
  6. Honor opt-out requests promptly. Any opt-out mechanism you offer must be able to process opt-out requests for at least 30 days after you send your message. You must honor a recipient’s opt-out request within 10 business days. You can’t charge a fee, require the recipient to give you any personally identifying information beyond an email address or make the recipient take any step other than sending a reply email or visiting a single page on an Internet website as a condition for honoring an opt-out request. Once people have told you they don’t want to receive more messages from you, you can’t sell or transfer their email addresses, even in the form of a mailing list. The only exception is that you may transfer the addresses to a company you’ve hired to help you comply with the CAN-SPAM Act.
  7. Monitor what others are doing on your behalf. The law makes clear that even if you hire another company to handle your email marketing, you can’t contract away your legal responsibility to comply with the law. Both the company whose product is promoted in the message and the company that actually sends the message may be held legally responsible.

8. Test compatibility
The first thing to do is determine what type of clients, web-based or otherwise, your recipients use to view your email. As you set up templates, test and refine them constantly, even if it means setting up a PC and a Mac next to each other to check emails with different versions of software.
9. Optimize, optimize, optimize
Your first email isn’t going to be perfect, and neither is your second. Be sure to implement analytics on your emails and examine open rates, click-through rates and “goal conversion” rates for each email.

Industry standards dictate that you implement A/B or multivariate testing on your emails. For each send, create two emails with slight differences and segment your email list into three sections. Send one version of the email to a quarter of the list and the other email to another quarter; the email with the higher conversion rate should then be sent to the remaining 50% of the list.

Make a note of best practices for subject line composition, send time and day, calls to action and email layout to continually improve the performance of your email.

President Barack Obama’s campaign team did an exceptional job of A/B testing, which resulted in an inspiring story on BusinessWeek.

10. Include a text-only version
Although this may seem outdated, there are a few very valid reasons for which to send a text-only email alongside the full HTML version.

First, some email clients and mobile devices still can’t handle HTML email. Even if it’s just 1% of your send list, you don’t want to miss out an opportunity to connect with your messaging.

Second, SPAM filters still like seeing that there’s a plain text option. If it’s missing, or if the content differs significantly from that of the HTML email, a red flag will be thrown up and might negatively impact the deliverability.

11. Keep it small
Just as with web design, be sure to optimize all of your images before including them in a custom email. It’s bad practice to resize images with HTML for a variety of reasons:

  • - It forces your recipients to download unnecessarily kilobytes.
  • - Dynamic resizing depends on browsers, email clients, and phones, which almost guarantees that some recipients will receive images that are both bloated and pixelated.
  • - Some clients don’t respect HTML width and height tags, meaning that the image will appear at its original size regardless, breaking up your beautifully crafted layout.

Mobile phone email clients will download images automatically, but don’t have the kind of speed (even with 4G LTE) that you would expect from a desktop computer. The smaller you can make your images, the more seamlessly they’ll display on all clients, browsers and device types and the better your recipients’ experience will be.

HTML emails are a complex, though useful, method of communication. Done correctly, they give you the ability to reach into thousands of inboxes with elegant and colorful messaging; done incorrectly, they can drive away potential customers. Track your results, optimize your emails accordingly and pay attention to these eleven keys to a successful HTML email.

Interested in more email marketings tips and strategies? Head over to our marketing community and check out our email marketing webinars.

Comments on this Article: 0

Add a Comment

Add a Comment:


Thank you for adding to the conversation!

Our comments are moderated. Your comment may not appear immediately.