Working with agencies, we often receive beautiful layouts with clever marketing that could win design awards in print and other online mediums. However, we are frequently the bearers of bad news when we have to tell them that their layouts are lousy for email marketing. For tips on how to stay creative and still get through to your audience, click here.

Did you miss our latest issue of Factory Direct? Click here to subscribe!

Across the industry, desginers are going back to the basics regarding their email creative. These simple guidelines will not only help your email render well across the various email clients, but will also make your email stand out above the rest. Click here to view our 2007 Email Design Guidelines, as featured in this month’s issue of Factory Direct.

Get your copy of the printer-friendly PDF verison of this guide here:

2007EmailDesignGuidelines.pdf

Don’t miss out on another issue of our monthly e-newsletter, Factory Direct! Click here to subscribe.

This post was derived from my recent speaking engagement at Click Z’s Specific: Email Marketing conference in NYC. I gave a talk titled “Cutting Through the Clutter Creatively” which focused on why marketers should be strategic when considering the creative variables that make up their email marketing campaigns.

More than ever the inbox is a challenging place to capture the attention of your recipients. Some of the stats that I referenced at my talk include the Nielsen Norman research whichs states that the average recipient of marketing or promotional email has an attention span of your email of five seconds or less. And those monthly newsletters we all work so hard on producing typically only capture the attention of users for 40-50 seconds max. This information reinforces the fact that creative elements can sometimes make or break your email marketing efforts.

The key creative variables in email that marketers must embrace are the following:

From: Build the trust of your recipients by making your identity obvious. Be consistent with your From line, make sure its branded with your company name or an individual from your organization.

Subject Line: Jupiter Research found that 35% of email users open email based on what is contained within the subject line. Be sure to include your company name or brand name within the subject line, as recent research shows this can have a dramatic effect on open rates.

Copy: Personalized, targeted and relevant are three words that should define the copy in your email marketing campaigns. Write clear and concise copy, putting your main message and identifiers above the fold, and make sure you use fonts and a font size that makes reading your email easy on the eye.

Imagery: Always include your company logo at the top right or somewhere on the header. This helps with establishing the brand recognition. Always have your audience in mind and use relevant imagery that is targeted towards your recipent and tailored around your message. Be sure to hyperlink all imagery to your main call to action.

Call to Action: Place your key call to action above the fold as often as possible. During your testing phase, conduct your own internal “5 second test” to a small group of individuals to make sure your call to action is clear and to the point.

During my talk I also mentioned the importance of keeping your landing page consistent with your email creative. If you do manage to get a recipient to open and then act on your email, don’t lead them astray. Targeted landing pages with consistent creative elements can go a long way in increasing your conversion rate.

Finally, we all know that one of the best attributes of the email medium is that its easy to test and tweak your initiative. Every audience is different, so learn as much as you can about your list of recipients by testing a variety of creative elements before drawing any hard conclusions on what works and what doesn’t.

If you are interested in receiving a copy of my power point presentation from Click Z Specifics, feel free to email me at greg [at] blueskyfactory [dot] com.

Happy emailing!

Here is a great article from the ClickZ network that goes over some of the best practices of formatting your HTML email. Great tips for consideration when developing your email campaigns.

• Code e-mail by hand. HTML design for e-mail is trickier than Web HTML. HTML design programs such as FrontPage aren’t ideal for designing HTML e-mail. They typically add extra code that wreaks havoc with certain e-mail clients. Also, don’t use Microsoft Word’s “Save as Web Page” functions. It looks easy, but trust us — you’ll commit an HTML abomination.
• Have an HTML programmer code your e-mail template by hand to keep it clean. Alternately, use programs such as HomeSite and Dreamweaver and remove any unnecessary code by hand.
• Be careful with tables. Avoid using nested tables. Some e-mail clients, Lotus Notes and Netscape Messenger in particular, may not render them correctly. Also, avoid 1 x 1 pixel spacer GIFs (to force widths in your table data cells). These are often found in spam and could get your e-mail blocked.
• Use care with background images. Background images for individual table cells are generally acceptable but may not appear in clients such as Lotus Notes.
• Host images on your Web site instead of embedding them in messages. Some ISPs filter e-mail with embedded images. File size can get quite large with multiple embedded images, which can also get the message blocked. Instead, host those images on your Web site and make sure all paths point to the full URL (e.g., http://www.mysite.com/images). Additionally, use absolute rather than relative links. We often see messages with broken images that pointing to “images\image.gif” rather than a full absolute link.
• Avoid CSS. CSS on a Web site can simplify the coding process and ensure a consistent style. In HTML e-mail, they can cause incorrect rendering in some e-mail clients, or get stripped out or overwritten. If you must use CSS, choose the embedded styles also known as inline. Embed the style within the two body tags, not within the header. Inline CSS can also be embedded directly in the message code.
• Keep HTML e-mail 500-650 pixels wide. Wider HTML messages often force the recipient to scroll horizontally to view the whole message. Messages that are too wide are problematic, especially in a preview pane.
• Use image alt tags. These show one or two words describing an image or an action when the image doesn’t display because of slow loading time or image blocking. (However, except for Gmail, most ISPs/e-mail clients that block images also block alt tags.) A sample alt tag looks like this: “E-mail marketing solutions”
• Add functionalities (e.g., send to a friend) carefully. Many e-mail clients won’t render forms correctly or pass data from an e-mail form to your Web site. Use links to your Web site for send-to-friend forms, surveys, search boxes, and so forth to ensure the greatest compatibility.
• Just say no to Flash. Host rich-media functions such as inline audio, video, or Flash on your Web site instead of embedding them in an e-mail. Post a link that connects directly to these functions on your site. Many recipients won’t have the compatible computer platform, e-mail software, or correct version they need to render those functions correctly.
• Avoid scripting (JavaScript, Visual Basic etc.) if you can. Usually the scripts will be stripped out, causing the intended function to break. Sometimes scripts are mistaken for malicious code and get the message rejected outright. Instead, move readers to your Web site, where you can more safely use dynamic components.

Taking a purely aesthetic approach to viewing html email is something I’ve been doing for years. Much like with a webpage, it usually takes me all of a split-second to visually diagnose a potential “unwanted” in my inbox and quickly mark it for deletion. I prefer my eyes to any imperfect spam filtering application.

According to a recent study published in the journal of Behaviour and Information Technology, Canadian researchers found that it takes a mere 20th of a second to visually diagnose a webpage. In one blink of the eye, volunteers in the study were able to give positive or negative ratings on several web pages. Their results were shockingly close to opinions made after much longer examinations of the same pages.

This study can relatively be applied to email. After all, an html email is basically a mini webpage in your inbox. A well-designed email will reinforce its message. Researchers suggest a “halo effect” is created by this visual impression. If people feel positive about the design, they are going feel positive about the content of the email. They go hand-in-hand.

There are a few key design items that I look for after opening an html email. Here is a breakdown of my quick diagnosis.

The Logo
A logo speaks volumes about a company. It is the core branding feature that defines a company’s image. If the logo looks sloppy or thrown together, chances are that the company is as well. If the html email doesn’t contain a logo, it’s probably not worth reading. It should be clean and well positioned at the top of the page.

The Layout
This can vary greatly and I’m not one to put a uniform on a layout. But the general arrangement should be as follows. The most important content on top (logo, header graphic, headline), followed by the body (main copy), and ending with the footer (company address, unsubscribe feature, disclaimers). These page elements should “flow” working together to deliver the email’s content.

The Colors
Everyone has their favorite colors, so I’m not going to say what should and should not be used. I tend to stay away from fluorescents and colors that don’t match the subject matter. For example, I’m not going to take legal advice from an orange and yellow email, but I may check out a vacation package with those same colors.

The Content
The body of the email should be easy to read and positioned neatly under the headlines. Often I see body copy jumping around graphics and typed in a font that I need a decoder to read. And for me, the body copy shouldn’t be too long. I don’t want to read a small novel in my inbox. Maybe an enticing paragraph or two and let me click through to the company’s website to read the rest of the story.

In conclusion, you don’t have to be a creative director or a web designer to know what a good email looks like. Just be trusting of that initial design perception. Nine times out of ten it will set the tone for the rest of the content.