Dynamic HTML Email Template

Create an HTML email template that dynamically pulls content from your site, as seen in the weekly School of Medicine Vital Signs messages.

Please note: this feature requires an Apple computer configured to use Apple Mail as the default email client, along with some working knowledge of HTML 

vitalsigns.jpg
Sample Vital Signs Email

Introduction

Using the power of Plone as a content management system, you can generate an HTML email template that pulls content automatically from your Plone site.  Adding /@@news-email to the URL of a folder in your site will display the contents of that folder in an HTML template that can be used for email campaigns.  OIS has developed a standard template for the School of Medicine, as seen in the weekly Vital Signs email messages.  This template is available to all Plone sites, but requires some working knowledge of HTML coding.

It is important to note that building an HTML email is very different than standard web design/development.  With HTML emails you are targeting a wide variety of email clients.  If you thought designing for multiple browsers (Internet Explorer, Firefox, Chrome, Safari, etc.) was challenging, it is even more difficult to design for email clients.  Modern CSS and HTML techniques are not consistent across all email clients, so you will often have to use older "deprecated" markup. 

The template provided by OIS has been tested in many of the popular email clients, such as Outlook 2010, Outlook 2013, Outlook for Mac 2011, Outlook Web Access, and Apple Mail. It is also responsive and adjusts for mobile devices that support responsive emails (i.e. iPhones).  

Folder Contents


Structure

First, create a folder that will contain your email content.  The most common pieces of content that will make up an HTML email are pages and collections.  The order of the folder contents will determine the order that the items appear in your HTML email.  

The title of the folder will become the Subject of your email when exported to Apple Mail from Safari.  This can be changed in Apple Mail before the message is sent.

When editing pages, be sure to change the text format from HTML to Plone Output Filters HTML or turn off the TinyMCE editor in your personal preferences (not using the HTML button in the editor menu).  The TinyMCE editor will sometimes strip out important code, so you will need to work in code mode exclusively.

Pages

Text Format

Next, add pages to create the framework of your HTML email.  Simply add a page to the email folder and add custom HTML.  

Remember to change the format to Plone Output Filters HTML or disable TinyMCE in your personal preferences when writing custom HTML code.  Pages are how the ribbon, footer and banner sections of the Vital Signs email are created.

Ribbon/Footer

The Ribbon and Footer are pages with custom HTML designed by OIS to work on a variety of email clients.  Before altering this code, consult for guidance.

Ribbon:

Ribbon

Sample Ribbon code

Footer:

Footer

Sample Footer code

Banner

The banner is a page that contains an image, usually to highlight a feature story.  Banner images should be 600px wide to fill the entire width of the email layout.  The height can be anything you wish.

Banner

Example code below:

<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="width: 100%;">
<tbody>
<tr>
<td class="headerContent" valign="top"><a href="http://link-to-your-feature-story?campaign" id="headerImage" style="width: 600px;"> <img id="headerImage" src="http://link-to-your-banner-image" style="width: 600px;" /></a></td>
</tr>
</tbody>
</table>
<!-- // END HEADER -->

Note:  To ensure that the Google Analytics campaign data is correctly linked to the email, make sure that ?campaign is added to the end of the feature story link.

Collections

Collections are the most powerful piece of the HTML email template.  You can create several collections with different criteria to pull in content automatically under desired headings.  The title of the collection will become the blue heading in the HTML email template.  

For example, in the Vital Signs email template, the Research News section is a collection that pulls in the top news items with the Research tag.  The Upcoming Events section is a collection that pulls in the upcoming events listed on the newsroom site.  

If you need help setting up your collections, refer to our collection documentation or contact .

Collection Display options

The default display for collections is to show the item title (orange) and description (dark gray) and an image or video still that is designated as "Image 1" in a news item, referred to as the one column layout.  By simply editing the short name of a collection, you can change the display to two or three columns.  You can also choose to only show the title of an item (excluding the description and image).  

Rename

To change the collection display from a one column default, edit the short name of the collection to include the following:

  • twocol - creates a two column layout within a gray box
  • threecol - creates a three column layout within a gray box
  • titleonly - removes the description and image from the news items listed.

Note: the titleonly property can be applied to a one, two or three column layout.  For example top-stories-twocol-titleonly.

Collection visibility

Collections will only be displayed in the HTML email template when they are in the published state.  To hide a collection, change the state to private or pending review.


Workflow/Sending messages

Currently, this HTML email template only works using an Apple computer configured to use Apple Mail as the default email client.  To view your email in a web browser, simply add /@@news-email after the shortname of your folder in the browser address bar.  For example, if the URL of your folder is http://med.unc.edu/sitename/newsletter, to view your email you would use http://med.unc.edu/sitename/newsletter/@@news-email. 

When viewing the HTML email page (/@@news-email) in Safari, you can take advantage of the "Email this page" option.  In Safari, choose File > Share > Email this page (Shortcut key: command + i).  This will automatically generate an email using the Apple Mail client.  Once you have the email in Apple Mail, you can make minor changes (edit text, remove images, etc.).  Major changes are not recommended as they may alter the layout in the receiving email clients.

Click here to learn how to set up Apple Mail to connect to the UNC Exchange server.

Test, Test, Test!

It is extremely important to test your HTML email in various email clients before sending the final version, especially if changes are made in Apple Mail after the Plone page is generated.  Common clients to test include Outlook 2010, Outlook 2013, Outlook for Mac 2011, Outlook Web Access, and Apple Mail.  The template is also designed to be responsive so testing on mobile devices (iPhone, iPad, and Android devices) is encouraged.

Campaign Data

Each story link generated in the HTML email is automatically tagged with campaign information for tracking with Google Analytics.  Contact for information on Google Analytics campaigns.

Sample Email with Labels

Email Template with Labels