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