2. A well-designed email shows off your brand and builds trust and loyalty with your readers.
Traditional email best practices were developed to for desktop users viewing through
Web browsers or email clients. Today, email is increasingly being viewed on mobile devices.
According to Return Path, mobile email open rates increased 34 percent in the second half
of 2011, while desktop opens declined.
When designing for both desktop and mobile devices, and multiple email clients like Aol,
Yahoo, Hotmail, Gmail, Outlook, etc. it’s best to keep your design simple and clean to
render properly and avoid spam filters.
Top 11 email design best practices:
1. 450-500 pixel width for a template to read well on both desktop and mobile devices.
Desktop emails are traditionally 600 pixels wide.
Mobile screens are 240 to 480 pixels wide, depending on landscape or portrait viewing.
iPhones resize your email to fit the screen, and include all your images.
Most other smart phones don’t, and images are blocked by default.
The goal is to make sure the recipient sees your email as intended, with as
much visible as possible, and with little or no scrolling necessary.
2. Limit the number and size of images for faster loading.
Keep image sizes at 20k or less.
The total file size of your email should not exceed 100k.
Do not use Flash, gif animations or video.
Use alt tags for each image. Most email clients block images by default.
3. Place your key text above the fold, within the top 200-250 pixels.
You have 2-3 seconds to get someone’s attention.
And 5-7 seconds to convey your message (Marketing Sherpa)
This prime real estate must communicate your key message and call-to-action.
4. Use both a graphic call-to-action button and text based link.
Keep the text as descriptive as possible, inform the viewer of what to expect next.
5. Use one-line pre-header text to outline the offer. This text is usually 1-2 lines of
html text above the header. Other than the subject line, it’s the first thing prospects
see before opening your email. You can include a mobile friendly url link to a hosted
online version of your email optimized for mobile users, but the goal is to design
something for everyone.
(Continued)
3. Page 2
6. Avoid ‘spam’ trigger words that might trip filters.
Every email passes a filter and the contents (words and phrases) are assessed to
determine if the message is spam. Common spam words “Free,” “risk-free,”
“guaranteed,” “!!!.”
7. Avoid dark backgrounds with white text. The use of darker-colored background
tables will be removed by many email readers, and white text will not be visible if
the colored table is removed.
8. Fonts: Use email safe fonts like Tahoma, Verdana, Georgia or Times New Roman.
Enlarge font sizes: body text 12-14 pixels, headlines around 22 pixels or more.
The color red is a spam trigger and should be avoided.
9. Design your creative for touch. Remember fingers are less accurate than cursors.
Increase the size of links and spacing. Minimum target area is 44 x 44 pixels per
Apple’s Human Interface Guidelines.
10. Program with inline CSS styles and HTML tables. Do not use javascript or lengthy
coding. Avoid paragraph tags. Instead use line break tags (<br /><br />).
11. Subject lines 40-50 characters or less.
Make them engaging and benefit-oriented. 35% open messages based upon what’s
in the subject line (Jupiter Research).
They are key and heavily weighted in spam scoring.
Every email communication should be designed with these tips in mind to help improve
delivery and campaign performance. The ultimate goal is to cast the widest net possible
for recipients to receive and read emails quickly and easily—no matter what device. Once
delivered and read, advance the user through to an effective (mobile-friendly) landing
page that reinforces your offer and brand, and remember to test, refine and test again!