- Administering User Guide overview
- Sites Features
- Website Administration
- Asynchronous Jobs
- Reusing Content: Multi Site Manager and Live Copy
- Live Copy Overview Console
- Configuring Live Copy Synchronization
- Creating and Synchronizing Live Copies
- MSM Rollout Conflicts
- Troubleshooting MSM Issues and FAQ
- MSM Best Practices
- Translating Content for Multilingual Sites
- Managing Translation Projects
- Identifying Content to Translate
- Preparing Content for Translation
- Creating a Language Root Using the Classic UI
- Connecting to Microsoft Translator
- Configuring the Translation Integration Framework
- Language Copy Wizard
- Translation Enhancements
- Translation Best Practices
- Configurations and the Configuration Browser
- AEM FAQs
- Operations
- Dashboards
- Operations Dashboard
- Backup and Restore
- Data Store Garbage Collection
- Monitoring Server Resources Using the JMX Console
- Working with Logs
- Audit Log Maintenance in AEM 6
- Configure the Rich Text Editor
- Configuring RTE for Producing Accessible Sites
- Configuring Undo for Page Editing
- Configure the Rich Text Editor plug-ins
- Configure the Video component
- The Bulk Editor
- Configuring Email Notification
- The Link Checker
- Troubleshooting AEM
- Managing Access to Workflows
- Starting Workflows
- Administering Workflows
- Administering Workflow Instances
- Using cURL with AEM
- Proxy Server Tool (proxy.jar)
- Configuring for AEM Apps
- Configuring Search Forms
- Tools Consoles
- Reporting
- Configuring Layout Container and Layout Mode
- Editor
- Enabling Access to Classic UI
- Admin Consoles
- Security
- User Administration and Security
- User, Group and Access Rights Administration
- Security Checklist
- OWASP Top 10
- Running AEM in Production Ready Mode
- Identity Management
- Adobe IMS Authentication and Admin Console Support for AEM Managed Services
- Creating a Closed User Group
- Mitigating serialization issues in AEM
- User Synchronization
- Encapsulated Token Support
- Single Sign On
- How to Audit User Management Operations in AEM
- SSL By Default
- SAML 2.0 Authentication Handler
- Closed User Groups in AEM
- Granite Operations - User and Group Administration
- Enabling CRXDE Lite in AEM
- Configuring LDAP with AEM 6
- Configure the Admin Password on Installation
- Service Users in AEM
- Encryption Support for Configuration Properties
- Handling GDPR Requests for the AEM Foundation
- Principal View for Permissions Management
- Content Disposition Filter
- Custom User Group Mapping in AEM 6.5
- Same Site Cookie Support
- Personalization
- Integration
- Integrating with Third-Party Services
- Integrating with Salesforce
- Integrating with Adobe Target
- Integrating with Adobe Learning Manager
- Integrating with Adobe Analytics
- Connecting to Adobe Analytics and Creating Frameworks
- Configuring Link Tracking for Adobe Analytics
- Mapping Component Data with Adobe Analytics Properties
- Configuring Video Tracking for Adobe Analytics
- Integration with Adobe Analytics using IMS
- HTTP2 Delivery of Content FAQ
- Troubleshooting your Adobe Campaign Integration
- SharePoint Connector Licenses, Copyright Notices, and Disclaimers
- SharePoint Connector
- DHTML Viewer End-of-Life FAQs
- Integrating with Adobe Campaign Classic
- Related Community Articles
- Integrating with Adobe Campaign Standard
- Flash Viewers End-of-Life Notice
- Integrating with Adobe Dynamic Tag Management
- Opting Into Adobe Analytics and Adobe Target
- AEM Portals and Portlets
- Integrating with Dynamic Media Classic (Scene7)
- AEM Livefyre Recipes
- Troubleshooting Integration Issues
- Integrating with BrightEdge Content Optimizer
- Catalog Producer
- Integrating with Silverpop Engage
- Integrating with Adobe Campaign
- Integrating with ExactTarget
- Analytics with External Providers
- Integrating with the Adobe Marketing Cloud
- Manually Configuring the Integration with Adobe Target
- Prerequisites for Integrating with Adobe Target
- Integration with Adobe Target using IMS
- Adobe Classifications
- Solutions Integration
- Exporting Experience Fragments to Adobe Target
- Best Practices for Email Templates
- Integrating with Livefyre
- Best Practices
- Content Management
Best Practices for Email Templates
The AEM email components have been deprecated. Due to the nature of email, which merges content and style, the email components provided out-of-the-box by AEM become of limited reuse for customers because of the need to implement custom styles into whatever components are required for projects.
Email components can be implemented on project level, and the deprecated AEM email components illustrate how that can be achieved. However these deprecated components should not be used on projects.
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.
All campaign content should be created under a master page of type cq/personalization/components/ambitpage.
For example if your planned campaign structure is something like
/content/campaigns/teasers/en/campaign-promotion-global
You should make sure it resides under a master page
/content/campaigns/teasers/master/en/campaign-promotion-global
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" The default is "XHTML": <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Can be changed to "HTML_5": <!DOCTYPE HTML> |
Specify character definition to ensure correct rendering of special characters. Add CHARSET declaration (e.g. iso-8859-15, UTF-8) to <head> |
Is set to UTF-8. <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
Code all structure using the <table>element. For more complicated layouts, you should nest tables to build complex structures. Email should look good even without css. |
Tables are used throughout the whole template for structuring content. Currently using a maximum of four nested tables (1 base table + max. 3 nesting levels) <div> tags are only used in author mode to ensure proper component editing. |
| Use element attributes (such as cellpadding, valign, and width) to set table dimensions. This forces a box-model structure. | All tables contain necessary attributes like border, cellpadding, cellspacing and width. 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. |
| Keep your CSS simple. Avoid compound style declarations, shorthand code, CSS layout properties, complex selectors and pseudo-elements. | As far as CSS styles are being used to illustrate demo design, the CSS recommendations are being followed. |
| Emails should be 600-800 pixels maximum width. This will make them behave better within the preview-pane size provided by many clients. | The width of content table is limited to 600px in demo design. |
Images
/libs/mcm/campaign/components/image
| Best Practice | Implementation |
|---|---|
| Add alt attributes to images | The alt attribute has been defined as mandatory for the image component. |
| Use jpg instead of png format for images | Images will always be served as JPG by the image component. |
Use <img> element instead of background images in a table. |
No background image data is used in the templates. |
| Add attribute style=“display block” on pictures. Allows to display well on Gmail. | All images contain per default the style=“display block” attribute. |
Text and Links
/libs/mcm/campaign/components/heading, /libs/mcm/campaign/components/textimage
| Best Practice | Implementation |
| Use html <font> instead of style in CSS (font-family) | 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 newsletter.
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).
Components
There are currently seven components available for use inside campaign templates. These components are all based on the Adobe markup language HTL.
| Component name | Component path |
|---|---|
| Heading | /libs/mcm/campaign/components/heading |
| Image | /libs/mcm/campaign/components/image |
| Text&Personalization | /libs/mcm/campaign/components/personalization |
| Textimage | /libs/mcm/campaign/components/textimage |
| Link | /libs/mcm/campaign/components/reference |
| Dynamic Media Classic (formerly Scene7) Image Template | /libs/mcm/campaign/s7image |
| Targeted Reference | /libs/mcm/campaign/components/reference |
These components are optimized for mail content; that is, they adhere to the best practices outlined in this document. Using other out-of-the-box components will usually violate these rules.
These components are described in detail in Adobe Campaign components.
Business.Adobe.com resources
Resources
Adobe Account
