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.
Before we get started I want to go over the pluses and minuses of using HTML email in the first place.
- HTML email is generally more engaging.
- It gives you many formatting choices include graphics, icons, links, and even web forms and video.
- It often offers higher open rates.
- Any ads you include typically are more effective and provide higher conversion rates.
- Almost all popular email clients currently support html email or will soon.
- HTML email can be slow to load if you don’t optimized your images.
- Hackers may use html to hide and send viruses, trojan horses which they can 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. – EmailExpert 10 Must Know Email Marketing Stats 2014″ (2014)
Therefore, you need to make yours grab the readers attention 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: You want to make sure that you set the width for your table is to the width for each cell and not to the actual table itself, and do not based the widths you use on percentages.
Next, use nested tables when building formatting for your html email or it’s template. And using the correct indentation keeps your code easy to read and uncluttered. Next, try using the background attribute on your table cells to set the background images as well. This is the simplest way way to get around the issue of your background images incorrectly displaying correctly 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) Take care to remove up any unnecessary white space in and between the table tags
- On a side note both Yahoo! and Outlook are know to add extra padding above or below the cell contents. If this happens your template may break.
3) Go No More Than 600px With Your New HTML Template:
- The truth is that most people don’t even bother with opening up their email. Instead they just view them in the preview panel. (You do this too, don’t you?)
- Typically the preview panel is around 600px, so always keep this in mind when designing design your emails.
4) Stay With Inline Styles When Doing Your CSS Coding:
- Most web developers would say something like, “Don’t use inline styles, instead create a class for it”. Sadly though, it’s just not possible to do this with email, as the email clients are going to strip these out, and you don’t really want that. So if you need to style anything, please use only inline styles.
- Other elements you want to pay attention too such as font size and type should really be used inside the <table> tag, however individual styles really are better placed in <td>’s.
- Email clients like Hotmail and Google will ignore any htm code inside an email’s header.
5) Skip The Shorthand With Font and Hex Notation.
Additionally the above email clients also dismiss the CSS shorthand used for font property styles. So setting up your font styles like the example below is likely to cause you more then a issues.
So what you want to do instead is to declare your font properties separately, with one property on it’s own line. See the example below.
6) Making Sure Your HTML Appears Similar Across Browsers:
- Whenever possible try using break tags as a replacement for the vertical padding.
- Want to change the amount of space these breaks use? Easy, just wrap them in span tags and set a smaller/larger font size for each.
- Repeat any inline styles you use often and frequently.
- Set any inline styles you choose on all of your different HTML elements.
- Apply detailed inline styles to links – this is particularity important for subscribers that use Gmail.
- Attach specific styles on every link. Failure to do this will cause the readers browser to inherit its default font-family, size and color settings.
- Wrapping images in span tags and set font attributes to style your ALT text. Doing so lets you choose the style of your ALT text, which ultimately makes your text more readable if the user has images disabled.
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.- Marketingherpa, (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) Use Alt Tags on all Images:
- 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:
Something to be on the lookout for is that the Outlook.com site is known to insert extra padding below any images images it finds in your html, that is equal to the height of surrounding text. An easy workaround you can try is setting the display property to something like this:Using this this tiny snippet of css will remove the extra padding added by Outlook.com, yet it allows you to maintain a consistent rendering of your email in all other email clients.
13) Don’t Use Image Floats:
Using a float to position your images can cause problems with Outlook 2007 and earlier versions of other email software like Notes as they do not offer support for the float property. A workaround is to use the align attribute of the img tag in order to “float images” in your email template.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:
- You want to get away from using “spacer” images.
- It’s a good idea to make sure to include the image dimensions.
- Stay with fixed cell widths as this will keep your formatting in place regardless of if you use images or not.
- Lot’s of email clients will replace images with an empty placeholder in the same dimensions, or they may just strip the image completely.
- IN most cases image blocking is by default set to OFF. Not the first impression you want to make with your subscribers.
- Remember to specify your dimensions for every image. If you don’t many clients will guess when images are blocked and break your layout.
- Start with the proper image size because some email clients are going to not read the dimensions you chose and instead base the rendering of the email on actual dimensions of the images used in the code.
- Don’t use PNGs and instead use GIFs or JPGs for your images.
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.
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,