Email design: Trends and best practices

Best practices for your email designs

François Sahli, our talented Graphic Designer here at Mailjet, started by telling us about all the best practices to keep in mind when designing an email. His advice applies for both beginners and more advanced users so, no matter whether you’re an email expert or still long for the days of AIM, you can be sure that his advice will help you out.

Formatting

To give your email a good look everywhere, keep in mind that emails are 600 pixels wide on a desktop and 320 pixels wide on a mobile phone. During Email Camp, François told us that “while you can create emails in other widths, this can result in difficulties, such as making users scroll horizontally to see the entire message.”

Additionally, think about optimizing the size of your images to ensure optimal quality on mobile phones. To compress images to reduce their size while maintaining the best quality, you can use tools such as Compress JPEG to get the best look possible. Easy, right?

Images

One of the elements that ISPs take into account when deciding whether or not to allow an email to reach the inbox is the email’s text-to-image ratio. To avoid being marked as spam and having your messages blocked or filtered, it is recommended that you respect a ratio of about 70% text and 30% images inside your message. Keep it readable – remember, it’s an email, not a Facebook photo album.

You should also know that there’s a risk of your images being blocked by your contacts’ email clients. To anticipate this, Francois recommends inserting alt-text (i.e. alternative text that will be displayed if the image is not displayed), and adding a background color in addition to any background images to make sure that the text will still be legible.

If you are looking for images for your emails, you can browse Unsplash and Pixabay, two online image banks that offer beautiful photos for free. Additionally, if you need help with creating easy and free email designs, Canva is the tool for you.

You might find this article interesting: “How to create responsive design for your emails”

Calls-to-action

A call-to-action (CTA) is a button that prompts the reader to perform a specific action, such as registering for a webinar or purchasing a product. To maximize your chances of conversion – meaning actions and sales from users – François recommends “limiting the number of CTAs, especially above the fold, which is the line that delineates what the user sees without having to scroll”. You can also play with the color and contrast of the call-to-action buttons to make them stand out and easy to see.

However, be sure to use appropriate colors and contrasts that go with your brand. You don’t want to blind your readers!

Additionally, pay attention to the size and spacing of clickable buttons and icons, especially on mobile phones. You should make them at least 40 to 48 pixels wide. Bear in mind that the smaller the clickable elements are, the further apart they should be so that users don’t click on the wrong element.

Typography

There are two types of fonts: web safe fonts and web fonts.

Web safe fonts are fonts like Arial, Times New Roman, Verdana or Georgia. These are the default fonts found on most operating systems and devices, and are supported by all major email clients. Conversely, web fonts are not among the fonts available by default. Some of the best known web fonts are Open Sans and Roboto.

At Email Camp, François told us that “while web fonts offer many design opportunities, specialists must be careful because, unfortunately, not all email clients support them”. That is why, when using web fonts, you must set up a list of back-up fonts called fallback fonts. This way, if an email client can’t comply with your first choice, they will choose the next font on your list so that the email display is still close to your original.

Code

Some common web features and code elements are not always well-supported by certain email clients. For example, Gmail may have trouble displaying web fonts, some versions of Outlook may not always display background images correctly, and many webmail providers have trouble displaying drop shadow features. This is why you should make sure that the various elements of your emails are supported by the different email systems.

At Email Camp, François shared the website Can I Email, which lists many emails clients’ partial or total support for many HTML and CSS features. This way, you can take into account all the design possibilities when designing your emails.

Responsive design

Responsive design is a design technique that automatically adjusts how an email is displayed in any email client. Designing an email using responsive design is essential, given that most users nowadays read their emails on mobile phones. 80% of readers delete messages that do not display correctly on their mobile phones.

Therefore, when designing your emails, make sure you use an email editor that uses responsive design by default, such as Email Editor from Mailjet. To take it one step further, Email Editor even offers a preview feature to help you check how your email is shown in different inboxes, for multiple device makers, versions, devices and countries. No more guessing….

Send amazing email campaigns with Mailjet

Collaborate with your team to design and send beautiful email campaigns that truly speak to your audience.

Templates and components

Templates and libraries see heavy use in web page design. However, it’s also very useful to create a library of components for your email campaigns. Once you have created your library, you can create all your emails with it to ensure that they respect your design guidelines.

This will also allow you to test your entire library to guarantee that any email created from it is displayed correctly. Another benefit of a library is helping you to test different layouts more quickly, either when creating new emails or performing A/B tests on existing emails.

If you need ideas, Really Good Emails and Email Love are two very well-designed email sites. They provide an endless source of inspiration to help you design beautiful emails.

Trends to know in email design

Now that you know the basic best practices, it’s time to kick it up a notch from “basic” to “awesome.” Jonathan Loriaux, CEO and founder of the email marketing agency Badsender, shared his predictions for upcoming email trends with us.

Upgrade email

According to Jonathan, in comparison to other channels, email tends to receive less attention in terms of design quality and user experience. However, it is essential to offer customers a similar experience in terms of design practices on the different channels.

To do this, you should become familiar with some of the main design principles that exist today, such as the Design System. This design method aims at bringing together all the graphic elements, branding, components, etc., in a single consideration. For Jonathan, “Design System implies going beyond the design guidelines to include all the channels in how you think about your design – today, it is essential to make email a part of this reflection.”

You should also use Material Design, a way of managing design widely used by Google. This method is about reusing in different channels, including email, codes that users see every day in their digital environment .

Beyond these main principles, there are new techniques that users are already used to that you can include in emails. For example, there are “burger menus” (no relation to the sandwich) made up of three horizontal bars, slideshows for readers to scroll through several images, videos that make readers want to find out more, or animations “that must be created to help users understand the message.”

Bear in mind that email has technical limitations – you can’t always do everything you might want in certain environments. But this should not prevent brands from innovating while keeping in mind their acceptable level of quality reduction to make sure that emails remain consistent with a smooth user experience.

Industrializing production

The second major trend is the rise of email industrialization. There is a real desire today to optimize production processes to waste as little time as possible on repetitive tasks and to focus on what really counts, namely email performance (openings, clicks, etc.). Email marketers should not lose sight of the ultimate goal of email marketing, which is to convert readers.

In this context, Jonathan and François both recommend using “Master Templates, which are libraries of reusable and customizable sections of emails designed using the appropriate design guidelines.” In this same vein, users can also use online email builders, such as Email Editor, to quickly design email campaigns with systems of blocks and sections that can be easily drag-and-dropped. Collaborative features, such as shared email editing or exchanging comments directly on the platform, help to simplify processes and increase team productivity. And that’s always a win, right?

Remember the environment and accessibility

Email ecology and accessibility are becoming increasingly important in the lives of brands and users and will be at the heart of future email design strategies. Design will have to take into account more ethical and environmentally-friendly criteria.

“When we talk about email and environment, there are really two points where we can have a positive influence: data storage and display,” Jonathan tells us. There are several simple ways to reduce the carbon footprint of your emails:

• Reduce image sizes

• Reduce the complexity of the email to reduce the size of the HTML code

• Think about how “dark mode” can impact your email design

• Think about the brightness of your designs

• Include a message asking the user to delete the email after reading it

In terms of accessibility, more than 1.3 billion people live with some degree of visual impairment. Your goal is to help these people read emails as easily as possible. This joins another current trend, which is voice assistants that are progressively beginning to read messages. To allow these tools to work, you have to take into account certain practices:

• Structure the message

• Prioritize content

• Use contrasting colors

• Optimize HTML code

Include interactivity

Interactivity is based on three aspects: being able to modify the information inside an email in real time, being able to send information from an email, and being able to show content dynamically.

In 2019, Google announced the launch of AMP for email, an open-source technology to add interactivity into campaigns. Using the example email from Doodle below, we can see that this technology allows the user to select a time slot for a meeting without leaving the email. Given that it was abandoned by Microsoft and that email routers have to modify their systems to be able to send messages in AMP, many email designers are wondering whether this technology will really be used more widely.

However, there are other interactive techniques that are already more widely available. You can modify the content of an image in real time (for example, if a product is no longer available the day after the email is sent, you can notify the customer within the email or suggest another product instead), add countdowns, carry out surveys and polls or get customer satisfaction feedback. As Jonathan explains, “it can sometimes be complex to put in place, but it is quite feasible.”

Tips & tools to remember from Email Camp

Best practices

• If you use web fonts, set up fallback fonts to ensure that your email renders as close as possible to your vision.

• Check the HTML and CSS features that various email providers support to understand what you can do.

• Use a ratio of about 70% text and 30% images in your email to improve your deliverability.

• Insert alt-texts (alternative text) and add a background color so that your email can be understood even without images.

• Use a width of 600 pixels on desktop and 320 pixels on mobile and optimize the size of the images inside your emails for an optimal layout.

• Use responsive design for your emails so that the email’s display automatically adjusts to various email clients and devices.

• Pay attention to the positioning, design, size, and spacing of your clickable elements to optimize the conversion rate of your emails.

Resources

• Can I Email: a site which lists many emails clients’ partial or total support for many HTML and CSS features.

• Unsplash and Pixabay: online image banks offering beautiful photos for free.

• Canva: a graphic design platform to easily create different types of designs.

• JPEG Compressor: a tool to reduce the image sizes while maintaining quality.

• Email Editor: an intuitive drag-and-drop email builder to easily design great email campaigns, either by yourself or as a team.

• Really Good Emails and Email Love: an email directory that helps inspire users.

Trends

• Stop considering email as a minor channel and invest in email design to increase its profitability.

• Adopt a more industrial approach to design production to free yourself from repetitive tasks and focus on conversion.

• Integrate environmentally-friendly and accessibility values to reduce the carbon footprint of email and make it accessible to everyone.

• Leverage advanced interactive technologies to offer innovative emails while keeping their constraints in mind.

Video session

Watch the video of Email Camp 2020’s session on email design to get all of François’s and Jonathan’s top tips:

Want to watch the other sessions that took place during Email Camp 2020? It’s this way.

How Mailjet can help you

Mailjet’s email marketing solution allows you to easily create beautiful designs for your emails. Thanks to an intuitive drag-and-drop email builder, you can design 100% responsive email campaigns that show perfectly on any screen in just a few clicks. Try it for yourself.

Mailjet’s email template gallery, linked/saved sections and collaborative tools will save you time when creating your campaigns, so you can focus on optimizing your emails’ performance. Mailjet offers many advanced features such as segmentation, personalization and A/B testing. Create a free account and get a 30-day trial to test Mailjet’s premium features – trust us, it’s better than AIM.

What practices do you follow in your email design? What resources do you use to improve how your email campaigns render? Share your feedback with us on social networks: Twitter or LinkedIn.