Campaign Monitor and Drupal start hanging out

Since we released the Campaign Monitor API way back in July 2005 we've seen it used in ways we never anticipated. On top of the way you guys have been using it, we've also been incredibly lucky to have many customers put together API kits in their language of preference (such as Ruby on Rails, PHP, .NET and Flash).

For those of you familiar with the incredibly popular Drupal content management system, Campaign Monitor customer Alexis Bellido recently put together a free Drupal module that makes it easy to integrate Campaign Monitor into any form on a Drupal managed site. Install the module then drop in your API key and List ID and you're done.

Judging by the comments, a number of further improvements to the module are in the works, so if anything eventuates we'll be sure to post about it here. A huge thanks to Alexis for putting this module together, we're looking forward to seeing where he takes it from here.

Read this post Posted by David Greiner - 4 Comments

“Completely easy to use”

Though we've only used Campaign Monitor for two mailings so far, the second one was sent out under a haze of the flu, and it was still completely easy to use, without an ounce of confusion or frustration. I think that says something.

Andrew Womack, The Morning News

Read this post Posted by Mathew Patterson

Extreme Email Makeover, Vol. 3: EIU Alumni Association

Welcome to the third episode of our Extreme Email Makeover series with Dr. Mark Wyner. We’ll be running a series of email makeovers to help illustrate best practices for email design, layout and construction. Dr. Wyner will assess an existing email newsletter for ailments which can easily be cured with treatments in modern “medicine.” A patient’s vitals will be provided (email intent, target audience, etc.) and a diagnosis will be revealed. Finally a cure will be outlined, complete with a brand new email template designed and built by Dr. Wyner.

The Patient

The Alumni News Bulletin is a monthly email-publication for Eastern Illinois University (EIU) Alumni Association. The newsletter covers (a whole lot of) information about the EIU-campus, alumni events, etc.

Email Clients

As this newsletter is deployed by an educational institution to a subscriber base of graduates, it can be assumed that a general audience of recipients are employing a broad array of email clients such as:

  • Apple Mail
  • Thunderbird
  • AOL
  • Outlook Express
  • .Mac
  • Yahoo
  • Gmail
  • Windows Live Hotmail
  • Hotmail
  • Outlook

Note that while it is likely most of the alumni are using personal email addresses to receive the bulletin, some of them may be using typical office-clients such as Outlook.

The Diagnosis

An initial assessment exposed an array of potential infirmities, but an exploratory surgery would be necessary to grasp the full scope of the patient’s condition. Upon investigation, it became clear that reconstructive surgery would only be the beginning of treatment which would be necessary to stabilize the patient’s health.

Design Ailments

The EIU Alumni Association has quite a lot to tell each month, and they sure pack it in. While very informative, this email is quite extensive for a single message. And for recipients willing to read a 1,700-word email, the visual design left something to be desired. Dr. Wyner addressed the following disorders as part of his treatment:

[screenshot (fig. 1): original email template]
[fig. 1]

  1. Graphical masthead (title and issue date vulnerable to possible omission).
  2. “Web version” link placed below large masthead-image and in the right-column of a two-column layout (very low in the hierarchy).
  3. Lengthy, redundant information consuming valuable real estate (albeit useful, it is more of a utility statement).
  4. Secondary information placed in most important corner of layout, including gratuitous use of graphical text (vulnerable to possible omission).
  5. Overwhelming number of events (distracts attention from events on the immediate horizon).
  6. Photos with graphic borders/shadows (bandwidth-heavy and labor intensive to create).
  7. Excessive number of story previews (decreases potential for quick scanning).
  8. No visual separation between stories and utility information about the association (blends recurring information with news).
  9. No link with “forward to a friend” feature (especially when Campaign Monitor makes this so easy).

It should be noted that this template was not only CAN-SPAM Act compliant (reference item 9 in fig. 1), but the patient went the extra mile for good health in adding a link to their website as well as two telephone numbers. Nice work!

Markup Ailments

When I opened up the patient’s code, it became clear that there was a lot of work ahead to stop internal bleeding. Following is a list of life-threatening ailments which required attention:

  • CSS was in short supply, and only half of it was embedded (external style sheets are scarcely supported, trigger many spam filters and are most often stripped altogether).
  • The CSS which was used utilized a naming schema with no reference to presentation (.style13, .style 14 and so on) creating an ambiguous environment for third parties attempting to format content.
  • Tables were used for all aspects of layout, including use of 1x1 pixel “spacer GIFs” (an antiquated technique which increases file-size and decreases accessibility), and many FONT tags were used throughout.
  • ALT text was not used for graphical text.
  • Lack of semantic markup (unnatural and inconsistent paragraphs, subheads, etc.).

Email Vital Signs

  • Standards-based markup: no
  • CAN-SPAM Act compliance: perfect
  • File size: 56KB

The Cure

With a clear diagnosis a treatment was obvious. A visual-design overhaul would help heighten the attention of the patient’s audience and enable content editors to easily create new editions. Improving the information design and using semantic markup would ensure readability and accessibility for all recipients. Finally, a depressant would be prescribed to reduce the amount of information exhibited in each edition.

[screenshot: new email template]

Treatment

  • Text-to-HTML: the graphic text was converted to HTML text to ensure accessibility and content readability, improve ease of use for content managers, reduce the overall file size and decrease the possibility of spam filtering.
  • Link to website version: while the original template did include a link to a website version of the email, its placement was less than optimal. Moving this to the beginning of the template ensured it would be visible in the very scenario it is intended to reconcile.
  • Improve information design: the creation of two columns—one for primary information, and another for secondary information—and placing the former first in the hierarchy (left column) would strengthen the overall information structure and ensure fluid readability in the broad array of email environments.
  • Reduce information overload: rather than printing previews to every news story from the monthly cache, only four stories are featured with previews. Then a list of titles for the remaining stories are printed under the subhead “additional news.” The list of upcoming events was also optimized to reduce clutter and bring focus to those in the immediate future.
  • Optimize visual treatment of contextual photos: using CSS borders is a light-weight and manageable solution to the approach of creating photos which emulate three-dimentional objects.
  • Separate stories from utility information: recurring information about the association and the university was segregated from the newsletter stories to increase reading efficiency for monthly readers.
  • Permission reminder: a preface was integrated to assist with previews/snippets and to help reduce spam flagging.

The doctor performed one final procedure which would serve the needs of both appearance and character:

[screenshots (fig. 2): seasonal variations in original and new templates]
[fig. 2: before (top), after (bottom)]

Dr. Wyner noticed how the patient used a seasonally-relevant photograph in each edition of their newsletter (fig. 2, top) to help capture the relevance of the moment. He knew could make a few minor hexadecimal changes to the CSS and change one image SRC value to create a unique template for each season of the year. With that, we are happy to announce the birth of quadruplets (fig. 2, bottom)! Meet Spring, Summer, Fall and Winter.

Email Vital Signs

  • Standards-based markup: yes
  • CAN-SPAM Act compliance: perfect
  • File size: 17KB (30% of the original size)

Before and After

Let’s review some screen shots illustrating some key benefits of this surgery.

Thunderbird: plain-text view

[screenshot (fig. 4.1): email preview]
[fig. 4.1: before (left), after (right)]

One of the most detrimental aspects of the markup was the lack of semantic structure. Many paragraphs were created with BR tags instead of the semantically appropriate P tags, and subheads were created with CSS-styled P tags instead of semantically appropriate header tags such as H2. Coupled with a lack of ALT text and gratuitous “spacer GIFs” the problem is quite serious.

These screen shots were taken in Mozilla Thunderbird in plain-text view. Looking at the original template (fig. 4.1, left) we can see how the antiquated markup and gratuitous images render the email scarcely readable for those using text-based clients.

Note how in the new template (fig. 4.1, right) the preface text is visible first in the hierarchy, the title and issue date are immediately obvious, ALT text for the photos are clearly exhibited and paragraphs are properly formatted.

A word about plain-text alternatives

Some email clients (such as Thunderbird) offer a preference to disable HTML rendering even though they are an HTML-capable. Many other email clients—primarily mobile devices and screen readers—simply do not support HTML, and instead look for plain-text alternatives. It is always a best practice to send multi-part emails (HTML and plain-text versions as a single package) to ensure that a properly-formatted plain-text version is available to those who can’t (or choose not to) render HTML. However, if for whatever reason you are unable to send a multi-part email, the aforementioned process of utilizing semantic-markup will help your content survive the evolution from HTML to plain-text if rendered as such.

.Mac: images enabled

[screenshot (fig. 4.2): email preview]
[fig. 4.2: before (left), after (right)]

These screen shots were taken in .Mac with images enabled. Looking at the original template (fig. 4.2, left) we can see some significant problems:

  • An inappropriate marriage of color and background declarations exhibits dark text on a dark background (including nearly-undecipherable links and subheads).
  • Secondary content (alumni links) take center stage while important content is forced downward.

Note how the new template (fig. 4.2, right) retains its formatting and consequently retains its readability.

Opera Mini webmail: images enabled

[screenshot (fig. 4.3): email preview]
[fig. 4.3: before (left), after (right)]

These screen shots were taken in Opera Mini webmail with images enabled. Looking at the original template (fig. 4.3, left) we can see some significant readability issues:

  • Many small-screen devices reduce large images to the width of the screen. In this case the graphic title and issue date are reduced to a size which is nearly illegible.
  • Lack of semantic markup clumps all fake paragraphs into a single paragraph.
  • Placing secondary information in a left-hand column and primary content in a right-hand column, forces important information (including “web version” link) down in the hierarchy.

Note how the new template (fig. 4.3, right) addresses these issues:

  • Use of HTML text for the masthead ensures the title and issue date are readable and immediately obvious.
  • Semantic markup clearly differentiates subheads from paragraphs.
  • Important information appears first in the hierarchy, offering immediate help (preface) and value (first story) for the reader.

Opera Mini webmail: images disabled

[screenshot (fig. 4.4): email preview]
[fig. 4.4: before (left), after (right)]

These screen shots were taken in Opera Mini webmail with images disabled. Looking at the original template (fig. 4.4, left) we can see that the aforementioned issues (with images enabled) are made even worse with images disabled. The primary issue is that with no ALT text for the masthead image and only sporadic implementation for the links/subheads, the content becomes practically unreadable. While some of the text is indeed legible, it is ambiguous without subheads and the presence of a title.

Note how the new template (fig. 4.4, right) is very readable with information which retains nearly all of its formatting.

Outlook 2003: auto preview

[screenshot (fig. 4.5): auto preview]
[fig. 4.5: before (top), after (bottom)]

These screen shots were taken in Outlook 2003 using its “auto preview” feature. Looking at the original-template preview (fig. 4.5, top) we can see that because Outlook is using the image source for its auto preview, it offers literally no information about the email itself.

Note how the new-template preview (fig. 4.5, bottom) at least assures the recipient that s/he is a subscriber.

Gmail: snippet

[screenshot (fig. 4.6): snippets]
[fig. 4.6: before (top), after (bottom)]

These screen shots were taken in Gmail using what it refers to as “snippets” (serves the same purpose as Outlook’s auto preview). Looking at the original-template snippet (fig. 4.6, top) we can see that Gmail has plucked the ALT text from the images in their order of appearance. Given that ALT text was used sporadically, the preview is quite meaningless.

Note how the new-template snippet (fig. 4.6, bottom) at least assures the recipient that s/he is a subscriber.

A word about auto preview and snippets

The aforementioned thoughts reference general considerations about optimizing content for auto preview and snippets. However, David Greiner devised a well-thought-out technique for truly targeting these previews. If you are interested in capturing this valuable real estate, you’ll want to check out his post about this technique.

Thunder screen reader

Link 1: ~alumni
Link 2: Eastern Illinois University Home
Link 3: s://www.give2eiu.eiu.edu
Link 4: www.eiu.edu/~pubaff
Link 5: EIU Alumni Association Membership Page
Visit the
Link 6: events page
for more information and registration.
February 17
Link 7: Alumni Reception
Camelback Inn,
Scottsdale, Ariz.
February 24
…(cont.)…
Field Narrowed to 16 for EIU’s President Position

You are receiving this email because the email address [email] was subscribed to the EIU Alumni
Link 1: email list
. Having trouble reading this email? View it on our website.
Page Headline: eiu alumni newsletter
march | 2007
Field Narrowed to 16 for EIU’s President Position
The field of presidential candidates has been narrowed down from 58 to 16 as the search for the next president of EIU continues. Robert Webb, the Presidential Search Advisory Committee chairman, said the committee has begun conducting reference checks on each of the 16 remaining candidates.
During their Feb. 15 meeting, committee members are to discuss those findings and reduce the field to five to eight candidates who will be invited to confidential preliminary interviews. After those interviews are complete, finalists will be invited to campus for extensive interviews with the EIU community.
For up-to-date information on the presidential search, please
Link 2: visit the presidential search page.

These transcripts were captured with the screen reader “Thunder” as it read the two templates. Looking at the transcript from the original-template (top) we can see that the primary content is not revealed until well into the email (59 lines to be exact). We aren’t even given a title or issue date because of the absence of ALT text.

Note how the transcript from the new-template (bottom) shares the title and issue date on the fourth line, and immediately continues to the primary content.

Summary

Dr. Wyner approached treatment from many angles. Speech therapy (accessible/semantic markup) to help the patient communicate via all email clients, extensive cosmetic-surgery to make the patient visually appealing (because when we look good, we feel good) and reduction of fat (bulky presentational markup) will make the patient’s heart and lungs (bandwidth) happy.

Check out more handy work from Dr Mark

Don't miss the other makeovers in the series:

Read this post Posted by Administrator - 9 Comments

W3C HTML Mail Workshop

In Paris next month, the W3C (World Wide Web Consortium) is holding a HTML Mail Workshop to discuss the technical and business facets of using html in emails.

This is a significant event, because it shows that the people involved in formulating and setting web standards recognize that HTML in email is worthy of more time and effort than it has received in the past.

It's great news for everyone who has been frustrated by inconsistent support for html in email clients, and is tired of explaining that html can actually improve the experience for people receiving email if done right.

While the technical side (authoring, interoperability, security) is very important, non-technical submissions are also highly encouraged for this Workshop. We would like to hear from direct marketers, online retailers and companies using HTML emails as their default format, to gather requirements, hear triumphs and horror stories, and prioritize plans for future technical work.

If you or your clients have feedback on this topic, now would be a great time to get your voice heard, and make an impact in the future of html mail. The W3C is looking for short (1 to 5 page) papers from contributors, so it would be worth the time.

Papers are due in by April 21st, so if you have something to say, you'll want to get started soon. Check the worskhop page for submission details, as well as attendance information if you are able to make it in person.

Read this post Posted by Mathew Patterson - 1 Comment

Quick Review: The SitePoint Email Marketing Kit

The Email Marketing KitA week or two back we had a copy of SitePoint's new Email Marketing Kit delivered and I was very pleasantly surprised when I opened the box. The kit is written by Jeanne Jennings, an industry veteran who has been pumping out fantastic articles on email marketing for years, many of which I've linked to from this blog.

The first thing that caught me was the sheer size and quality of the kit. Instead of the cheaply bound "printed e-books" I'm used to, this thing comes in a nice hardcover binder with tabs, 320 pages of great content and a bonus CD.

After spending the weekend having a closer look though, the most impressive part of the kit is just how practical it is. Instead of bland guidelines and theoretical how-to's, Jeanne provides real-world examples to back up all of her arguments. The kit covers just about everything you'll need to know about email marketing in exquisite detail - from strategy to design, delivery, reporting and everything in between.

The kit also includes a CD loaded with goodies, such as:

  • An email production brief and strategy template
  • Reporting and strategy worksheets
  • Email templates and examples of good and bad email design
  • Email proofing and QA document

It's very rare that we recommend something like this in our blog, but I was extremely impressed with the kit and think it's something most, if not all our customers will get a lot of value out of. The kit costs US$197, but Sitepoint also offer a nice money back guarantee if you don't find it useful.

Read this post Posted by David Greiner - 2 Comments
  1. 1
  2. 2

Sign up for free.
Then send campaigns for as little as $9/month

Create an account