Email design best practices

When planning emails or email campaigns, consider incorporating the following recommendations:

  • The maximum email width should not exceed 600-800 pixels; this works best in the preview pane of most email clients.
  • Design for simplicity: use grid-based layers, and avoid complicated elements that require float and positioning settings.
  • Most email clients block images initially. Design for this by minimizing unnecessary graphics, and always use alternate text.
  • Ensure that images that you add by URL can be accessed by the intended email recipients. In other words, if the images are behind a firewall, make sure that all recipients have sufficient credentials. Even taking this into account, consider the lifecycle of a typical email message: that it may be forwarded, and shared with people outside the immediate distribution circle.
  • Some images, such as background, fail to load altogether. Design accordingly.
  • Do not rely on images, or compositions of smaller images into a large one, to communicate your message. While large graphic elements may look very attractive in preview, they perform poorly.
  • Use basic, cross-platform fonts such as Roboto, Arial, Verdana, Georgia, and Times New Roman. Your custom font may not be loaded on the email client where it arrives.
  • Avoid elements that require Flash or JavaScript, because they may not be supported by the recipient's mail client. If you need motion in an email, use *.gif files.
  • Plan for mobile users:
    • Is your email readable at arm’s length on a small screen?
    • Will the images slow its load time on a mobile device?
    • Are your links easy to press with a thumb?