How to make HTML emails look the same with all Mail Clients
Posted on Feb 1, 2013 by
Paul WhiteWhen you start sending
HTML emails, or Newsletters for your website to your subscribers, you are bound to find that many clients do not read your emails the same. What looks great in your email client, looks like crap in other email clients. Its bad enough developers had had to use hacks and tweaks to make their
websites look the same across all browsers. Formatting emails to look the same is even harder. However using a few guides and analyzing the source from a few emails, I was able to determine how to code an
HTML email that will make 99% of your subscribers happy.
The first step is to determine which
CSS rules are not supported by all email clients. Thankfully the guys at Campaign Monitor have already done this for us. Visit the following page
The on the right side of that page download the PDF guide. or just click the following link
This guide contains 24 Mail clients /
providers, and tells you exactly which
CSS styles will work and won't.
CSS rules supported by all Email Clients ( at least 99% )
To save you some time I went through and determined the rules that are safe to use in all clients, with the exception of Notes 6 / 7. Really who uses Lotus Notes these days?
- font-family
- font-style
- font-size
- font-weight
- text-align
- text-decoration
- color
- background-color
- border
- padding
- width
- border-collapse
Proof of concept
So I decided before starting to recode my newsletter script. I checkout some of the emails I get from other
websites and put their source code through a litmus test. No other Website has to be more compatible with people's Email clients than Facebook. So I found a recent email from facebook and took a look at the source code.
Seems Facebook follows this guide almost perfectly. They use Tables for layout rather than Divs, and they apply padding per cell rather than the table cellpadding attribute. I also noticed they do not allow more than 80 characters per line. Most lines were 76 characters or so.
Encoding formats
Something else I found interesting was facebook does attach both a text/
html and text/plain versions of the messages. They also use quoted-printable for their Content-Transfer-Encoding, rather than base64. This is smart as many mail servers will actually penalize email that is base64 encoded, and it can affect your inbox delivery rates.
Discussion
No Comments have been submitted
WhiteSites Blog