Guide to Functional Email Design

You may be viewing this guide with Internet Explorer (5, 6 , 7 or 8), Firefox, Safari, Opera, AOL or Google Chrome.  And if you are reading a guide via email, you may be using one of many email clients such as Outlook, Yahoo!, Gmail, AOL, Hotmail, Thunderbird, eMail Manager, etc. It’s a lot, I know.  My point is, there are dozens of ways to view a website and even more options for reading email.  The challenge for businesses sending email is that all of these email clients don’t display emails in the same way – so they can look different if not formatted properly. As a designer and web developer, I work hard to make sure websites work the same with all browsers, paying close attention to usability. Email design requires the same attention to detail.  That is why designing a functional and readable email campaign is just as important as the marketing elements that go into creating the email. 

Here is a quick list of common email formatting issues:

• Some email clients don’t show images, so if your email is made up of mostly images, the recipient may not be able to see it at all.
• Style sheet elements that normally function well in most websites, don’t always function in email clients.
• Web readers have a short "Internet" attention span and a lead can be lost it the title isn’t enticing enough or the From address is unrecognizable
  
• Badly formatted emails lose credibility and get tagged as spam, regardless of the validity of the email list.
  

Action Steps
The best contacts and resources to help you get it done

Create Functional Emails

(1) Send emails in HTML and plain old text. (2) Find out what type of HTML and CSS tags work with what email clients. (3) Be sure that the Call to Action is available as text and as a graphic. Many email clients such as Gmail have a switch to "turn off" image downloads, so recipients won't see email images unless they are motivated to flip the image switch "on". (4) Provide a link at the top of your message to invite users to "View the Email with Their Web Browser." Don't forget to include the email title and offer here too. (5) Less is more. Limit the number of styles and the amount of formatting to improve your emails "stickiness."

I recommend: Send emails using a clean and simple design template or have a template custom designed that can be re-used with updated content. Try Constant Contact or Vertical Response for self-service, low volume email marketing using generic templates or IFModules for high volume, customized email design and campaign management.

Make sure the email is W3C Compliant

W3C is the World Wide Web Consortium that works to develop web standards and guidelines that many email clients use to determine email credibility. Non-compliant emails could be deemed as Spam.

I recommend: Take a look at what W3C has to say about email compliance at: www.w3.org or validate your email HTML at http://validator.w3.org/check.

Test Your Emails and Then Test Some More

There is no magic Undo button after you deploy an email campaign. Test emails using different email clients before you click Send.

I recommend: Many web-based email clients are free, such as Gmail and Yahoo!. Viewing HTML emails with Internet Explorer 7 will closely resemble how it might look in Outlook Express.

Tips & Tactics
Helpful advice for making the most of this Guide

• Keep it simple. Design email using basic Web 2.0 design standards. Present relevant information that is to the point without too many graphical distractions.
• Use a short, concise title and always include a From address (e.g. info@yourcompanynam.com).
• Brush up on your email techno vocabulary by browsing our guide to Common Email Marketing Terminology.
• Research Web 2.0 Design standards. They are a good measure for designing email campaigns.