How to make HTML emails look the same with all Mail Clients


How to make HTML emails look the same with all Mail Clients

Posted on Feb 1, 2013 by Paul White

When 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
http://www.campaignmonitor.com/css/

The on the right side of that page download the PDF guide. or just click the following link
http://newcampaignmon.cachefly.net/assets/files/css/campaign-monitor-guide-to-css-in-email-jan-2013.pdf

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.

Permalink
1671 Visitors
3086 Views

Categories associated with How to make HTML emails look the same with all Mail Clients

Discussion

No Comments have been submitted
name
Email Needed to confirm comment, but not made public.
Website
 
Type Code
Security Check
 
When you Post your Comment, you'll be sent a confirmation link. Once you click this link your thoughts will be made public.. Posts that are considered spam will be deleted, Please keep your thoughts and links relavent to this Article