Basics of Email Design

10 Best Practices for Email Design: Tips for Developers

0

Email design is a unique practice. For one thing, there are some major differences between web and email development. But there are many other factors that email developers and designers need to consider when creating eye-catching and effective campaigns.

In this article, we’re going to cover some standard advice and best practices for email design. We’ll also answer the most common questions about email layout and explain why some things work and others don’t.

But first, allow us to set things up with a short history lesson…

A brief history of email

history of email clients

Before we dive into email design best practices for developers, let’s roll back to the dark ages of email history.

Email was born in the very early days of the internet. Industry players were in a big rush to capture as many email users as possible, with little interest in cooperating to build compatible or standardized email clients and rendering engines.

That’s why email coding is still one of the trickiest things you can do with Hypertext Markup Language (HTML). The email clients we use today have very different email rendering engines from one another, and standardization is very slow.

Thankfully, a new group called the Email Markup Consortium is looking to change that once and for all. Find out more about the EMC’s plans for standardization.

10 questions about email design best practices

Okay, email standardization is a pain at the moment, and it’s hard to code a one-size-fits-all HTML email solution. That said, here are 10 common questions and the best practices we recommend for email design:

  1. What’s the right pixel (px) width for emails?
  2. Should I use videos in emails?? 
  3. Can I use any font I want?? 
  4. Should I use background images?
  5. Why should I create responsive email designs?
  6. Should I use emojis?
  7. What’s the best way to use a CTA button?
  8. How can I add personalization to my email?
  9. Do I even need to send fancy HTML emails?.
  10. Should I A/B test my emails?

Let’s go over each of these below.

1. What’s the best size for emails?

If you’ve been around email for any amount of time, you’ve probably heard about the 600 px email width. Now, is that myth or reality? This one is tricky: it’s a bit of both.

Due to smaller screen sizes back in the early days of HTML emails, 600 px became the most common email width.

Screen resolution chart
Image source: nngroup.com

But do you still need to use 600 px email width these days?

Although screen sizes have increased a lot since then, a couple of email clients, like Yahoo Mail and Outlook, might have problems with wide emails.

Most Microsoft Outlook users use the 3-column view. This covers most of the screen by the first two columns, and less than 50% of the screen remains for email viewing.

three column outlook inbox screenshot

In Yahoo Mail, users use a similar 3-column view too. On top of that, they have displayed banner ads on the right side of the screen, which takes up extra space.

We conducted a series of email rendering tests to determine how different email widths behave in Yahoo and Outlook.

Let’s take a look below at an email template with a 750 px width from Econsultancy.com in Yahoo Mail.

yahoo mail inbox screenshot with three columns

You can see that the right side of the email is cut off on the most common 1366×768 px resolution. The email would be cut off in Outlook even if the viewing screen size is the same.

Based on our tests, the maximum email width that can fit onto the screen in Outlook and Yahoo is roughly 650 px. So, if a significant number of your subscribers use these email clients, we recommend that you stay below 650 px or simply use the most common 600 px width.

2. Should I use videos in emails?

Most email clients don’t support embedded video in emails – only some email clients, such as Apple Mail or iOS, support embedded HTML5 video.

Instead of using videos, we suggest using animated GIFs. With animated GIFs, you can almost achieve the same effect as a video. They work in most email clients but won’t play in Outlook 2007-2013. There, the GIF will only show up as the first frame of the animation. Check out some creative animated GIF examples that we like.

starbucks cups animated toast

3. Can I use any font I want?

Email designers and marketers probably ask you for special fonts all the time. We don’t blame them: web-safe fonts like Arial or Times New Roman are pretty boring. However, font support beyond these “web-safe fonts” is not standardized across email clients.

One solution is to use web fonts that are hosted on a server, like Google fonts. You can use these web fonts with the CSS tags @font-face or @import. With some email clients, you can also use the <link> method. Learn more about using web fonts and how to use font stacks to build in backup options in case your chosen font fails.

4. Should I use background images?

Some email clients, particularly the desktop versions of Outlook, will automatically disable images in your email campaigns. That could be especially problematic for background images. For example, if you use light text on a dark background image, the email copy could be unreadable if the background image doesn’t load (leaving a blank/white background).

Try to avoid background image use and create designs where text and images are well separated. Instead, you can create a bulletproof background by using CSS and HTML to replicate the look of a background image.

In addition to using a bulletproof background, always make sure that you have a failover background color so that your email messages will display even if your background doesn’t.

Bulletproof background example
Bulletproof background
Bulletproof background with images blocked
Blue fallback background color with images turned off

5. Why should I make my emails responsive?

As of 2019, 60% of all email opens were on mobile devices. Responsive email design, or the practice of making emails optimized for different screen sizes, is an important part of email UX. Reach your target audience by making sure your subscribers can read your messages on any device.

Not sure where to start? Check out our responsive HTML email design tutorial.   

6. Should I use emojis?

To emoji or not to emoji – that is the question! We don’t have a firm line on this one. After all, emoji support differs dramatically across different clients. Instead, we can suggest that you look into whether there is broad emoji support across your subscriber base and follow our best practices for using emojis.

7. What’s the best way to add a CTA button?

We recommend using a bulletproof button to add a Call-to-Action (CTA) or other clickable buttons. Like bulletproof backgrounds, bulletproof buttons rely on CSS and HTML to render buttons. This makes these buttons much more reliable across different email clients than an image-based button. Image-based buttons can make your click-through rates and ROI suffer. After all, you can’t have conversions if your subscribers can’t click on your button because of an email client rendering issue.

Plus, if a subscriber is using an email client that has images turned off, your CTA button will disappear. And that’s a pretty important element to lose. 

8. How can I add personalization with email design?

When you think about personalization, the first thing that comes to mind is simply using a subscriber’s name in the subject line or email copy. But you can also use email design to personalize the inbox experience.

For example, if you use a segmented list for your email marketing, you can tweak your email design for those segments’ tastes and preferences. 

Dynamic content is an even more advanced way to personalize email design. t It features email content that changes depending on your subscriber data or their behavior. That could include their location, the time of day that they open the email, or even the weather where they live.  

One way to do this is by using variable mapping in your HTML email template. You can use the customer data in your databases, like names or purchase patterns, and map these onto variables in an HTML email template.

If that sounds a little too technical for you, no worries. There are some great solutions that can help with adding dynamic content to emails. They include NiftyImages, Movable Ink, and Zembula.

9. Do I even need to send fancy HTML emails at all?

There are some use cases when minimalistic, plaintext emails work better than design-heavy ones. For example, B2B (cold) emails and transactional emails are often mostly simplistic in their design.

If your email is text-heavy and you truly want to focus on the power of words, it’s quite likely that you don’t need a very fancy email design at all. In these cases, you might consider using a lightweight HTML email template that looks almost like a plain-text email. You can focus your image-use on the basics:

  • Your logo: Show off that the given email belongs to your brand. This is an excellent opportunity to showcase your company name.
  • Images of your products or services: Could you imagine a pure text email from Bestbuy? Most people expect to receive image-heavy, visually appealing, stylish emails with nice pictures from businesses.
  • Social media icons: Promote your other online communication channels to your email subscribers.

Before you start designing your first email template, check out the kind of emails that your competitors send to help yours stand out from the crowd and find your own voice to be successful in the fierce competition today.

10. Should I A/B test my emails?

Yes. Take advantage of the data you get from your email campaigns to create better email designs for future campaigns. Use A/B testing to try out different designs amongst subsets of your subscribers and see which one works better. Take this into consideration and iterate on it for future email campaigns.

Wrapping up

With these 10 tips and tricks, we hope we’ve helped you avoid some major pitfalls. Not sure how your email will look? Preview how your email will appear on different email clients in seconds with Email on Acid’s testing tool.

This article was updated on July 26, 2022. It was first published in March of 2017.

Even Great Emails Need to Be Tested

It’s true: Even well-designed emails can break from time to time. That’s why email testing is an important part of sending a successful campaign. Email on Acid tests your email code quickly and accurately, allowing you to preview your design across dozens of the most popular email clients and devices. Try us free and start delivering email perfection!

Check Out Our Free Trial

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks.

Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks.

Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.