How to display an HTML email in a web email client?

Question

Hi I am building a small web based email client. I am facing problems in displaying HTML mails. What are the best practices involved in displaying an HTML mail? Some things I found

1. Css Reset
2. Strip body tag in the mail

Answer 1

First of all, it's important to not allow all the CSS and HTML tags. I would look for the file and allow a defined set of HTML tags and CSS attributes.

For example, if you reset the CSS, you can still send stuff like <iframe>, <form> and all other possible malicious tags.

So I would start of thinking what kind of HTML tags would you like to support, and strip all other ones out of it. And then the same for the CSS.

This is by no means easy. I mean you also would have to take in account things like people trying to break your interpreter...

You could look into this Sitepoint Blogpost, it describes how people should code HTML-emails. So it might be a good idea to start there and see what's usually supported.

Answer 2

The one sentence answer would be "1. Use table-based layouts, 2. only inline CSS, and 3. test in every email client possible."

The client testing is probably the most important because every email client (and client + browser combination) may have its own quirks and many are just learned along the way; such as using HTML attributes width & height because Outlook won't always follow the inline styles for width & height, or that Gmail tends to add margins around images unless you explicitly set margin:0 for the HTML elements, etc. etc.

When fixing the look of an HTML email in one client ends up breaking it in another client, don't keep adding more and more styling: try to simplify the HTML/CSS, even if it means writing more markup. For example, if padding and margins don't look right, the same look could be achieved by adding more rows or columns to the table and fixing their heights/widths. More tags is simpler than worrying about how all the email clients will render the CSS box model.

There's a lot of articles and blog posts on HTML-for-email such as http://articles.sitepoint.com/article/code-html-email-newsletters that are helpful -- though a lot are out of date with newer versions of clients.