UNL_WDN_Emailer

The UNL WDN Mailer is an HTML/CSS wrapper for email designs. It is built to serve as a template for HTML emails.

About the email design

• The width of content is 650px.
• Email has ability to reformat for some smarter mobile email clients. See instructions below.
• Base text size is 17px.
• A text alternative can be generated that includes a figlet (ASCII Art) header

Content Suggestions

Email markup sucks. There are template classes available to help render content sections. Here are some samples to get you going.

A full example script for generating a full message is available in the repository.

Content Band

For adding a sections of content, with an optional color and headline, use the UNL_WDN_Emailer_Template_Band class.

$band = new UNL_WDN_Emailer_Template_Band();
$band->headline = 'Hello Example Person,';

You then add more content to the band by adding children: $band->addChild(...);

Content Callout

Inside a block of content, you may want to add some focus to a piece of content. You can do this with the UNL_WDN_Emailer_Template_Callout

$callout = new UNL_WDN_Emailer_Template_Callout()
$block->addChild($callout);

Content Spacing

If you like to add some extra room between content sections in a band, use the UNL_WDN_Emailer_Template_InnerWrapper class. This will add extra top/bottom padding.

$child = new UNL_WDN_Emailer_Template_InnerWrapper()
$child->addChild(...)

Basic Text/Paragraph

The copy of a message should be put in a UNL_WDN_Emailer_Template_TextBlock. Use this class in place of paragraphs.

$block = new UNL_WDN_Emailer_Template_TextBlock();
$block->body = 'Some example text';

You can add inline children (like links and additional text) by using the addChild or addText methods.

Links

Adding a properly styled link can be done with a UNL_WDN_Emailer_Template_Link.

$link = new UNL_WDN_Emailer_Template_Link();
$link->href = 'http://www.unl.edu/';
$link->label = 'University of Nebraska-Lincoln';
$block->addChild($link);

Link Buttons

For mobile devices, it's often necessary to increase the target size of link buttons. You can use UNL_WDN_Emailer_Template_Button.

$button = new UNL_WDN_Emailer_Template_Button();
$button->href = 'http://directory.unl.edu/';
$button->label = 'UNL Directory';
$block->addChild($button);

Custom HTML and Text Alternative

Sometimes the content you want to create has a specific markup associated with it. You can use it within the templates with the UNL_WDN_Emailer_Template_Custom class.

$customBlock = new UNL_WDN_Emailer_Template_Custom();
$customBlock->body = <<<EOD
<span>Welcome to <abbr title="University of Nebraska-Lincoln">UNL</abbr>!</span>
EOD;
$customBlock->textAlt = 'Welcome to University of Nebraska-Lincoln!';
$block->addChild($customBlock);

Basic Content Grouping

You may want to group a set of content objects together (like inserting multiple pieces of content into a column display). You can use UNL_WDN_Emailer_Template_TextList for that.

$group = new UNL_WDN_Emailer_Template_TextList
$group->addChild(...);
$group->addChild(...);
$block->addChild($group);

Mobile Support

The latest email template brings support for many mobile email clients with the introduction of media queries.

Two Column Display

In order to achieve a two-column display on desktop while retaining a single-column display on mobile, use the UNL_WDN_Emailer_Template_Halves class. It needs a left and right child to work properly.

$columns = new UNL_WDN_Emailer_Template_Halves()
$columns->addChild($group, 'left');
$columns->addChild($group2, 'right');
$block->addChild($columns);

Notes on markup and styles

• <p> tags can inherit formatting in webmail clients, so use <span> with inline CSS for text. (Source)
• Always replicate CSS styles inline. Use Mailchimp's Automatic CSS Inliner Tool.
• Campaign Monitor has an excellent table on CSS support across various email clients.
• For background images, use the Bulletproof Email Background Images tool.