Design Inspiration

Quick Guide: Our Top 9 Email Design Best Practices

Quick Guide: Our Top 9 Email Design Best Practices

Do you read up on email design? How many times does it happen that you quickly read a bunch of blog posts and articles but can’t find to remember where a best practices was explained? It happens to us as well! That’s why we’ve compiled our list of top 9 email design best practices for you to have as a quick guide. So, next time that you press the “send” button on your next email campaign be sure to keep in mind these tips!

1. Make mobile a priority.

We say this a lot around here, but up to 70% of email opens now occur on mobile screens. That means responsive email design is no longer a “nice to have” feature—it’s a necessity. The good news is that many email editors allow you to build a fully responsive mobile email without needing to know how to code (the BEE editor is one of them). Email editors like BEE automatically add CSS media queries and other code to make the email responsive across the most popular email clients.

weblow-compare

Desktop and mobile versions of Webflow’s well-designed responsive email.

In addition to using a responsive editor, you can optimize your messages for small screens by implementing these design best practices:

  • Minimalistic design (no complex headers, extra calls-to-action, or clutter)
  • Single column layout
  • Large-sized, easy-to-view content
  • Tap-friendly links and bulletproof buttons
  • Smaller image file sizes (allowing for quicker load times)
  • High-contrast design for mobile screens set to low brightness
  • At balance of images and plain text (and all images used have great ALT text)

2. Format text to improve readability.

If you send newsletters, letter-based messages, or other text-heavy emails to subscribers, you’ll want to have a consistent, balanced approach to formatting text. As you build your email, make sure to:

  1. Stick to one or two email-safe fonts. Arial, Georgia, and Helvetica are popular email-safe fonts that are reliable, classic, and easy to read. Once you’ve established your font, create structure and improve readability with styling (bold, caps, size, color, and spacing).
  2. Include headers that break up sections of content. Headers establish structure. Generally speaking, using a font size that’s two to three times the size of your body text will visually make your email easy to scan and will make it obvious to readers when a new section begins.
  3. Use short paragraphs and bullets. Make your email content scannable by giving readers bite-sized nuggets of information. No long paragraphs.
  4. Don’t over-format. It can be tempting to bold, italicize, underline, play with color, and more, but resist. A minimalistic approach to body copy is the best for readability.
Screen Shot 2015-11-09 at 2.30.06 PM

The Skimm uses font sizes and bold styling to create structure in this snapshot from one of their daily newsletters.

3. Don’t underestimate color.

In email, color can be used to call attention to content, to reinforce your brand identity, to improve organization, and more. Background colors are one of our favorite ways to organize content in email. HTML background colors are a great tool because they render across all inboxes (unlike images), they take up less than one line of code, and they’re easy to implement. By assigning different background colors to modules of your email, you organize content and provide a seamless reading experience for subscribers.

Looking for other creative uses of color in email? Try these, and read more in our post 10 Creative Ways to Use Color in Email:

  • As labels. Organize long emails with color tabs.
  • To match photos. Grab attention with a monochromatic color scheme.
  • To divide content. Use colorful lines and background colors to get organized.
  • In a photo collage. Break up images with blocks of color.
  • With text. Use a high-contrast color other than black, like blue or gray.
  • For links. Step away from boring blue and brand your links.
  • In CTA buttons. Make sure they stand out more than anything else in your message.
  • For HTML backgrounds for ads. Improve transparency and make sure ads stand out from other content.
Screen Shot 2016-02-11 at 1.41.56 PM

Refinery29 uses color tabs to organize content in this portion of a recent newsletter.

4. Avoid image-based CTA buttons.

All effective marketing emails have a call to action, whether it’s to sign up for an event, download a white paper, snag a discount on a product, or share content. Whatever it is, it’s the driving force behind the entire email campaign, so it’s critical your CTAs stand out. The best way to optimize calls-to-action to be seen and clicked is to make them buttons.

CTA buttons in email are generally designed one of two ways: with HTML code or with an image. Your buttons should always be written in HTML. The problem with image buttons is that you have much less control of how the image looks across devices—and you can’t be sure it will show up at all.

Buttons written in HTML—also known as bulletproof buttons—will always render across all inboxes. You can either turn a standard CTA button bulletproof by adding a few lines of HTML code or check that the email editor that you’re using generates bulletproof buttons (and that those buttons are not simply images).

Button-building best practices:

  • Write action-oriented, personal, compelling, and unique copy for your button
  • Keep copy direct and clear, making sure readers know exactly why they’re tapping
  • Check that your button visually pops out and can be easily and quickly found
  • Use a color that contrasts from the background of your email (and copy color that contrasts from the button color)
  • Keep the style simple: avoid gradients and multiple colors
  • Place your button in an easy-to-find spot that fits organically in the story of your email (probably below the fold)
Screen Shot 2015-11-16 at 3.18.41 PM

Tastebook’s CTA button is easy to spot and tap, and it’s a brand color that contrasts against the white background.

5. Make sure your message can be read with image-viewing turned off.

It’s tempting to build your email as one big image or as a series of images, but doing so means you’ll risk encountering a number of inbox and mobile rendering issues. For one thing, up to 43% of Gmail users read emails with image-viewing turned off. That means if you’ve sent an email that’s just a single image, all readers will see is the ALT text you’ve provided. Make sure you optimize it. Better yet, skip the image-only email and follow these design best practices:

  • Don’t rely on images to be the only visually interesting part of your email. Clean, simple design is in. Capitalize on that by using flat design tactics and bold colors to get the attention of your readers and to create an elegant, interesting email.
  • Have at least 500 characters of text. Email on Acid has diligently researched and concluded that you need at least 500 characters of text in your email to pass spam filters. Create a balance in your email by breaking up images with plain text.
  • Bulletproof your buttons. Using HTML instead of an image ensures your call-to-action buttons look great on all devices and always render.
aveda

A side-by-side view of an email from Aveda: on the left, image-viewing is turned off, revealing that most of the message is comprised solely of images.

6. Be selective with social media buttons.

Social media buttons are secondary calls to action that invite readers to follow your social accounts or to share your content on social media. But because they aren’t usually as important of your email’s central call to action, social media buttons shouldn’t compete with your main content. That’s why they’re typically placed in the header or footer. If they need to be included in the body of your email, along with each featured story, choose no more than two sharing options (e.g., only Twitter and Facebook). Otherwise, with too many options, readers are more likely to take no action.

Here are our social media button best practices:

  • Social media buttons in email are usually secondary calls to action. Wherever you place them, social media buttons shouldn’t compete with your main content. Try the header or footer.
  • Choose a shape, size, color, and customization that suits your brand and fits with the look of your email. Make sure the buttons are easily tapped on mobile by including ample white space around buttons.
  • Decide which buttons to include based on the nature of your content and audience. Don’t overload readers with too many options.
miccheck

Mic includes two social media buttons in its header and two accompanying each story.

7. Incorporate dynamic content.

Visual storytelling in email is getting increasingly sophisticated and effective, and animated GIFs are a huge part of that. GIFs communicate quickly, breaking down complicated concepts into a few frames of fluid messaging. To maximize their effect, use them wisely and intentionally with these guidelines:

  • Make sure your GIF serves a purpose in the story you want to tell. Ask yourself if it serves to improve readers’ understanding of your message.
  • Position GIFs to lead viewers’ eyes directly to your call-to-action. Show them where to click or tap.
  • Remember GIFs are image files: link them to your website and always use ALT text.
  • Communicate your message in the first frame. There’s no guarantee your GIF will animate for all subscribers. Make sure the first frame is just as effective as the whole animation.
  • Don’t send out a huge file size. An enormous GIF may not load or can eat up mobile user’s data.

Like animated GIFs, countdown timers are an incredible way to call attention to special emails when it’s time to compel readers to act. Pack a punch with your timer by positioning it at the top of your email, giving it room to breathe with some padding, pairing it with a CTA button, and choosing a look and feel that aligns with your email and brand. Read our post on how to include a free countdown timer in email.

skillcrush

Skillcrush uses a dynamic countdown timer to urge readers to sign up for a workshop with less than 24 hours left to register.

8. Optimize your footer (and be sure to include required content).

Even though they come last, email footers shouldn’t be overlooked. They contain important information; they’re often where readers go to find details about your brand, what else they can get from you, and where they can find you online.

If you’re sending commercial emails (i.e., messages that sell or promote a product or a service), these pieces of information are typically required by anti-spam laws such as the CAN-SPAM Act of the USA, Canada’s Anti-Spam Legislation (CASL), and many others:

  • A link to unsubscribe
  • A link back to your site
  • Your mailing address
  • Contact email address

Footers can quickly become crowded with buttons, icons, links, and fine print. Before stuffing your footer with information, first evaluate what makes the most sense to include, and go with a minimalistic approach. Overwhelming readers with too much information can lead them to skip over the footer altogether. The simpler the footer, the more likely it is to be useful to readers.

Screen Shot 2016-01-22 at 7.42.37 AM

This footer from Medium is simple and well-organized.

9. Don’t get clipped.

Message clipping is especially common for Gmail users, where HTML emails larger than 102 KB get trimmed. The Gmail app for iOS clips messages larger than 20 KB. This can cause an inconvenient roadblock for brands with Gmail subscribers, as their email is not fully shown, but rather clipped with a link to view the entire message.

clipclip

Clipping can be prevented in two ways:

  • Optimize and minimize the HTML code. Mobile responsive design adds lines of code and weight to your overall email message size. This is especially true if your email contains inline CSS code which is the only design tactic for responsiveness on the Gmail app for Android.
  • Reduce the amount of content in your email messages. This allows you to optimize your email for mobile while preventing clipping.

Make sure to check out our top 4 tips for preventing clipping.

Our Reader Score:

Total: 0 - Average: 0

Kelly Shetron