Taking Your Email Design Seriously Pt.2

We collect the best food highlights of the month and share this collection with you. We hope you like our selection of the yummiest treats in town. Enjoy this months selection!

In Part 1, I talked about how consistency while being creative is important to make your emails suck less. In this second installment, I 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 by 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, and let your main content stand out. You can play around with colors and text with colored backgrounds to create a separation between blocks.

UXPinWaymo, 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, especially 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.

HarrysMaude, 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 a purpose

There’s no shortcut to email marketing success. You can’t use the same email design for beauty products and a food brand. Your storytelling will be different and so should your design. If you are selling a single product, your focus should be on that. If you have a huge inventory, your email design and strategy get even trickier. And when you 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

Take advantage of dynamic content especially if you have a huge inventory and a lot of products to sell. They’re great for featuring best sellers and new arrivals. Dynamic content and tags are also great for creating a personalized experience for your users, make sure you don’t get creepy though.

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 keeps 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 keeping it 22 to 24 px for the headlines. Please stop screaming at your customers. Avoid orphans and hyphens in your emails, especially on mobile.

AirbnbCoastal, 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 gray 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. However, it’s important to make sure your images and email size are optimized. Remember, the bigger the email, the longer it will take to load. In the end, 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. Don’t forget, that 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. 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 EmailsMilledPinterest, 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.

  1. Oh this looks yummy I want to eat this bliss ball right now 🙂

  2. Oh this looks yummy I want to eat this bliss ball right now 🙂

  3. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

  4. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

  5. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Curabitur aliquet quam id dui posuere blandit.

    Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

  6. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Curabitur aliquet quam id dui posuere blandit.

    Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

Comments are closed.