If you are new to email design, but have years of design experience working in print, web or other mediums, know this: email is a little different.
There are layout nuances, there are legal requirements, and there are archaic technical requirements that may have you feeling that email design is impeding your creative prowess. Sorry.
To avoid frustration and develop a successful email experience, you must know the rules. The following tips should help.
Email Image Tips for Designers
1. Avoid Image-Only Emails
I see these way too often. Email does not equate to an electronic flyer. Use a mix of text and images to create a layout that is not too image heavy. The utilization of graphics is crucial to conveying a beautiful message, but large image file sizes (100KB+) can thwart a message’s ability to get delivered.
2. Use the ALT Tag for Images
Because images will not automatically render in every email client, it’s important to use ALT text for every image file used in your design. The sample below shows how using ALT text ensures the recipient does not miss much when images are disabled.
3. Gradient Backgrounds Are a No-No
As a general rule, I advise against the use of gradient or textured background images, simply because the won’t show automatically in every client. Solid backgrounds are used for a reason.
4. White Space Helps
Too many elements jumbled together can make email difficult to read, especially on mobile devices. Use white space to your advantage to provide a clear distinction between primary and supporting elements in a message.
5. GIFs Are Cool
Animated GIFs and cinemagraphs can add a compelling and eye-catching note to your email designs. Consider using them where it makes sense. Here is some extra info, samples, and data on email client support of animated GIFs. Want to see an interesting example? Check out the Netflix email linked below:
Email Text and Font Tips
6. Limit Text All Over
Please know that no matter how important your email message is, no one really wants to read anything. I’ll repeat (ironically with more words): no one really wants to read anything. Be concise, pithy, and get to the point. When it comes to reading email, we all have extreme case of attention deficit disorder.
7. If You Are Presenting Text, Do So with Text
Try not to use images for headlines or other text within an email if you can help it. As noted previously, images will not be enabled every time, so ensure the most important verbiage is visible immediately.
In the example below, I have shown an email that consists of one large image (not recommended) on the left. The marked up version on the right shows elements that should be converted to text, as noted with highlights and red arrows.
8. Size Still Matters
The size and spacing of your font is very important to readability. I recommend no less than 14pt font on text that I want read, and you should consider boosting that to 16pt for mobile clients.
9. Not All Fonts Are Supported
Have a fancy font you would like to use? There is a chance it just won’t work. Check out this resource complete with font services that are supported in email. As a general rule, provide alternative font styles (e.g. serif or sans serif generalities) in your code.
10. Linked Text Should Be Obvious
You may have one or many calls to action within your email message. Just make sure the recipient knows exactly what to do and where to click/tap. Linking text should be indisputably evident.
For those who understand code, include color and text decoration style attributes within the anchor to ensure your links look exactly the way you want them in every email client.
More Email Coding Tips
11. Tables
Modern web designers cringe at the sight of them, but HTML development with tables is a must for email. Here is an outstanding synopsis of why tables are important with some refresher code.
12. Including Bulleted Lists? Use a Table
When providing a bulleted list with a <ul> and <li> combination, formatting will likely get thrown out the window. Traditional means of coding bullets and numbers lists don’t work consistently. Instead use a table in which one table cell is a bullet and an adjacent table cell is your text.
13. Avoid Space Between Images
Many times email clients can just arbitrarily add space between two images when there should be none. Employ a display: block; attribute to eliminate any extra space. Like most HTML code in email, this must be added inline. Here is a helpful list of other image spacing code fixes.
14. Design for Mobile
Most email clients recognize media queries, which help adjust and contort email creative and content for smaller screens. Email content can be wrapped, scaled, centered, hidden, etc. by using media queries. If you are interested in how to best utilize this technique, read this post about how I used media queries for a client.
15. Bulletproof Buttons
Call to action buttons really stand out in email. I use them all the time because they work. Use this resource to create your own buttons. This tool will create a snippet of code that will show a button in every email client whether images are enabled or not. Fashion your button however you like, add a link and cut/paste the code.
Miscellaneous Email Design Best Practices
16. Always Use a Preheader
The preheader, or descriptive line of text at the very top of the email design, actually acts as a second subject line as it will commonly appear in the inbox (see below). Ensure that your preheader text compliments but does not replicate your subject line.
17. Provide a Web Version
Include a link for a web-based version of your email as a general rule. This will allow recipients to view the email in a browser, which can be preferred to restrictive email client layouts.
18. Don’t Hide Your Unsubscribe
The unsubscribe link is your friend. Allow people to successfully opt out. That may seem counterintuitive, but unsubscribes are much more preferred than SPAM complaints or Junk Inbox placement. I place my unsubscribe link in the header of The Email Email for this reason. See below.
19. Include the Legal Requirements
Your physical address must be included within your email as well. It’s not a bad practice to provide a statement that reminds recipients why they are receiving email or how they signed up originally. This is usually placed in the footer. You may also choose to include copyright information in this area as well.
20. Perform Testing
Use a service like Litmus, Email on Acid, or Targeted.io to perform email client testing. These services will allow you to see what your email looks like in every email client prior to sending.
Thank you for this tips, it is truly useful information.