Email Design Best Practices: The 10 Golden Rules

0
191

We get a lot of questions around email design. While there are always new tricks to try, there are some tried-and-true best practices that seem to stand the test of time. Use these as the baseline for any email design or template to create engaging messages that perform well across devices and browsers.

1. Identify Yourself

Include your brand name in the From Name field and use a recognizable From Address.

2. Size Matters

  • Keep your Subject Line and Preheader under 65 characters to ensure that it fits no matter what browser, email client or device is used. 
  • The ideal email width is 600px wide to render properly on all devices and browsers. 
  • Keep images crisp but optimize for load time with a resolution of 72 dpi. 

3. Design for Mobile Users

Utilize a grid layout so your email neatly stacks, scales and stays organized on mobile devices.

4. Get More Clicks with The Right Buttons

Use eye-catching, high-contrast CTA (call-to-action) buttons to let subscribers know to click-through for the good stuff.

Try switching-up the words in your buttons. “Shop Now” and “Learn More” can work well, but play around with more creative options to build curiosity and lure users into clicking-through.

Maximize clicks by making your buttons “bulletproof.” This means making them HTML rather than images so they still display when images are turned off in someone’s inbox (which is usually about 50% of the time). Make sure to use a web-safe or Google font.

To get clicks on mobile devices, CTAs should be at least 40px high and wide so users can tap them without frustration.

If you go the image-based-button route, make sure that when it shrinks for mobile devices, it’s still large enough to be legible and tappable.

5. Save Above-The-Scroll Real Estate

Keep the header area of your email clean and clutter-free with a simple logo and preheader. Most inboxes support up to 90 characters of preheader text, which is what you see after the subject line in inboxes.

On mobile, shrink the size of your logo and hide the preheader area to let your important promotional content shine.

6. Pare Back The Navigation

Use a short navigation (max. 5 items) so you don’t distract from the most important parts of your email. Also consider (and a/b test) not using a navigation at all – not every email needs one!

Create a secondary “redundant” navigation at the bottom of your email to help with mobile rendering. This way, you can hide the top navigation on mobile and style the bottom navigation so it stacks nicely above the footer.

7. Optimize with HTML Text

HTML text is good for copy-heavy areas to make sure it’s crisp and legible in all inboxes – desktop and mobile (HTML text will scale up and down depending on device width). Keep in mind, the minimum legible font size for most mobile inboxes is 13px.

When including a coupon code, type it out as HTML text so the user can copy and paste it easily, and so it displays when images are turned off in their inbox.

If you have to save copy as an image, send a test to yourself before you hit send to ensure that it’s crisp and legible.

Thoughts from An Email Designer

Typography is quite possibly the most important element in an email’s design, and here’s why: fewer than half of all emails are opened with images turned on. That tells us that incorporating live HTML text into an email design is a necessity in today’s multi-device, multi-browser world. While using alt text can help, leaning on HTML text is the most bulletproof way to deliver your important message to as many people as possible.

Unlike the olden days of email design, we’re no longer tied to simple fonts like Arial and Times as our only HTML text choices. We can now play with custom fonts and other web-safe choices to enhance our designs and stay brand-appropriate. This is great news for any email designer who wants to enhance the style of their emails while keeping user experience in mind.

8. Fonts Everywhere

The first rule of HTML text: every inbox will render fonts differently. In our technologically changing world, this is just something we designers have to get used to. But there are ways to make sure every recipient receives the best email possible, even if a custom font doesn’t render exactly as you’d hoped.

Web-Safe Fonts

There are a variety of stylish, user-friendly, web-safe fonts. Fonts that come preloaded on most computers render consistently over 90% of the time. Others have less wide support but still have their advantages and can be used in a font stack as long as you have a more supported font as a backup.

Sans-Serif Fonts

71%+ Renderability: Very Consistent Support

  • Arial
  • Arial Black
  • Tahoma
  • Trebuchet MS
  • Verdana

1%-70% Renderability: Average Support

  • Candara
  • Century Gothic
  • Gill Sans
  • Lucida
  • Lucida Sans

Serif Fonts

71%+ Renderability: Very Consistent Support

  • Courier
  • Courier New
  • Georgia
  • Palatino
  • Times New Roman

1%-70% Renderability: Average Support

  • Book Antique
  • Cambria
  • Garamond
  • Lucida Bright
  • Baskerville

Custom Web Fonts

Custom fonts have become extremely popular in contemporary web design. Unfortunately, in the world of email technology, custom fonts should be thought of as an enhancement — not a constant.

How to Make Them Work

We at Listrak make web fonts render using @font-face, @import, or (JavaScript won’t work). If the inbox engine supports at least one of these three methods, there’s a good chance your font will render properly.

HTML Method

If you want to stick with HTML, the method is likely your best option.

CSS Method

If you’re looking to use CSS, we can use @import or @font-face. @import is the cleaner choice but @font-face will give you more control over the font you want to use.

Using @import is a clean method that’s often used to pull styles from a pre-hosted font service (e.g., Google Fonts).

Using @font-face is the best method to pull a font file that’s hosted in a personal location. It also gives you more control over the styling of your fonts.

Choosing Good Fall-Back Fonts

Remember what we said about fonts rendering differently across inboxes?

Inevitably, your custom font isn’t going to render perfectly everywhere, but don’t panic. There are ways to make your design shift subtly and purposefully as it hits less-supportive inboxes.

One great way is to control the fall-back fonts that will display when your custom font does not. Here are two prime examples:

sans-serif: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif
serif: Georgia, Courier, Times New Roman, serif

Yes, the options are somewhat limited, but you can still make deliberate choices that support your optimal font and will help improve your conversion rate. Above all, remember that using HTML text is critical to your email’s success, so it’s worth having to put up with slight changes in styling.

When deciding, consider that some fonts have more space between letters, others have a thicker stroke, and there’s always the serif vs. sans-serif choice. Think about these factors and choose one that won’t vary too much as it displays in less-supportive inboxes.

As an example, here’s how one letter’s styling varies from font to font:

Which Email Clients Support Web Fonts?

Unfortunately, we as email designers don’t have any control over where web fonts are supported, but we do have control over our design decisions when using them.

Currently, the most support lies within the Apple ecosystem: iOS Mail and Apple Mail. The Android native app will also display your custom web font.

The following email clients currently have limited or nonexistent support for custom web fonts:

  • Some major email clients such as Gmail, Outlook.com, and Yahoo! Mail
  • The many versions of the Gmail mobile app
  • Outlook Desktop clients 2007, 2010, 2013 & 2016

9. Background Images

If using a background image, keep it simple. Using a simple grid layout is best, and don’t include complicated graphics that distract from the copy on top.

Since background images won’t display when images are turned off (which is about 43% of the time), don’t include anything important to the goal of your email. Remember to include alt text which provides context if the image is blocked and assign a complimentary back-up background color to display.

10. Keep it Engaging

Even within the restrictions of a grid layout, you can get creative with interactive GIFs, engaging copy and layouts with angles and color blocking to intrigue. Use these elements to guide the reader’s eye to take an action and click through.

Original Source