Technical Specifications & Tasks for Creating Effective HTML Emails

  • Plan your slices and table nesting
  • Slice images and optimize for web. Photos/Textures as JPGs, Icons as transparent PNGs, flatter bitmap looking images as GIFs
  • Convert as much text as possible from PSD to HTML text. Should be greater than 85% HTML text.
  • Use inline styles instead of CSS style rules
  •  Fix the breaks from Photoshop. Small “L”‘s will appear in Dreamweaver. They need to be replaced with a space or a
    depending on how the designer intended the line to break.
  • Convert curved apostrophes and quotation marks. Do a find and replace on these. Replace with manually entered versions from the keyboard.
  • Set most td cells to vertically align to the top
  • HTML list items do not work in all email clients so they need to be done as multi-column tables.
  • On paragraphs set top, left and right margins to zero. Use only bottom margins for spacing between paragraphs. Typically paragraphs will have 15px bottom spacing and headlines will have 25px margin:0 0 15px 0 Note on margin: Top Left Bottom Right

Fix for odd horizontal blocks or image misalignment:
Tag: td
CSS: font-size:1px; line-height:0; margin:0; padding:0;
Reason: It resets the font for the cell so that the image in the cell and/or empty space( ) does not get the default font applied from web based email applications (e.g. Yahoo, Gmail, Outlook.com).

Fix for images specifically in Yahoo
Tag: img
CSS: display:block

Email Marketing Guidelines (HTML)

SUBJECT LINE

  • Maximum 80 Characters
  • Most important words should appear in the first 5-7 words
  • HTML not allowed in the subject line

EMAIL CONTENT – TECHNICAL SPECIFICATIONS

  • Format: HTML
  • Maximum file size: 150KB (html + images)
  • Recommended width: 500 – 700 pixels
  • Recommended height: 500 – 1000 pixels
  • Use inline-CSS only
  • All the content must reside BETWEEN <body> and </body>

o    Some email clients purge everything outside of <body> tag, including the attributes defined in <body> tag.

  • Image formats allowed: GIF or JPEG only
  • All the graphics used must be 72dpi
  • Text: Maximum 300 words

**NOT ALLOWED**

  • Background images
  • Nested background colors
  • Flash, or other plugins
  • Javascript
  • Animated GIF
  • BMP, TIFF, and any other formats besides PNG, GIF or JPEG
  • <object>, <embed>, <form>, <style>, <script> tags
  • CSS floats, CSS positioning
  • Web Fonts as HTML, use default System fonts

DESIGN TIPS

  • Instead of using cellpadding to create margins, use <div style=”margin:5px”>.
  • All the hex numbers for colors must start with #.
  • Defined alt attribute in all the main images.
  • Include the most important message at the top of the email.
  • Use text instead of graphic for your tagline or important message.
  • The email should make sense even without the graphics for those recipient who block images by default.
  • Avoid thick borders, spam-like words, and excessively large fonts

PLEASE NOTE
There really isn’t a standard for HTML email. What appears fine in one email client doesn’t look right in another. This makes it almost impossible to create a dynamic HTML email that will display well in every email client application.
The guideline provided above will help ensure your mailing will appear as intended ( or close to it ) on major email clients such as MS Outlook 2003, MS Outlook 2007, Hotmail, Live Mail, Yahoo! Mail, Gmail, and AOL.

Different email clients have different limitations and restrictions. To list a few –

  • Outlook 2007 does not support:

o    Animated GIF, background images, nested background colors

o    CSS floats, CSS positioning

  • Yahoo! Mail and Gmail:

o    Renders only the content between <body> tags