Useful Tips for HTML Email Design, Part 1

Todd FlemingIt seems that no matter how often best practices are discussed with regards to HTML e-mail design, designers are consistently making the same mistakes. This makes things difficult for clients who make the initial review of content and other designers or testers also working with and eventually implementing the code.
Most designers building HTML e-mails understand and implement most best practices, such as avoiding large images, but there seems to be a large disconnect with some of the more subtle yet equally crucial components.

Not only are these mistakes time-consuming to fix, they’re easy to avoid.

Here are a few tips for making sure your emails always look their best. Stay tuned for more HTML tips in a future post.

Code like it’s 1998

Div tags have become a staple of website code bases because they’re significantly easier and more flexible for designers to work with. However, when it comes to designing and coding e-mails, they’re unreliable at best. That means designers have to revert back to using tables.

Typically, most designers do tend to adhere to the table structure when building HTML e-mails. But a decent-enough portion doesn’t. Tables may be mind-numbingly irritating, and they may make a code base three times longer than it needs to be, but if you’re coding e-mails, they have to be there.

Advanced tip: Advanced tip: Stay away from the font tag as it tends to be unreliable in some e-mail clients. Mac Mail, for example, displays all text contained in font tags at about 10 pixels. To ensure proper rendering in all browsers, apply font inline styles to all individual table cells that contain text. If you to need to use multiple font styles in one table cell, style it with the font used most often and use span tags for the others. In addition, stay away from p tags as well. They’re not honored in most e-mail clients. Use br instead.

Inline style is a must

There are way too many e-mail clients that automatically strip style blocks. That means the use of inline style isn’t just a suggested best practice – it’s an imperative.

Advanced tip: Image tags will usually need style=”display: block;” placed in them to prevent a line break from displaying in some e-mail clients. With block element images, place them in a tight fitting table and center the table if you need the image centered.

In my next post, I’ll provide more HTML email design tips to help you optimize your emails.

One Trackback/Pingback

  1. […] The Lunch Pail « Useful Tips for HTML Email Design, Part 1 […]

%d bloggers like this: