14 ways to get your email delivered and viewed correctly on any browser
Email formatting is tricky. Formatting your email with the wrong code or by adding unnecessary styling elements can not only give your readers a distorted view of your message, but it can also get your email sent to the junk box.
Sitepoint recently updated an in-depth article called How to Code HTML Email Newsletters. However, tips were strewn over 3 pages, so we consolidated them into 14 quick tips.
1. Nix the div and span tags and stick to HTML tables. Microsoft Outlook 2007 despises Div tags, and they’re not welcomed by many other email clients, so trash them altogether.
2. Use image ALT tags. Most company email clients as well as popular web-based clients such as Gmail disable images automatically. Make sure you give all images an ALT tag that will display descriptive text when the image is missing.
3. Use image height and width tags. Defining the height and width of an image means that when your email is displayed in a client that has disabled images, your formatting won’t mess up. Doing this also encourages readers to enable images if they have the option.
4. No javascript. Most email clients will disable it, so don’t use it.
5. Give readers an alternate view. If your email message is comprised of many graphics, make sure you give them a link to view the email on your website. The familiar “Can’t see this email? View it on our website.” link is fine.
[text_ad]
6. Only use inline CSS. If you must use CSS to style your emails, make sure they are inline styles. Don’t link to an external stylesheet and are not in the head area of your email. All styles should be defined as you use them.
7. Don’t design for backgrounds. Some email clients don’t display backgrounds, so don’t depend on it to show up. Outlook 2007 won’t display them at all. If you’re using a background image, define the background color in a table cell with the background color attribute, not a CSS style.
8. Fix your widths. According to the article, sometimes a switch from percentage widths to fixed widths is needed. While this is not ideal—because readers can and do resize their email windows while reading—sometimes, using a fixed width is the only way to have a layout to display properly in multiple email clients.
9. When using CSS, don’t use shorthand. When defining CSS styles, don’t abbreviate the styles by squashing them all into one font: tag. Use font-family, font-size, etc and be very specific.
10. Use container tables to keep your email together. Using container tables will keep all of your tables nested which decreases the likeliness of your table falling apart and scattering about the page. Create a gutter around the container table by setting the width to a percentage and/or using a cell padding of at least 5.
11. To the left, to the left. Align your email to the left. Some clients won’t accept center formatting, so you’re better off designing for what you know will show up.
12. No pixels. According to the article, while a 1×1-pixel image can be used to force spacing to create a precise email layout, spammers often use 1×1-pixel images to determine if their email has been opened. As such, using this practice will increase the likelihood that your email is classified as spam.
13. Test your email template in different browsers. According to the article, Firefox and Internet Explorer web browsers will give you a good indication of how your email will be displayed in Outlook, Yahoo!, Google Mail, and other services. Testing your email in Internet Explorer 6 should show you how your email will render in Outlook 2003.
14. Make sure your email looks good with images turned off. There’s not better way to make sure your email will look good in most browsers than to turn off the images. In this instance, if you’ve used an external stylesheet, that will generally get turned off as well, so you’ll get to see your email in all of its barebones glory.
For the more technical details, read the entire How to Code HTML Email Newsletters article.
Letting go of the fancy styles and making your email template formatted as simply and clean as possible will render you the best results when it comes to readability and deliverability.
If you’re looking for some best practice examples, take a look at Campaign Monitor, who put together 30 free HTML email templates that render the way they’re supposed to in all of the popular email clients. MailChimp has also designed some very basic email templates for your perusal.
