Floe Best Practices

Email template definition

Design Guide

We have put together best practices into this guide:

Best Practices for SAP emailing.pdf

DOCTYPE

Always set a DOCTYPE at the start of the first HTML block.  We recommend

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

LAYOUT

  • Avoid using padding or margins
  • Always use inline CSS
  • Avoid BR, HR, and height tags in your emails
  • Use Tables to create general layout of email
  • Set wrapper reset styles in "wrapper div"
  • This can override a browser or client's default styling of certain elements.
  • Be aware of text and font changes per device (mobile especially) and browsers

BACKGROUNDS

  • Use the older more basic background HTML tags  "background-image" ; "bgcolor" ; "background"
  • Always offer reset background colors or fall back background colors to defer to if your specific background isn't supported

IMAGES

  • Avoid PNG images -> Try to always use either JPEG or GIF images
  • Always provide image dimensions
  • Make sure to give ALL of your images 'alt' attributes
  • Outlook.com adds some pixels at the end of each image which can rearrange spacing, alignment, or padding.  This can be overcome by using img {display:block;}
  • Avoid 'float' tags; instead use 'align'
For more information, see: