As technology changes, and how people interact with online content changes, so do best practices of email newsletter design. As a designer, it is my job to continue to learn and stay ahead of the curve with what are considered best practices for email newsletter design.
So I thought I’d share with you all, my dear friends, what I have been learning.
As you start laying out your email design, realize you are working in a relatively narrow width of approximately 600 pixels. Your email design can be as tall as you want it to be, but ideally it will not require a lot of scrolling. Readers are busy and are much less likely to read the content at the bottom of the design as they are the top. Therefore, the most important content needs to be at the top (your logo is a great place to start).
Then think about the purpose of your newsletter. What action do you want the reader to take when they open your email? This will help guide you to what kind of layout you use. A single column layout is good for newsletters with minimal content and a single call to action, while a multi-column layout is ideal for newsletters with a lot of content.
Mailchimp suggests that there are three basic types of newsletters: Read Me, Buy Me, and Join Me. The first will rely on good typography, with the goal being that readers keep reading on your website. Consider having just one main story with a large title font, short description, and a large-ish button prompting click throughs. The second relies on a large splash image with little to no type, and the third requires a super obvious call to action and information about the event.
While some clients like Gmail have begun caching the images in your email, thus opening them automatically, most clients still keep images turned off. According to exacttarget.com, 60% of email clients block images by default. This means that you are relying on the typography of your design to convince folks to read more.
Use web safe fonts, include alt text for all of your images, and don’t use external style sheets to style your text.
Assuming potential readers have actually opened your email, they will most likely quickly scan for anything interesting, which means your design needs to be easily scannable. The simplest emails are the easiest to scan, so consider sticking to a main story or call to action with a brief description, a few shorter stories, and links to some of your social media sites. That’s it.
Remember: Keep it simple, stupid.
At this point, every designer should be assuming a “mobile-first” mindset. Your email newsletter design isn’t an exception to this rule. I’ll let MailChimp explain:
When designing mobile email, we try to follow the mantra “one eyeball, one thumb, and arm’s-length.” On a small screen, an email should be easily readable with one eye: any links and calls-to-action usable with one thumb, and any text or visual cues large enough so that all of the above can be done comfortably at arm’s length.
Guidelines for achieving these objectives: Minimum font size of 16px—Apple recommends 17-22px, Google recommends 18-22px. (We’ve found 16px Georgia to be nice and readable.) Call-to-action touch targets, such as buttons, should be at least 46px squared (Apple recommends 44px squared, Google recommends 48px squared—we’re splitting the difference). Avoid clustering several links together in your copy. It makes individual links very difficult to access.
As you’ve probably figured out by now, testing your design in multiple clients is critical because of the rendering variations across clients. By repeatedly testing, you’ll make sure that your design is functioning as it should, ensuring people actually read your email and increasing click-throughs. Here is a handy email client CSS support guide by campaignmonitor.com to help you with your testing and debugging.
Do you have an email you want to put together, but want a little design help? Contact us and we’ll help you craft the perfect email.