Email Design Tips

A critical step in creating HTML is making sure what you’ve designed and coded shows up in your subscribers’ inboxes correctly.

Even if your HTML email displays like you want in your own email program, some recipients aren’t able to view HTML email in their email programs or they are setup to strip out HTML for security. In addition to your HTML email, you should send an alternative plain-text version of your message for viewers who can’t view HTML in their email.

When a recipient receives your email, their email program will automatically determine which format to display.
Multipart/Alternative MIME format sends both the HTML and plain-text versions of an email. Create a plain-text version of your campaign, and work alongside your internet service providers (ISPs) and anti-spam groups to ensure the best delivery possible.

Fundamental Principles

  • Keep it simple.
  • Focus on your message.
  • Have a call to action. preferably above the fold and at repeated at the end of your email.
  • Post images on a publicly accessible web server and use absolute paths in your code when you embed images or link to files. Make sure your images / assets are hosted on a publicly accessible server, so your recipients can see the images or download the files. Avoid free hosting sites, because these often have bandwidth limits that may prevent your images from displaying.
  • Use tables and shim.gifs.
 Keep the code simple. All email clients use different methods to render HTML. Internet Explorer, Microsoft Word have their own proprietary renderer, so more high-level coding may not display as intended.
  • Set email width to 600px or less. 
Most people view messages in their preview panes, which are narrow and small. Templates should be designed to never be more than 600 pixels wide, or they’re fluid-width.
  • Test how it renders in different email clients and on different platforms. 
All email programs render HTML differently, test your HTML email on different platforms including mobile.
  • Webmail services strip certain elements.
 Browser-based email services like Gmail, Yahoo, and Hotmail strip out your DOCTYPE, BODY, and HEAD tags, so your code doesn’t override theirs. Anything you’d normally code inside those tags (background colors, embedded CSS, JavaScript, background music files, etc.) will be removed. Use inline CSS and FONT tags. Coding CSS inline can help correct this.
  • Think like a spam filter. Consider spam filters and spam firewalls when you code and write for user’s inboxes.
  • Avoid spammy words and phrases that will get your email filtered out.