Best Practices for Email Design

1. Use a Catchy Subject Line

Keep your subject line short and catchy, personalized, and creative. Try using emojis to draw users' attention, and encourage them to open your email. E.g. Hey Brenda, you will love these Dresses selected for you!  

2. Keep It Simple

Make your mailer design easy to read for every user. Aim for content that can be quickly read by the average eighth grader, but avoid talking down to your audience.

3. Use Single-Column Design

A single column design is sufficient for most emails and will help the design look good on mobile devices as well. It is also easier for your readers to scan a single column of material.

4. Every Email Client is Different

When designing an email, keep in mind that it is going to be very difficult to achieve pixel perfection on every single client (outlook, gmail, etc). Instead, try to create an email that maintains your branding while being easy to read (and click) on all email clients.

5. Avoid Sloppy HTML

Avoid coding sloppy HTML, usually from converting a Microsoft Word file to HTML. If you usually work in Microsoft Word to create your email copy and want to flow it right into your layouts, we recommend that you either create your email marketing text in NotePad or save your work in text-only format in Word or a no-frills word processing software.

6. Use Tables When Possible

While it may seem like you are coding in the dark ages of the internet, tables are the most reliable way to achieve a consistent layout. With tables, you can take advantage of the align attribute, which was the predecessor of modern CSS floats.

However, watch out for empty <td></td> tags, as some email clients do not handle these as you would expect.

7. Avoid sending image-only emails

Sending an image-only email may seem like a good idea. However, image-only emails tend to set off spam filters, regardless of where they link to or who sends them. The reason being is that email service providers use text, ultimately, to figure out what is inside the emails that arrive.

For larger images, you can slice the image into multiple parts.

Also, avoid using too many images.

8. Image:Text Ratio

Strive for a 60:40 text-to-image ratio. 

9. Avoid Background Images

Avoid background images layered behind text, as many the email clients (such as Outlook) do not support background images.

10. Use Absolute Addresses for Images

You may be using local image references for your testing, but when you do your final send, absolute image references are a must!

11. Image Size

Header graphics should be between 600-700 pixels wide with a proportional height (a general guideline is 100-200 pixels). For images within your mailer's content, we recommend 480x480 pixels or smaller. Your image file size (weight) must be under the max recommended email size of 100 KB.

12. Add Alt Text to Images and Buttons

Alt text is not just for images on your website. Adding them to your emails helps users understand what they are reading, in case the HTML does not render it properly or their email client blocks images by default.

13. Avoid Scripts

Videos, Flash, Action Script, DHTML, JavaScript, Animated gifs and all that other fancy stuff is not going to work. Most anti-virus software blocks them from working inside email apps.

14. Avoid adding comments

While designing responsive email, many HTML developers add comments in the HTML code. Avoid adding such comments.

15. Use inline CSS

Webmail apps render differently from desktop apps. Mainly, webmail apps restrict CSS more to keep your code from interfering with their operation. Inline CSS is the only reliable way to stylize HTML emails.

16. Not more than one scroll

Most email apps use some form of preview pane. In general, you have 700px as width (and lots of height) of your email. Avoid designing emails which are bigger than one scroll.

17. Limit your CTA's

Where possible, limit your CTAs. Try to keep it to one main CTA and place it above the fold. Avoid adding CTA’s directly to the email content. Use images, text or buttons to add a CTA.

18. Encode Special Characters

Every email service provider (ESP) uses a different kind of encoding. So if it is different from the kind you selected for your email, it may cause your special characters (like ©) to appear incorrectly, often as a black square or a diamond. To avoid this problem, use a character encoder.

19. Spammy phrases

Avoid using spammy phrases, like “Click here!” or “Once in a lifetime opportunity!”

20. Avoid using block letters

AVOID USING ALL CAPS, WHICH IS LIKE SCREAMING AT THE TOP OF YOUR LUNGS VIA EMAIL (especially in the subject line).

21. Personalize your email

Personalize your email and use emotion to make it more appealing. This also helps build trust with the consumer. Emails with personalized subject lines are 26% more likely to be opened. Go beyond just using your subscriber’s name in the subject line and use other data you have to fuel super relevant messages.

22. Preheader

Preheaders add valuable context to your subject line and can help your open rate. Keep it short (between 40-70 characters) and to the point. Use this space to help your customer know why the email is useful to them. Your subject line and preheader text should work together.

23. Do not forget to add an unsubscribe link!

You do not want to email people who are not interested in reading your emails. It is also illegal to omit an unsubscribe link from a commercial email.

The unsubscribe link usually appears in or below the footer. If you want to go for extra credit, set up a preference center, which allows subscribers to select what types of emails they receive or how often they receive them. This can help reduce the number of unsubscribes.

24. Keep email file size under 100KB

There are a couple good reasons to keep your email under 100KB. First, it will pass through more spam filters by staying light. Keeping your email under 102 kb will also prevent Gmail from “clipping” your email.

To keep your email under the limit, consider removing redundant or unused styles, moving some of the content of the email to a landing page or removing any unnecessary characters from your code.

25. Proof and then proof again

Pay close attention when you proof your final direct mail design before you send it off. Look at the overall effect of the layout, images and typography that have been used. These elements can be very powerful when used effectively. The right choices will help you pull the consumer through your email to the very end and help prime them to respond in the desired way as well.