Formatting HTML Email for Email Clients
Designing HTML emails (Newsletters, Ads, Feeds, Articles, Promotions, etc) that renders consistently across all email clients (Outlook, Yahoo, Hotmail, Gmail, Thunderbird,
etc) can be very time consuming and tedious process. CSS and HTML Support from one email client to another varies greatly. Instead of learning all ins and outs of each
email client which will be virtually impossible. You should focus on what we call CORE Support functionality.
We've done tests in Yahoo Mail, sometimes just having a bad HTML Tag or an unsupported CSS element, was the determining factor of whether the email ended on
in the junk folder or the inbox.
We all agree fancy HTML emails look nice, but if it only looks nice to 15% of your customer base, you just wasted a lot of time, effort and money. We would both agree
that a more simple HTML email that renders properly to 98% of your customer base would have a lot more impact. Deliveriablity and readability is your top priority.
Rules to follow when designing emails
- Always use Inline Style Sheets
- Always use Tables for layouts
- Avoid images when possible. (Backgrounds, etc)
- Use older technology specification HTML 3 and CSS 2
- Use common and basic HTML tags and CSS elements
- Always test your email, in a few different clients. The major email clients are free (Gmail, Hotmail, Yahoo, AOL) just create a test account.
- Always include a link in your email that takes you to a web version of the same email, if it's a newsletter, article, or promotion.
There are some websites that will screenshot email client rendering and show you what it will look like in different clients, but it's best to use the real
deal. We seen screenshots of how a newsletter rendered in Yahoo (Which was Perfect), but then when we went to click on a link in the newsletter within Yahoo, it didn't
work. Screenshots are nice, but they don't tell the whole story.
Don't waste time with big graphs and charts about what tags and styles work in what email clients, the fact of the matter is you will be sending mail
to people that use a multitude of different email clients, browsers, and devices. Create a sandbox of HTML Tags and CSS Properties that works with over 98% of everything and play
within that sandbox when sending email.
Below is our sandbox of HTML Tags, Attributes and CSS Properties. In the world of successful HTML emails, follow the KISS principle (Keep it Simple Stupid).
|Safe HTML Tags||Attributes|
|Tables||<table>,<th>,<tr>,<td>,</td>||cellspacing, cellpadding, border, frame, bgcolor, colspan, rowspan, align, valign, style|
|Line Breaks||<br />||style|
|Anchors||<a href>||href, target, title, style|
|Images||<img>||src,usemap, border, height, width, align, style|
|CSS Style Properties|
|Fonts||font-style, font-variant, font-weight, font-size, font-family|
|Text||text-align , line-height, letter-spacing, text-decoration,text-indent|
|Borders||border, border-width, border-style, border-color|
|Padding||padding-top, padding-right, padding-bottom, padding-left|
|Margin||margin-top, margin-right, margin-bottom, margin-left|
Source: Unlock The Inbox