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).
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.
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.
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 firstname.lastname@example.org for guidance.
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.
Example code below:
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="width: 100%;">
<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>
<!-- // 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 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.
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).
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.
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.
Preview your email in a browser
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. This will give you an idea of how your email will look, but it is still important to send test messages and check them in a variety of email clients and mobile devices.
Send your email using a Form Folder (recommended method)
When you are ready to send your email, create a Form Folder inside the folder that contains your email content. This form will be used to send the contents of the folder as an HTML email.
- Create a Form Folder inside the folder that contains your email content.
- Download the Send HTML Email Template (send-html-email.tar.gz).
- Import send-html-email.tar.gz into your Form Folder, replacing the existing form items.
- The result should look like the screenshot below, including common email composition fields such as Recipient, Sender, Subject, CC and BCC.
Send your email using Apple Mail
If you have an Apple computer configured to use Apple Mail as the default email client, you can also send the HTML email using Apple Mail.
- View your email in Safari by adding /@@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.
- Use the "Email this page" option to send the page as an HTML email. 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.
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.
Each story link generated in the HTML email is automatically tagged with campaign information for tracking with Google Analytics. Contact email@example.com for information on Google Analytics campaigns.
Sample Email with Labels