Making an HTML template to automate newsletters

In this post I will be attempting to create an HTML e-mail template that can be populated with user generated content from nodes on a Drupal website.

Objective: Create an HTML e-mail template that LIS can create into a dynamically generated e-mail.

Requirement: The HTML must have a consistent presentation on all our supported e-mail clients. The template must be flexible in the amount of content links. The template allows for customization of the right-hand column links and content. The Banner image and colour theme will be customizable.

Deliverable: I will send LIS HTML that will have explicit commenting and bullet-proof structure.

Harris Online HTML e-Mail templates

I’m making HTML emails for College Advancement. The project will result in 4 e-mails with the same design. My plan is to make 1 template and flow the text.

First I look at the 4 designs and imaging the grid that will work for all versions

Four e-Mails. One Template.

Email clients rely on tables and ignore much of the CSS I use in Web development to style and layout my HTML. I know that many web-mail clients(gmail, outlook, hotmail etc.) will ignore or outright strip background images from e-mails. In some e-mails I create, I can use background images with out loosing the message. In this, however,  case I know I will need the recipient to see the image. This means I will have to cut the image of the ribbon to create the box for the HTML text. It is never, ever a consideration to send the main part of the message in an image. Never do this. Never.

In the dialog-box for photo shop I open the image at an higher resolution than will be eventually presented

bicubic resampling results in sharper images

I will open one of the PDF’s in PhotoShop. I open the pdf at a resolution higher than the final size i will need. I found that when I use Pshop to reduce the image to the final dimension and resolution I get a sharper image using the ‘image-size’ dialog and the Bicubic Sharper drop-down, than if I bring the image in at the final dimension. ***It probably should be noted that the designer creates the e-mails in Indesign so the artwork is generally at a higher resolution that necessary for the web.***

I slice the image up to fit my plan. I am going to break the ribbon image so I make a nice neat box for the HTML. The fist image will be the little triangle tail that forms the top of the table. The main part of the ribbon will span 2 rows and start at the top.

After I have my images I open my favorite text editor and copy the HTML header information I have from Previous e-mails:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
<html lang=”en” style=”height: 100%”>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
<body style=”margin: 0; height: 100%;”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%” style=”height: 100%; background: #003366;”>
<td align=”center” valign=”top”><div style=”text-align:center;”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ style=”background: #ffffff; width: 620px; font: 13px Georgia, serif; line-height: 1.8em; color: #043178;margin-top: 4px;margin-right: auto;margin-bottom: 12px;margin-left: auto;”>
<td style=”text-align: right;”>
<td valign=”top” align=”center”>
<a href=”” target=”_blank” style=”color: #003366; font-size: 13px; font-weight: bold; text-decoration: none; margin-top: 24px; margin-bottom: 32px; display: block;”><img src=”images/btn_givenow.gif” alt=”GIVE NOW” title=”GIVE NOW” border=”0″ width=”155px” height=”44px” /></a>

Now I will put the HTML together.
Some tricks worth noting are:

  • Use in-line styles. Classes in the header are ignored in most web clients
  • You can style alt-tags for an image. Outlook’s web-client strips the Alt tag for some reason, but most email clients render the text in a styled way that can improve the look of your email when images are blocked. It’s also no sweat. Just wrap your image element in a <span> with style=”font-size: 24px;” ect.
  • Don’t use concatenated styles. For example <span style=”font: 14px #330066 Georgia, serif;”> should be <span style=”font-size: 14px; color: #330066; font-family: Georgia;”> and <img src=”” style=”margin: 24px 0 12px 0;” /> should be <img src=”” style=”margin-top: 24px; margin-right: 0; margin-bottom: 24px; margin-left: 0;” />
  • Images that must me immediately abutted  need a display:block; style
  • Special Characters need to be encoded for HTML. The most used non-ascii characters are em-dash=— apostrophe=’ and smart quotes=“ and ” <–wordpress rendered those I will place a link to the code items
  • some email clients don’t recognize paragraph tags(I’m looking at you outlook) so I use breaks <br /> <br /> instead.

Looking pretty good now-

Web Version

It’s good to note for your design and approval team that HTML needs to be flexible and will therefor not look exactly like the Indesign file. One— not all (statistically none) of your recipients will have  Bembo installed and Two— you wont be able to control line breaks with the precision of a flat graphic file.


Now Over to Harris:

First I copied the subscription information that is necessary for the footer over to my HTML. Then I copy the HTML between the Body Open and Close tags and paste that into my new mailing using the source editor view

Sauce Button

I add the images to my file manager. and replace my broken links to the graphics in the HTML with the new URLs. in hindsight I probably could have used the magic import HTML button. I wonder if that will suck in the images? PS. No it doesn’t. I could host the images on our web server, but I think this is the better way for performance and security.

Now I’ll fire off some tests to the design team and copy proofer.


My HTML as it stands looks like this:

<table width=”100%” cellspacing=”0″ cellpadding=”0″ border=”0″ style=”height: 100%; background: #f5df7e;”>
<td valign=”top” align=”center”>
<div style=”text-align:center;”>
<table cellspacing=”0″ cellpadding=”0″ border=”0″ style=”width: 620px; font: 13px Georgia, serif; line-height: 1.8em; color: #043178;margin-top: 4px;margin-right: auto;margin-bottom: 12px;margin-left: auto;”>
<td valign=”top” style=”text-align: right;”><img src=”” alt=”” /></td>
<td valign=”top” rowspan=”2″ style=”text-align: left;”><span style=””><img vspace=”0″ hspace=”0″ style=”display: block; border: 0; margin:0″ alt=”To: Middlebury, From: You” src=”” /></span></td>
<td valign=”top” align=”left”>
<p style=”margin: 0; padding-top: 0; padding-right: 0; padding-bottom: 12px; padding-left: 25px; font-size: 16px; font-family: Georgia, serif; line-height: 1.45em; text-align: left; color:#000000;”><span style=”font-size: 26px; font-family: Georgia, serif; line-height: 1.45em; text-align: left; color:#043178;”>Wrap up 2011 beautifully&mdash;<br />
with your year-end gift to Middlebury.</span> <br />
<br />
It will support our students, faculty, and programs right away, and there could be a festive tax deduction for you, too. So please make your gift before <strong>December 31</strong> and be part of the Early Bird Challenge. <br />
<br />
Any size gift will be a perfect fit! Thank you! <br />
<br />
<a style=”color: #003366; font-size: 13px; font-weight: bold; text-decoration: none; margin-top: 0; margin-bottom: 32px; display: block;” target=”_blank” href=””><img width=”150px” height=”34px” border=”0″ title=”GIVE NOW” alt=”GIVE NOW” src=”” /></a></p>
<table width=”620″>
<td align=”left” style=”font-size: 10px; color: #333333;” width=”320″>
<p>This message is being sent to you because of your affiliation with the ${.vars[&quot;generaltags__ma_orgname&quot;]} On-Line Community at URL <a href=”${.vars[&quot;generaltags__ma_orgurl&quot;]}”>${.vars[&quot;generaltags__ma_orgurl&quot;]}</a>
<br />
<br />
<em>Removal Instructions:</em><br />
To remove yourself from future mailings <a href=”${.vars[&quot;linktags__unsubscribe_link_html&quot;]}”>click here</a>.<br />
<br />

Social Scene

The following video is an argument for embracing social media early and to start getting up to speed now. The video has excited me about using social media by giving me a better picture of how the number of ‘likes’ or ‘friends’ will be used in communicating the college’s message. I have a new understanding of how the statistics of ‘likes,’ ‘followers,’ and ‘friends’ directly work with the college’s goals.

Content Audit: Who’s Talking

MiddBlog’s Audrey Tolbert (she, at least is admin, for has a self-maintained google form that creates a spreadsheet of various twitter accounts and their owners.
They have improved the search tool on the site and it returns some nice results.

Facebook insights
Insights gives us a demographic breakdown for the people who are active on our page. The could be useful for CA to plan events in cities where there is an active community.

Google Alerts

See conversations and mentions of keywords. The display is in a tabbed fashion and shows foursquare, Linked-In, Facebook, and Twitter.

These sites display the influence you have in social marketing.

Set-up listening stations

  • Admissions
  • Arts
  • Athletics
  • College Advancement
  • Communications
  • Crisis Management (PR?)

Construct Ambassador Program

Admissions uses similar group for walking tours
Ambassador Examples Blogs and Students
Saint Michael’s College
College of William & Mary
SUNY Oswego
Glendon campus of York University
Rochester Institute of Technology

Managing an Ambassador program:lessons Learned

Create a Contract of expectations, responsibilities and rewards.
Have team maintain a formspring account or Blog for a month to try them out (brand believer)

Control the megaphone

Add hash-tags to events to help users find each-other. #middcommencement could be used for Flickr streams as well as Tweets. Setting up hash-tags establishes an intersection for the content creators and the audience. The vehicle for the media eases dialog and sharing with little effort on our part.

MiddStart is a good example of us providing a space for connections. This can be improved by opening up the conversation on Facebook, YouTube and Flickr. Start a MiddStart Account and create pages for each of the Projects. Archive closed projects. Use middStart.midd to aggregate the content

Tools for Monitoring

Monitor Conversations with HootSuite. It allows one to view live updates of multiple profiles and social media channels, including Facebook, Linked-In, Twitter, Four Square, and blogs.

HootSuite Pro allows multiple administrators to maintain accounts and make assignments for responses or flag content for sharing or deletion.

Need to respond? Here is a response flowchart  from Depaul University:

Things we can do to improve our use of the Social Graph

We have done a good job at embracing link sharing, but we are not doing a good enough job at sharing the conversation.

Class List for @middlebury FB only goes to 2010

Establish a class of 2015?

Set-up hash-tags for topics/events/programs that have gravity. The power of social graphs are that we only need one highly connected active member to make a shared event successful.

Make a wordpress plug-in for middmag to enable other Bloggers embed our content and reach a broader audience

Publish hashtags that will unify Flickr, ustream, facebook, youTube and Twitter posts for events. This will allow those who are geographically challenged to attend.

We could stream a live video of the next commencement, allow attendees to upload images to flickr, and accept live tweets and Facebook posts. This crowd sourced content will be available after the event to be searched or shared.

To test the water of this sort of live event broadcast, we could use a popular small venue event—perhaps an Art event. Promote a Hash-tag for sharing media and tweets. As an alternative to streaming video the event could stream audio and use crowd sourced snapshots from cellphones or a professional photographer using a wireless data-card like an Eye-fi. The images will be uploaded to a Flickr Account sporting the promoted tags. A webpage could aggregate the content and present live tweets that use the same tag.

We should set up a place where those who blog, tweet, or facebook about Middlebury can be cataloged. That information should be made publicly available as MiddBlog had done.

Our Facebook page can use some further customization. Amherst uses their page to present their YouTube Videos and Flickr Stream.

Google+. Slow-starter but one to be aware of

Google+ in the classroom. An article showing the possible future use of google+ in our classrooms. Innovative Social Media Use at Colleges: Will Education Pioneer Google+?

Google+ added places and will compete more fully with Facebook.