Your IP Address: 54.211.153.104
Located Near:
Resources
 Can Spam Act
 Securing Your Server
 How Email Works
 Email Statistics
 
How To Set Up
 DMARC Records
 SPF Records
 MX Records
 PTR Records
 DomainKeys
 DKIM Signatures
 Sender ID
 ADSP Records
 Feedback Loops
 SRS
 
Verifying Your
 Email Authentication
 Identifier Alignments
 
How To Avoid
 Spam Filters
 Being Blacklisted
 Losing Reputation
 Being an Open Relay
 
Formatting Email
 For Email Clients
 For Devices
 For Browsers
 
What Are Email
 Bounces
 Opens Rates
 Clickthrough Rates
 Email Headers

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 TagsAttributes
Tables<table>,<th>,<tr>,<td>,</td>cellspacing, cellpadding, border, frame, bgcolor, colspan, rowspan, align, valign, style
Lists<ol>,<ul>,<li>type, style
Line Breaks<br />style
Styling<span><div>style
Character Formatting<font><b><sup><sub><strike><string><i>style
Anchors<a href>href, target, title, style
Images<img>src,usemap, border, height, width, align, style


CSS Style Properties
Fontsfont-style, font-variant, font-weight, font-size, font-family
Texttext-align , line-height, letter-spacing, text-decoration,text-indent
Colorscolor, background-color
Bordersborder, border-width, border-style, border-color
Paddingpadding-top, padding-right, padding-bottom, padding-left
Tablesborder-collapse, table-layout
Marginmargin-top, margin-right, margin-bottom, margin-left
Sizingwidth, height


Source: Unlock The Inbox

Sponsored Links