8 Programming Best Practices for HTML Emails

programming Posted on May 11, 2015

Emails are a great consumer touch point for brands. They’re cost-effective, have wide reach, and according to our research at least 90% of consumers check their email everyday.
But programing HTML emails can sometimes be a difficult experience for programmers, due mostly to outdated approaches. To help combat that we thought we’d share some of our newsletter best practices. Check them out below:

  1. For overall layouts use standard HTML tables because CSS floating and layout techniques will not render properly across all the email systems

  2. Always use inline CSS

    • External and embedded style sheets aren't supported
    • Some email clients strip out <head> and <style> tags from emails
    • Consistent results on all email clients
    • Inline coding is tedious and repetitive job but thankfully there is CSS inliner, Mailchimp, Premailer and several other free tools available online to convert traditionally styled HTML content to inline styles.
  3. Stick with fonts known to work across all platforms, different devices change the fonts to increase readability

  4. Use older background html tags

    • HTML bgcolor attribute simply has the best support across the board
    • Background images are not fully supported, if you are using background image keep in mind it will not show up on some of the email systems
  5. Give all images alt attributes with image dimensions

    • Most email clients block images by default. In some cases, instead of showing the image, the email client will instead display the ALT text
    • It’s also important to include height and width values as this creates a placeholder box for the ALT text to reside when images are disabled
  6. Avoid using <br>, <hr> and height tags. Every browser display height differently, try controlling everything with tables and divs

  7. Avoid JavaScript for security reasons

  8. Do not use videos, some email systems simply cannot support rendering video