the art of lying just beyond the edge of respectability

Email Campaign Design

Posted March 02, 2010 in Web Design | Comments 2

Standard Sizes

Keep the document width at a maximum of 600 pixels. This width is the average viewable area for text and graphics in most modern email programs. As screen resolutions and monitor sizes continue to climb we may see an increase in the visual real estate of email newsletter design, however the general rule of thumb for now remains 600 pixels wide.

Above The Fold

Do your best to maintain the call to action or principal messaging of the email, above the fold. The "Preview Pane" or viewable content area in an email program won't display 100% of your design (in height). Users will be instantly greeted by your messaging when they open your email if you relegate the important aspects of your campaign near the top of your design.

Tables anyone?

Email programs don't always render CSS the way that many browsers do. This means that for positioning graphic elements within an email, you need to stick to a table based design.

I've heard other designers argue that this is no longer the case, and that CSS will work. I don't agree. If I have to use styles, I write them inline. See next tip below.

In Line Style

If you do decide to include CSS in your email campaign, write the styles inline in your HTML. Declare font face names, sizes and colors explicitly inside of the <font> tag:

Test Your Design With Images Disabled

As a security, most modern email programs block images from appearing until the user grants the email permission to download the asset files. Be sure you preview what your design looks like with images disabled. It is often times too prohibitive to craft a visually appealing design sans images, so educate your clients. It it is standard practice to include images in an email campaign, but knowing image information may not be downloaded by all of the recipients of the message should inform your design. This means that when you layout out the creative elements of your email design, attempt to include as much text-based information as possible.

Avoid Response Limiters

As discussed above, some users do not choose to unblock images contained in html emails. Knowing your audience isn't always going to view your message in its full graphic form, avoid placing call to actions inside images. Always try to define your call to action as text in your email design. Dress up the text information with inline css, colors and font weights. Reinforce your call to action with graphics and images, but leave the message as text-based data.

Alt Tags Are Your Friend

<alt> tags can be leveraged in your html to supply recipients an indication of what the images in your design represent. For instance, if your user doesn't enable images in their email program then supply an <alt> tag on your header image that lists your company name & tag line. The alternative text can indicate what the missing or blocked graphic represent. Don't miss the opportunity to provide your recipients with as much information as possible.

Avoid Background Images Where Possible

Some older email programs will not render background images. Even with images enabled, certain email programs do not display html background images at all. If possible, try instead to rely on background colors. The <td> tag will display the native "bgcolor" attribute on any program that renders html:

Text Only Version

A text only version of your email should always be supplied as an adjunct to the graphic version of your email campaign. It is important to note that some email programs will not render html, and furthermore some users elect to block all email containing html. Instead of ignoring users without html email capabilities, a text only message containing your email contents assures everyone can read your transmission.

Always remember to include in your text only email a clear indication of how users can unsubscribe from your list. Also provide your company contact information clearly listed at the bottom of your message.

Platforms

There are lots of pay-based options for sending html and graphic-rich emails. Two solutions gaining a substantial amount of popularity are MailChimp and Campaign Monitor.

I have used both for issuing and managing substantial email campaigns for clients and I am very pleased with their reporting, tracking and submission features. Campaign Monitor has wonderful statistic and analytic reporting and MailChimp is a platform I often recommend to users with less html and web development skills. Both services offer text-email generation as a backup to your graphic campaign, and both companies feature straightforward dashboard interfaces.

Share This Post

             

Comments

Comment on this entry

Name:

Email (will not be displayed):

Website:

Comments:

Enter the text from the image above: