Interactive: e-mails

The goal of any e-mail campaign or eNewsletter is to provide rich, compelling, up-to-date content... that doesn't end up in the trash bin. The challenges to e-mail based marketing are three-fold: they must be designed to attract and hold attention (like any advertising material in general), they must be designed to compete with the flood of other permission- and non-permission based marketing (such as spam and other general e-mail advertisements), but they must also adhere to a strict set of rules, both technological and practical. Different mail clients have different filters, live-areas, and rules on handling HTML content. Consideration to all of these ends up being just as important as there is to good general design and advertising principles.

As you can see below, I've designed and developed many eNewsletters — many of which must be produced on a monthly basis. And no, these are not generated from a third-party product; they are hand-coded each issue. And each eNewsletter and e-mail campaign is tied to a database that must be properly referenced and set up. What results in a process extremely clean and efficient, yet so complex I literally wrote the company manual on e-mail based web production. While not the full list of eNewsletters and e-mails I've created, below you'll find a small sampling of just how these best-practices were applied. Thumbnails expand to full snapshots, as well as details on the particular project.

ARRK eNewsletter
CONCEPT + DESIGN + HTML/CSS

One of the more recently developed eNewsletters I've done, I designed a template that was unlike any of the other eNewsletters my company had produced thus far. This layout is now considered one of the "models" to follow when designing new eNewsletters at my company.
 
A detail view of this e-mail.

CGC eNewsletter
CONCEPT + DESIGN + HTML/CSS

Problems with this version: way too much content, inability to track what articles the subscriber is reading, layout made production difficult.
 
Resolution: Articles were divided up into categories, and teasers linked to full articles, which made the e-mail much shorter and trackable. The design was also updated to match the new CGC branding.

PMG eNewsletter
CONCEPT+ DESIGN + HTML/CSS

Application of updated PMG branding to new eNewsletter.

NGC eNewsletter
DESIGN + HTML/CSS

Application of updated NGC branding to new eNewsletter.

NCS eNewsletter
DESIGN + HTML/CSS

Like the CGC eNewsletter, the main issues were: outdated brand look, too much content, inability to track user interest.
 
Using the same guidelines as the other CCG eNewsletters, the articles were separated into teasers linking to full formats on separate pages, which increased readability and added tracking functionality.

Thomas C. Wilson eNewsletter
DESIGN + HTML/CSS

A quarterly eNewsletter for the tube cleaning industry. To add some visual interest and to clearly distinguish between the newsletter issues, the header changed themes with each season.
 
An example of the fall issue.

Gravograph eNewsletter
CONCEPT + DESIGN + HTML/CSS

For this particular project, the client wanted to be able to produce the eNewsletters on his own. Thus, I designed the template around the new company branding, and developed the HTML and stylesheet for maximum ease of replication.

OICM eNewsletter
DESIGN + HTML/CSS

Working within an existing template, I designed the article sections for this eNewsletter. I also did the HTML production.

Bird Technologies e-mail
DESIGN + HTML/CSS

This e-mail was part of a direct mail campaign promoting a tradeshow by entering a contest. The e-mail was designed to mirror the printed piece.

Gravograph e-mail
DESIGN + HTML/CSS

An example of an eCommunications opt-in e-mail. Depending on the audience, some eCommunications required a "double opt-in", which meant not only did subscribers sign up to receive e-mails on an online gateway page, but they also needed to confirm their opt-in by e-mail response. This e-mail not only asked them to confirm their subscription, but also displayed and confirmed the contact information they provided on the gateway.

Berk-Tek e-mail
DESIGN + HTML/CSS

A mockup for this e-mail was given to me to reproduce in e-mail-ready HTML format. As you'll see in the next example, I took this design as my point-of-reference to design and produce the subsequent e-mails.
 
This was the next e-mail created for this client's marketing campaign. Between this and the first e-mail, the company underwent some branding changes, so I incorporated their new look while keeping true to the previously developed look.