 Whether you're a seasoned graphic designer or a marketer branching out into design, there's one thing you need to know: designing effective HTML email marketing has its own unique set of challenges. Are you ready to overcome those challenges? Does your design have what it takes to compel recipients to take action? Are you sure your email design includes all of the latest best practices?
When it comes to effective email design, there are three things you always need to keep in mind whether you're creating an e-newsletter for your entire list or a sales-focused mailing to a select group of customers and prospects: the basics, the best practices, and the pitfalls. Let's take a look at each of these three categories and explore how each one can have an impact on your overall email design. Ask yourself each of these questions to ensure that your design makes the grade.
Checklist One: The Basics
[ ] Did You Create Two Versions?
When scheduling the design time for your email marketing campaign, always plan to create at least two separate versions of your email - one in HTML and another in plain text. Why? Because if you only provide an HTML email, any subscribers whose email clients are set up only to handle text messages will display a jumble of text, odd characters and HTML code. You may also want to consider developing a third version in Rich Text Format (RTF) to take advantage of those email clients that do not render HTML but that are capable of presenting rich text.
[ ] Did You Design for the Top 5 Email Clients?
Keep in mind that your email design doesn't just need to look good in the email client you use; it needs to render properly in the most common email programs used today. According to a MarketingSherpa 2010 Email Marketing Benchmark Report, nearly 80% of email users use one of the following five email clients:
If possible, test email in more than one version of an email program - see how it renders differently in Microsoft Outlook 2010 compared to Microsoft Outlook 2007 - and also see how it appears in the same email programs on different computing platforms, like Macs and Linux computers or even the iPad.
[ ] Did You Include a Link to a Web Version?
Even though you test for a number of different email clients, you probably have at least one subscriber using a non-standard program - or perhaps you have a growing number of subscribers accessing their email from smartphones or other mobile devices. That's why it's important to include a link in your email to a Web-based version of your email message. Doing this will ensure that all subscribers can access the information as you intended even if the email they received didn't render properly.
[ ] Did You Use the Right Page Dimensions?
When designing for the standard email client, page width should be top-of-mind; after all, forcing readers to scroll horizontally isn't exactly their favorite thing to do. To stay on the safe side, ensure that your email designs are between 500 and 650 pixels in width. And don't assume that readers will scroll down a long page of content either - make use of landing pages to explain offers and benefits in more detail.
[ ] Did You Consider the Right File Size?
Page pixel width isn't the only number with which you should be concerned - you also need to ensure your message is the appropriate file size. Because some recipients may have file size limits within their email client, a good rule of thumb is to keep your message sizes to between 40 - 50 KB to avoid potential issues.
[ ] Did You Use Color to Your Advantage?
No one can deny the role that color can play in effective email design. Done well, color can highlight a call to action and draw the reader's eye to the email's most valuable information. Done poorly, color can confuse the reader, causing them to overlook important elements of your email - if they even read it at all.
Make color work for you. Ensure that the background colors, font colors and the colors of any buttons or images in your email complement each other and work well together. Experiment with color combinations until you find one that effectively calls out important information while staying true to your brand. And avoid any color combinations that may negatively affect readability.
Checklist Two: The Best Practices
[ ] Did You Follow W3C Standards for HTML Coding?
The World Wide Web Consortium (W3C) has developed standards related to HTML coding. Abiding by these standards ensures that your HTML email marketing will be accessible to all recipients, including those with special needs.
[ ] Did You Use Standard Fonts?
No one enjoys squinting to read a tiny font, and even non-designers know how distracting it can be to try reading something printed in a font like Comic Sans or Impact. Help your readers more quickly and easily access your email's valuable information by using a standard, universally-supported font that is at least 10 pixels, 10 points, or size "2". Examples of fonts that are universally supported are Arial, Times New Roman, Verdana and Tahoma.
[ ] Did You Employ Appropriate Graphics and Buttons?
Images and buttons are an excellent way to add visual interest to your email, to break up or offset blocks of text, and to draw reader's attention to a specific area. Using graphics and buttons are an effective way of highlighting your email's call to action and compelling people to take action. Ensure that your graphics enhance your email rather than detract from it, and ensure that your call to action is the graphic that most gets your attention.
[ ] Did You Use Image ALT Tags?
Two-thirds of respondents in MarketingSherpa's 2009 report have their email images turned off by default. That means that all of the hard work you've put into the design of your HTML email may not ever be seen by email recipients. Email that arrives with blocked images oftentimes looks like a puzzle full of blank boxes with red Xs in the corners. Using ALT tags can help your email content better communicate with those whose images are blocked.
An ALT tag is a written out "ALTernative" to what is depicted in the image. Make use of ALT tags to describe your offers, and to spell out your call to action. If your large email image shows several cozy winter sweaters on sale, ALT tag text of “Cozy winter sweaters - in wool, angora and cashmere - are available in a variety of colors from $19.99!” may just be enough to entice the recipient to turn images "on" or click through to the Web version of the email.
[ ] Did You Include Plenty of Links?
Another method to increase your email open and clickthrough rates is by increasing the number of links within the email content. Why? Apparently a higher number of text, image, and navigation links appeals to the consumer because it signals to them that there are more ideas and actions available in the email.
When adding links, one best practice worth mentioning is to ensure that your links are embedded in your email, like this, rather than typing them out as full URLs. Typing out the URL itself as display text can put your email at risk of being tagged as a phishing attempt.
Checklist Three: The Pitfalls
[ ] Did You Avoid Using Scripts?
In Web design, scripts can save time and coding, but don't make the mistake of reusing your Web scripts in your email designs. Email systems don't like scripts and will either remove them from messages or reject messages altogether if scripts are detected. Commonly used scripts to avoid using in email marketing include JavaScript and VBScript.
[ ] Did You Avoid Including Forms?
If you're looking for a great way to create a slew of usability and email deliverability problems, insist on using forms in your email marketing! Forms have a well-earned reputation for creating issues in email campaigns. Thankfully, resolving the form issue is easy; simply drive readers to a form that is hosted on your website or a particular landing page instead.
[ ] Did you Forego Flash Elements?
The Flash demo on your site's home page has received rave reviews from the sales department and from customers, and your marketing team would love to premier your new Flash demo in your upcoming e-newsletter. Don't do it! Flash elements are not supported in the most common email clients. If you need to show subscribers your new Flash demo, link to the appropriate page on your website.
[ ] Did You Avoid Using Cascading Style Sheets?
Many graphic designers make use of Cascading Style Sheets (CSS) to help speed the development of Web pages, and some graphic designers actually use CSS to help design HTML email marketing. The latter is a practice that we do not recommend, as email clients don't have a standard way of rendering CSS and, as a result, messages using CSS may end up looking radically different than you intended.
The Bottom Line
Designing an attractive email is only the beginning of a successful email campaign. Designers and marketers must also consider readability, usability, accessibility and deliverability concerns in order to ensure that the message you send subscribers is the message they receive. By getting a good grasp on the basics, following industry best practices, and avoiding common email design pitfalls, your subscribers will be happier and your email marketing campaigns will be poised for greater success.
###
Related Resources:
|
