Email Development Recommendations

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?

Development Best Practices

Consider the following suggestions when using HTML in your email:

• Code all structures using the table element. For more complicated layouts, you should nest tables to build complex structures.
• Use element attributes (such as cellpadding, valign, and width) to set table dimensions. This forces a box-model structure.
• Keep your CSS simple. Avoid the following coding styles:
  • Compound style declarations: font:#000 12px Arial, Helvetica, sans-serif;
  • Shorthand code: #000 instead of #000000
  • CSS layout properties: slot, position, clear, visibility, and so on
  • Complex selectors: descendant, child or sibling selectors, and pseudo-elements
• Inline all CSS before finalizing emails or email templates.
• Use only absolute links for images, and host these images on a reliable server.
• Do not code with JavaScript or Flash; most email clients do not support these technologies.
• Plan for mobile users, and make emails as responsive as possible:
  • Use media queries to increase text sizes on small screens
  • Provide thumb-sized hit areas for links, approximately 46 px by 46 px
• Test often. Create email accounts across various services, and send emails to yourself to see the appearance of emails on various clients.

Using Email Job Parameters

Arcadia Enterprise enables you to customize your emails with dynamic content, using Email Job Parameters. You can include the name of the sender, the name of the dashboard, details of the triggering event, the image of the dashboard, and so on. Personalized and event-specific emails are key to providing critical information to users, so they can immediately act on the new knowledge. The articles that describe how to use the various email features cover all relevant email job parameters.