• Contact Us
  • Pricing
  • Search
  • Register
  • Login
  • DNS Tools
    • MX Records
    • A Records
    • CNAME Record
    • PTR Record
    • SPF/TXT Records
    • NS Records
  • Domain Tools
    • ARIN Records
    • WHOIS Records
  • Blacklists
    • Blacklist Checker
    • Whitelist Checker
    • Email Blacklist Removal Tool
  • Email Tools
  • Port Scans
  • Other Tools
    • IP Tools
      • IP Address Converter
      • IP Address Locator
      • IP Range To CIDR
    • Chrome Extension - Email Deliverability Checker
  • Blog
    • First Time Sender
      • Email Certification
      • Email Throttling
      • IP Warming
    • Formatting Emails
      • For Browsers
      • For Devices
      • For Email Clients
    • How To Avoid
    • How To Set Up
    • Mail Tester Guide
      • Email Headers Explained
      • MX Records, PTR Records, and Reverse PTR Records AKA rDNS
      • RFC Syntax Checking
      • Email Port Checks
      • SPF Record and Alignment
      • DKIM Signatures and Alignment
      • DMARC Validation
      • Mail Tester Test Tool
    • Measuring Peformance
      • Bounces
      • Clickthrough Rates
      • Open Rates
    • Related Resources
    • Rules to Follow
      • Can Spam Act
      • Postmaster Guidelines
  • Member Services
    • Members Area
    • Blacklist Monitoring
    • Complete Monitoring Solution
    • Domain Name Monitoring
    • Feedback Loop Submissions
    • Full Port Scan Monitoring
    • Mail Tester Pro Tool
    • Mail Miner
    • Spam Detector Toolbox
    • Trusted Sender Site Seal

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 the ins and outs of each email client, which would 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 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've 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

Copyright © 2018 Unlock The Inbox