In Part 1, I talked about how consistency while being creative is important to make your emails suck less. In this second installment we will talk about fonts, colors and spaces!
Top to Bottom
It’s important for your recipients to know who the email is coming from (not just abide with SPAM rules). Instill brand familiarity by adding a logo or name on your header and your footer.
And don’t forget to include your value-added links at the bottom of your email, along with ways to contact you, social and unsubscribe links and other legal information. Keep your header and footer simple and subtle, let your main content stand out. You can play around with colors and text with colored-backgrounds to create a separation between blocks.
UXPin, Waymo and Wonderbly from Really Good Emails
TLDR
Make use of a table of contents if you have a lot to cover, this is great for newsletters specially for publications. Make your content easy to scan, so recipients do not need to read every word to understand your email and click your CTA.
Harrys, Maude and Goby from Really Good Emails
Use short sentences and paragraphs and separate your content sections with space (more on this below), lines or even images. Keep things short and bring valuable content only. Imagine you’re selling something to Jeff Bezos, does he have enough time for your BS? Focus on your purpose and general idea. Stick to it.
The average length of the emails is around 450 words or 3 min of reading. And the tendency is moving forward into shortening of emails. More than 50% of marketing emails shorter than 300 words.
– Igor Ozherelyev on 5 Things to Know Before Starting an Email Marketing Campaign in 2019
Design for the brand and product, with purpose
There’s no shortcut to email marketing success. You can’t use the same email design for beauty products and food brand. Your storytelling will be different and so should your design be. If you are selling a single product, your focus should be on that. If you have a huge inventory, your email design and strategy gets even trickier. And when have multiple products or categories to display, a navigation menu is your best friend.
Keep your CTA short and meaningful and place it above the fold, repeat it below if necessary, not more than three. And drive your users towards one single action, don’t deviate from your subject or get your SEO punished (also, no one likes that). Use descriptive CTAs and offer value like “Pick a color” instead of simply “Shop now” or “Get your FREE book” instead of “Sign up”.
Backcountry, Davids Tea and eMeals from Really Good Emails
White Space, Colors and Fonts
Enough white space encourages click-through by giving time for the recipient to process and follow your content visually. It also keep things clean. Be consistent with your spacing for your email layout.
Add plenty of white space to your buttons. Make it spread across the width of the email if possible. Add enough white space between your buttons and other blocks.
Keep the standard main body font type for mobile email between 14 to 16 px whereas keep it 22 to 24 px for the headlines. Please stop screaming at your customers. Avoid orphans and hyphenation in your emails, specially on mobile.
Airbnb, Coastal and Youtube from Really Good Emails
It’s better to use only one or two fonts in your email. It’s okay to be fun and daring with your texts, just make sure they are easy to read. Use web fonts wherever you can and make sure you have fallback fonts in place. For fallback fonts, remember to use a “web safe font”. Google Fonts is my go-to resource for web fonts on my emails.
Use only black or grays for your body text. Avoid dark-colored backgrounds for your main content, it’s not always Black Friday. Limit the number of colors you use, don’t use all eight colors from your client’s brand book. Read about The Color Theory and learn the importance of color, font weights and contrasts. Remember that images can bring colors to your email, use it to your advantage.
Size matters
It’s easy to forget about file size in emails but it’s important to make sure your images and email size are optimized. The bigger the email, the longer it will take to load. You don’t want your users to unsubscribe from you just because you used up their cellular data bandwidth.
Also remember that Gmail clips emails that have a message size larger than 102KB, and hides the rest of your content with a link. So always check your file size and clipping. Clipped messages can also violate CAN-SPAM rules because they hide unsubscribe links.
The Last Word
Stop sending your website to my inbox
Move away from the website and create a more human experience with your design and story. No one wants to see your website and entire offering in email form.
Avoid full-blown navigation bars. Make the navigation intuitive using menus in email. Make sure you hide your header navigation on mobile make sure they’re clickable.
Successful artists know copying is a good thing, stay up to date with the latest design trends and be inspired by seeing what others are doing. Check out Really Good Emails, Milled, Pinterest and Dribbble for inspiration. Follow Email Marketing blogs like Litmus‘ and Campaign Monitor‘s to keep yourself and your marketing team informed.
Looking for a Dribbble invite? Comment with a link to your portfolio below.
[…] In this two-part series, we’ll try to cover things that will take your emails to the next level. These are best practices based on our experience multiple years of designing emails. You can read the second part here. […]