Just a few years ago sending html email meant lower open rates, more trips to the spam folder and more often then not, lower profits.
Why? Well it’s because people had a hard time reading html email. After all, a few years ago, not many email clients supported it. But time have changed – substantially.
Let’s first point out the pros and cons of sending html email before we get into how to create it.
Pros:
- They are more pleasing to the eye.
- They can include graphics, icons, links, and even web forms and video.
- Higher open rates due to interesting preview capability.
- Ads are often be more effective in HTML and show higher conversion rates.
- Most popular email clients now support html email.
Cons:
- Can be slow loading due to load if graphics aren’t optimized.
- Hackers can send viruses, trojan horses embedded in html email.
- Users may turn off the option to receive html email, or use filters to quarantine it.
But at the end of the day, if you want to send STYLED html email to your subscribers for branding purposes or to highlight the items you sell from your ecommerce web site there are a few things you need to know before you get started.
So let’s get started with the most important tips to make sure that your HTML e-mail not only looks great in all browsers but gets opened more frequently as well.
After all, on average, subscribers receive 416 commercial messages a month.
Therefore, you need to make yours stand out AND get opened.
1) Use Tables to Structure Your Layout
Make sure you set all available table attributes including cellpadding, cellspacing, border, valign, height and width.
TIP: Set the width for your table is to set the width for each cell, not to the table itself. You should avoid using percentage-based widths as well.
Nested tables are your friend. Make sure to use proper indentation for clean easy to read code. Use the background attribute on a table cell to set background images. This is the easiest way to get passed backgrounds not displaying in Gmail.
Here’s an example:
Note: Your background images will appear tiled… so plan your design around that. Also background images can be applied to tables or divs, HOWEVER they are not supported by some e-mail clients like older versions of Outlook 2007. So be sure to provide a backup color just in case.
2) Be sure to clean up any unnecessary white space in table tags
- Some clients like Yahoo and Outlook will often add additional padding low or above the cell contents breaking your design
3) Go No More Than 600px With Your Design:
- Many people don’t actually bother to open their email. they instead view them in the preview panel.
- On average the smallest preview panel is around 600px, so always design your emails accordingly, unless you don’t want your full email viewable in the preview panel, of course.
4) Use Inline Styles When Coding Your CSS
- If this were the website world, every developer on the planet would say, “do not use inline styles, create a class for it”. Unfortunately, in an email, this is not possible, as the email clients will strip them out, and we don’t want that. So if anything needs to be styled, use inline styles.
- Elements like font type and size can be used within the <table> tag, but individual styles should be placed on <td>’s. And it’s important
- Some popular email clients ignore the code inside your head tags. Gmail and Hotmail are particular culprits that come to mind.
5) Skip The Shorthand With Font and Hex Notation. Several email clients totally ignore CSS shorthand for the font property. For example, avoid setting up your font styles like the example below could cause you some issues.
So to avoid that you should declare the font properties separately like the example below.
6) Making Sure Your E-mail looks Almost The Same In All Browsers:
- Use break tags as a replacement for vertical padding.
- To change the amount of space these breaks use, wrap them in span tags and set a smaller/larger font size for them.
- Repeat inline styles frequently.
- Make sure to set inline styles on all of your HTML elements.
- Apply detailed inline styles to links Especially for Gmail users.
- Be Sure to set specific styles to every link. If you don’t they will inherit the default font-family, size and color set by the user’s browser.
- Wrap your images in span tags and set font attributes to style your ALT text accordingly. This lets you style your ALT text, making it more readable when images are disabled which happens a lot more then you might think.
7) Avoid JavaScript = Junk Email
You can’y include any sort of JavaScript in your html email. Email clients see java as a threat, so if you decide to use Java there is a very good chance your email will end up in the junk folder.
8) Encode All Characters:
Although we don’t technically have to encode characters, it’s best we do. Many Email Service Providers like 1AutomationWiz allow you to endcode your email automatically.
When viewing emails in various email clients, we cannot guarantee the charset every website is using, so encoding characters allows us to be certain that all characters are being displayed as they should.
Here’s an example of code that “might work”
Some sample code – with special characters
And here’s an example of code that “Will work”
"Some sample code - with special characters"
9) Be Cautious When Using Images:
There are several things to consider when using images in your HTML email. First, some email clients just won’t support background images, while others do but often have them turned off by default.
In fact, Only 33 percent of those surveyed have images turned on by default in their email client. This is a vast difference from 2006, when the figure was a still concerning 55 percent.- MarketingSherpa, (2010)
But don’t let that keep you from using html email…. All you need to do is to just make sure that your message works as well without them as it does with them.
Therefore, always use absolute URLS for your graphics ( http://www.yourdomain.com/images/image.gif) and check the load times of your new email template.
People aren’t going to wait more then 2-3 seconds for your images to load.
10) Give All Images Alt Tags:
- This let’s the viewer know what the images are even if they have images turned off in their email client.
11) Avoid Using Background Images:
- You’re better off using block colors rather than using images for the backgrounds for your text. Stay away from gradient images, etc.
12) Use the Outlook Hack:
Outlook.com adds a few pixels of additional padding below images, equivalent to the descender height of surrounding text. A workaround is to set the display property like so.
This snippet of code removes the padding in Outlook.com and still gives you the desired look of your email in other email clients.
13) Don’t Use Floats:
Both Outlook 2007 and earlier versions of Notes offer no support for the float property. Instead, use the align attribute of the img tag to float images in your email.
If the images in your email look a bit funky in Yahoo! Mail, just add: align=“top” to your images and this most often fixes the problem.
14) Other Image Tricks:
- Avoid using “spacer” images
- Always include the dimensions of your image
- Stick to fixed cell widths to keep your formatting in place with or without images.
- Most email clients replace images with an empty placeholder in the same dimensions, while others strip the image outright.
- Image blocking is ON by default in most email clients these days. This can lead to a poor first impression for many of your subscribers.
- If you forget to set the dimensions for each image, a number of clients will invent their own sizes when images are blocked and break your layout.
- Also, ensure that any images are correctly sized before adding them to your email. Some email clients will ignore the dimensions specified in code and rely on the true dimensions of your image.
- Avoid PNGs and stick with the GIF or JPG formats for all images, even if it means some additional file size.
15) Test Your Email Before You Mail Your List:
Email a test to yourself before your send it to your subscriber list. But don’t stop there. Some suggest sending it to your friends or co-workers who have different email programs so you can check readability across different email clients.
However I’ve found it’s far easier and faster to set up 10 free email accounts, like Yahoo, Hotmail, Gmail, AOL, etc and send these test messages to yourself. After all you don’t want to imposition your friends, OR wait on them to report back to you, right?
View Your Test Email Accounts Using Different Web Browsers:
Yes, you “could” set up all the major browsers but, to make sure you’ve covered everyone you have to install several different versions of the same browser, like IE8, IE7, and IE6 (Yes people still use IE6…)
But here’s a tip; Log in into your web analytic software, and look under the section:
“Technology >> Browser & OS” and if you use Google Analytics for example you’ll see something like this:
Look at the top 3-4 browsers and test with those.
In the example above over 86% of visitors to this website use Internet Explorer. So you can bet that we make double sure that our email looks GREAT in IE!
Of course it’s different for every site. Your’s may be different and most of your visitors may be Mac users in which case you really would want to optimize for Safari.
What Now?
Sending html email can increase your conversions and make for a more enjoyable reading experience for your subscribers, but don’t over do it.
Just because you “can” send html doesn’t mean that you should. It makes sense if you’re branding, or you have an ecommerce store and want to showcase your products, sending a newsletter or even if you want to use video.
But if you’re sending email with a direct marketing type “Call to action” (CTA) skip the graphics. You don’t want them distracting the viewer from your sales message
You still should send the message in html, but format it as if it was a standard text message. This way you’ll be able to still ad links and grab important stats like open rates.
Till next time,
