How to design emails that really work
Anyone who has ever set up an email campaign will tell you there’s more to it than just hitting that send button. You need to make sure every aspect is taken care of: design, content, tone of voice, subject line, responsiveness… and the list goes on. Since there are so many things to check, we’ll let you in on some essential tips and tricks to give your email the best chance to hit the right spot with your recipients.
Do the email clients test
Before you’re all set to send out your email campaign, it’s essential to test how it will display in different email clients. Testing tools like Email On Acid, Litmus or PutsMail will let you run your email through various clients. Maybe your own ESP offers the possibility to test your emails extensively. Worth checking out!
In first instance, it’s crucial to guarantee that your email looks the way you intended it in the most-used email clients. Here’s an overview of the most popular ones to date.(1) iOS Mail and Gmail are still the most popular email clients.
|2. Apple iPhone||27.6%|
|4. Apple iPad||8.5%|
|5. Apple Mail||7.5%|
|6. Yahoo Mail||6.3%|
|7. Google Android||2.5%|
|9. Samsung Mail||1.6%|
Most people prefer to read their email on a mobile device. Keep that in mind when you’re designing. A mail that is perfectly scalable to all mobile screens is a huge plus. It’s important to assign a value to your recipients as well. Take advantage of this by, for example, adding animated CTA’s or creating carrousels and accordion menus. We see these types of designs getting more popular every day.
(1) Source: Litmus – Infographic : The 2019 email client market share
Defy the limitations
All email clients have their limitations. Take Outlook, for example. This top 3 email client does not support design elements like HTML5 videos, animated gifs, background images, certain typefaces or rounded corners. Outlook will always display a rounded button as a straight-cornered rectangle. No need to worry, though. These simple tips & tricks will help you create a great user experience, nonetheless the desktop/mobile limitations of some email clients.
Respect the standard width
To make sure your email messages scale well on all screen formats and devices, we advise using a standard design width between 600 and 700 pixels. When you combine this with a responsive design, your email will most likely display perfectly on any mobile device.
Add a pre-header
This one short line of text, directly underneath your subject line, is ideal to add an extra call to action that will help you convince readers to open your email. The combination of these two sentences is your first and best chance to grab your contacts’ attention when they’re scanning their inbox.
7 essential tips for pre-headers that convince
- The pre-header text is an extension of your subject line.
- The first line of text in your pre-header should outline the core message of your email.
- Don't delete your ‘read online’ link – place it next to or underneath your core message.
- Be creative – don't repeat your subject line: the sender name + subject line + pre header text have to support one another in order to bring an interesting message for the recipient.
- Try incorporating some personalisation (first name, location, …)
- Add an emoticon that supports your message.
- Questions work like a charm when you want to grab attention.
Mind your alt-texts
A lot of often-used email clients in work environments will not automatically display the images in an email. That’s why adding alt-texts for every design element is of the utmost importance. They will arouse the interest (or curiosity) of your recipients and could be just what they need to be convinced that your email is worth reading.
Choose email-safe fonts
Typefaces can make or break an email design. Want your email to display correctly? Only use standard fonts, as they are supported by most email clients. In other words: your email will look just like you designed it. Which is nice, no?
Microsoft Word will show the fonts that are installed on your pc. But don’t automatically assume they will also be available on your contacts’ pc or mobile device. As you probably know, devices running Apple or Windows operating systems come with quite a different set of standard fonts.
Do you want to be certain that the font(s) you chose will show correctly on most devices? Go safe and pick them from this failsafe list:
Arial, Arial Black, Bookman, Comic Sans MS, Courrier New, Garamond, Georgia, Helvetica, Impact, Lucida Sans Unicode, Palatino, Tahoma, Times New Roman, Trebuchet MS, Verdana
In most cases, using web fonts is a no-go. But if you insist, be sure to always define a standard fallback font. This alternative will replace the original font whenever it’s not available on a recipient’s device. Needless to say, it’s best that this ‘alt-font’ is similar to the one you originally used to design your email.
Include a text-only version
When you’re ready to mail out your email campaign, consider including a text-only version, which doesn’t contain design elements. Contacts using their Smartwatch to read their emails will love you for it.
Every marketer wants their email campaign to find its way into the recipient’s inbox. The tips above will help you succeed in that mission. Test your emails thoroughly in all important email clients on both desktop and mobile devices. And be sure to check and double-check standard width, pre-header copy, alt-texts, and the font usage in your email.
Bonus tip: while you’re at it, check your footer design too. Our blogpost on that subject will help you optimise that in a jiffy.