Email Development Recommendations
Arcadia Enterprise recommends that you consider the following suggestions when
designing emails and email templates:
We adapted these recommendations from the Mail Chip Email Design Reference.
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.