144.8 billion emails are written everyday, many of which go straight to the trash for one reason or another – an unfamiliar sender, spammy subject, habit…we know the drill.
And while it is the subject of the email that largely determines if it will be opened, it is the designer’s magic that has to captivate the reader once they’ve opened the email. If the copy is enticing and the design comforting, they might just hover over that big, beautiful call to action and click (or tap). #success
Ahead is a basic guide to email design best practices, aimed at those of you who might otherwise stare into the empty pixeled abyss for too long.
1. Ins and Outs of Inboxes
To start, consider your audience and identify the top email clients on desktop, tablet and smart phones. Focus on designing for the top 3-5 for each form factor.
Did you know that mobile now accounts for the majority of email opens, with a 51% share? To get an idea of the email client market share, Litmus has calculated 323 million opens in February 2014.
For a breakdown of the CSS support for all popular mobile, web and desktop emails clients, refer this handy matrix:
Email copy should be in its final stages before you begin wireframing, as it’s necessary to consider a headline, body copy and Call to Action (CTA) while determining layout and imagery.
Copy Review Checklist:
- An attractive subject line. Keep it short and snappy. Avoid ALL CAPS, color, or excessive punctuation!!! Avoid words that express spam-like content (Free, Money Back Offer, Guarantee, Clearance, Subscribe, Win, etc.)
- CTA: Relevant. Actionable. Forceful. Targeted. Your audience is likely scanning the majority of the email, so avoid vague CTAs such as “Click here” or “Confirm”. Instead, directly tell the recipient what to do and what to expect, for instance, “Confirm your email address”.
- Short & Concise: When it comes to copy, less is more, as long as you have covered the most important details. If there is a lot to cover, bulleted lists allow your readers to scan quickly and take action if needed.
- Left-aligned text. Likely due to western reading patterns, eye-tracking research suggests that users’ attention is focused on the left side of email content. Secondly, some operating systems, like android, will not scale content to fit the screen, displaying only the left half of an email. Lastly, ergonomically speaking, users find it easiest to interact with elements in the bottom left/middle of their mobile screen.
3. Responsive? Adaptive?
Users expect a consistent experience across form factors, and since email content is typically lightweight, responsive is the way to go. Using one set of code streamlines and simplifies development.
That said, avoid rasterizing text within banners or critical links. We all know images often fail to load, which means the message fails, too. In responsive solutions, text will need to resize for varying devices and form factors. Your safe bet: place text over solid color to ensure proportionate scaling. Standard responsive breakpoints are 320px, 480px, and 640px.
4. Grid + Wireframe = Love
If you’re new to email design, sketch possible layouts before diving into Photoshop* or Illustrator. It’s best to share wireframes with your developers first, as they may request adjustments for optimal coding and rendering. Consider layouts for both mobile and desktop designs, then, if time allows, create responsive html prototype templates.
Remember to keep it simple. The more complex your email design, the more likely is it to fail on one of the popular clients with poor standards support. If you’re not responsible for coding your design, it’s still helpful to be familiar with the process.
*I use Photoshop since graphics are pixel based and our developers seem most comfortable working within this format. It’s nice to ask beforehand.
5. Friendly Layouts & Design Elements
It’s often easy to forget the intention or purpose of your design and focus instead on what looks best. Below are a few simple guidelines to reference while formatting to make sure your email meets usability standards.
First Comes Mobile:
- Single Column Grid: 320-500px. Keep important information within the upper portion of the email.
- Body Copy: 13-16 pixel height. Keep this in mind while styling text as anything smaller will resize automatically and disrupt your careful formatting. This size also ensures readability for small screen sizes.
- Large Links & Buttons:44 by 44px. Don’t punish fat fingers. Apple’s iOS Human Interface Guidelines recommend this as the minimum ‘tappable’ area.
- Images:< 20KBeach. Loading large images eats up mobile data.
- Overall size:< 100K. Gmail, for instance, will load up to 102K, then cut off the remaining content with a few variations, depending on the device.
Then Comes Desktop
- Ideal width: 600-650px – No one likes a horizontal scrolling email. Also, most email clients are optimized to viewing emails of this width.
6. Mind Your Manners
Proper Photoshop etiquette is the key to happy coders and efficiency. You’d pick up the dirty laundry before inviting company over, right? The do’s and do not’s of Photoshop:
7. Be Inspired
Now that you’ve got a handle on best practices, it’s time to get the creative ball rolling. I like to start the process by browsing other well-designed solutions.