Best Practices for Email Templates

This document describes some of the best practices around email design resulting in a well-developed email campaign template.

The demo campaign available in AEM follows all of these best practices. How the best practices are implemented in the demo campaign is described for each best practice.

Use these best practices when creating your own newsletter.

Poznámka:

When creating a mail template for Adobe Campaign, you must include the property acMapping with the value mapRecipient in the jcr:content node of the template, or you will not be able to select the Adobe Campaign template in Page Properties of AEM (field is disabled).

Template/page component

/libs/mcm/campaign/components/campaign_newsletterpage

Best practice

Implementation

Specify document type to ensure consistent rendering.

Add DOCTYPE at the beginning (HTML or XHTML)

Is configurable by design changing the cq:doctype property in"/etc/designs/default/jcr:content/campaign_newsletterpage"

To harmonize element positioning inside tables, all table cells have the attribute valign="top" being set.

Account for mobile-friendliness, if possible. Use media queries to increase text sizes on small screens, provide thumb-sized hit areas for links.

Make an email responsive if the design allows for it.

As far as CSS styles are being used to illustrate demo design, media queries are being used to offer a mobile friendly version.

Inline CSS is better than putting all the CSS at the beginning.

To better demonstrate the underlying HTML structure and ease the possibility to customize the newsletter structure only some CSS definitions have been inlined.

Base styles and template variations have been extracted to a style block in the <head> of the page. On final submission of the newsletter these CSS definitions should be inlined into the HTML. An automatic inlinening mechansim is planned, but currently not available.

Text and Links

The RichTextEditor (e.g. in textimage component) now supports choosing and applying font-families and font-sizes to selected texts. They will be rendered as <font> tags.

Use basic, cross-platform fonts such as Arial, Verdana, Georgia and Times New Roman.

Depends on newsletter design.

For the demo design the font "Helvetica" is used, but will fall back to generic sans-serif font, if not present.

Generic

Best Practice

Implementation

Use W3C validator to correct the HTML code. Make sure all open tags are properly closed.

Code was validated. For XHTML transitional Doctype only the missing xmlns attribute for the <html> element is missing.

Don’t bother with JavaScript or Flash – those technologies are largely unsupported by email clients.

Neither JavaScript nor Flash is used in the newsletter template.

Add a plain text version for multipart sending.

A new widget was build into the page properties to easily extract a plaintext version from the page content. This can be used as a starting point for the final plaintext version.

Campaign newsletter templates and examples

AEM comes with several templates and components out of the box for you to create campaign newsletters. You can use these templates and components to create your custom newsletters.

Templates

To offer a solid base and to broaden the variety of content flow possibilities, there are three slightly different template types available out of the box. You can easily use these to build a custom newletter.

All have a header, a footer and a body section. Below the body section, each template differs in column design (1, 2 or 3 columns).