How to Guarantee Your Email Renders Correctly Across ALL Email Clients

Your email delivery rates and response rates can suffer notably if your HTML email design doesn’t display right or isn’t coded using correct HTML. This article is part of a series of tips to help you on how to guarantee Your Email Renders Correctly across ALL Email Clients.

Use Correct HTML

4 of 5 HTML emails use invalid or incorrect HTML. In many browsers, this causes an email to not render properly and makes the email message undeliverable, especially with MSN, Hotmail, and Yahoo. Why?

It turns out that most email clients support only a small subset of current HTML. For example, Outlook 2007and Outlook 2010 only render about 65% of all HTML. Gmail (and any company that uses Gmail to host their corporate email) supports the same – about 65% of HTML. Many web designers want to do cool stuff like use flash, graphics, java scripting, etc. But these are not always the best for use with emails. HTML code that is considered ‘best practices’ for website design is often ‘worst practices’ for designing HTML email marketing campaigns. If you do use HTML code in your email marketing messages, you should plan to take the extra time (or pay a designer) to get it right.

Don’t Design your Email Marketing Campaign in MS Word

Often times, people assume that designing an email marketing campaign is simple – just design it in word then copy the design into your favorite email marketing system’s editor and away you go. Unfortunately MS Word (all versions) create terrible, non-compliant HTML code. It’s common to see a one-page email designed in MS Word, end up being 2,000 lines of bloated and invalid HTML code. Word wasn’t designed with HTML coding limitations in mind, so it simply isn’t the best tool for designing email marketing campaigns. Instead, use a tool such as Microsoft Expressions, Adobe’s editing tools, or the HTML WYSIWYG HTML editor included with your favorite Email Service Provider account.

Invalid HTML May get your Blocked

One goal for email marketing is to develop a dialog with your prospects and customers, but poor email rendering (as a result of incorrectly HTML) can cause your well-crafted email to be blocked by a spam filter.

Stick to the Lowest Common Denominator

Extraneous images, overly complex graphics, and complex table layouts all increase the chance of making mistakes in your HTML code. Most SPAM checkers flag incorrect or poor HTML code, increasing your spam score. Embedding too many graphics also increases the size of your email – also a SPAM flag. Instead of embedding images in your HTML email, store images on your site (or on custom, targeted landing pages).

Know what email clients are used most commonly by your recipients and design to the ‘lowest common denominator’. For Business to Business (“B2B”) customers, that will usually be Outlook 2007 /2010 since Outlook is the second least HTML-capable email client on the planet, just behind Lotus Notes v6 and earlier.

Image Size Impacts Delivery and Readability

Keep any graphic images to a maximum of about 720 pixels wide. The message display window of most email clients is not going to be larger than 720 pixels wide, so using anything wider means that your recipient needs to scroll back and forth in order to display it. Larger screens mean the appropriate width is expanding slightly but if you want your content to be seen, the best bet is to keep it within the above guidelines. Keep in mind too that more than 70% of recipients review their email on a smartphone too.

It is also best to properly size images before sending. We’ve probably all and received emails that have embedded images that are 800×600 but are displayed in the email at a resolution of say, 200×150. Which means that, when the email is opened, the user has to download an image file that is 10x bigger than it needs to be.

Use ALT-text Tags on Images

More than 65% of email clients disable images by default. That means that your cool, well-crafted email and design will display a blank box unless the recipient specifically enables image display. To provide the recipient with some information about your email’s intent when this happens, be sure to use HTML’s ‘Alternate Text’ tag. HTML allows you to attach descriptive text tags to graphics images. The text is displayed when a) the graphic is not or cannot be displayed, as described here, and b) if the image IS displayed, the ALT text will be displayed when the cursor hovers over the image. Either way, you win.

Email and Subject Length: Keep it Short

This tip applies to all email marketing campaigns, not just HTML emails. Short headlines work better than long ones. Your subject should be under 50 characters and under 40 is even better. While on the subject of subject lines, make sure your subject is honest, truthful and doesn’t overpromise, or you’ll not only lower your open rates, you’ll potentially start to do harm to your brand.

Maintain an 80 / 20 Ratio of Copy vs. Images

Create a layout that ensures your text flows around the images in such a way that your text flows around images and your readers can focus on the message, and not the big red ‘X’s and blank spaces. We recommend a goal of roughly 80% text/content to 20% image content as a rule of thumb. Avoid a formal layout that starts off with a large banner image, which will create a big dead spot at the top of the message when image display is disabled. It is also important to balance the amount of text vs. graphics in your email. Many email filters produce a SPAM score based on the ‘graphics to text’ ratio. This SPAM-blocking technique was developed because earlier versions of SPAM firewalls filtered on text content, but then crafty spammers started creating messages that were a one really big image. Most SPAM filters now rank the text to graphics ratio as another spam rating mechanism.