Email Design Best Practices: Turn Your Emails From Good To Great Dec 23, 2019Views: 344
Do you want an email designed to look awesome and convert like crazy? You might be thinking “I’m not a designer, I’m a small business owner” but we promise, designing emails is easy and it can actually be fun (honestly) once you’ve got an idea of what you are looking for.
“An email without clarity is like an annoying mime: Just say what you want or get out the way.” – Jordie van Rijn
When starting with the design of your email campaign, you’re juggling a lot of balls in the air at once. You have to think – and worry – about things like branding, memorable messaging, proofreading the copy, creating compelling CTAs, designing the email so it works for multiple inboxes and devices, choosing impactful imagery, avoiding any spam triggers and think about awesome, engaging subject lines. All while staying within the confines of email laws. Don’t worry though, we have the most comprehensive email design best practices guide to share with you that will surely turn your emails from good to great. Ah, we also have a bonus checklist for you at the end.
In this article, we’ll cover email design best practices such as:
- Defining the type of email you’ll be sending
- The essential elements for designing an email campaign
- Email layout
- The subject line, preheader and personalisation
- Email copy (contextual marketing/humanisation)
- Responsive design
- Images and animation
- White space
- Clear CTAs plus bulletproof buttons
- Web fonts and fallback options
- Spelling/ Grammar
- A/B testing
Even after its inception 4 decades ago, email marketing is still the most popular tool of communication for businesses in order for them to build meaningful relations with their customers. If you take apart the layers, the core of a successful email campaign is a well-designed and attractive email template. However, in order to achieve that you’ll need to follow a few email design best practices. So, we are here to make sure you know everything you need to.
Before you even think about typing a single word, make sure you have clearly defined the goals of your email campaign. Is it supposed to help you generate leads? Or help you get more email subscribers? Send traffic to your website? Once you have a clear objective, let the email design draw from it.
Keep in mind that your goal should be something more than “how many people opened your email campaign”. Instead, it must be more closely tied to your overall business goals. Obviously, your email’s open rate would give an indication of the campaign’s performance, however, it shouldn’t be the only number you care about each month. Here are some email marketing metrics to consider as well.
Now, it’s time for action. You need to plan the design of your email. However, before you start planning, you need to define what type of email you’ll be sending and what goals it will fulfil.
Which type of email will you be sending? What goals will it satisfy?
In an email subscriber’s journey, there is a minimum of 5 (or 6, if you’re an e-commerce brand) email types you need to send them and they are:
1. Welcome email
The goal is to thank your subscribers for, well… subscribing. The email copy should introduce your brand and the CTA should prompt the subscriber to either complete their profile, update their preferences and/or order a product.
2. Newsletter email
This is a periodic email whose goal is to educate and inform your subscribers about your brand and its products/services in order to make the subscribers interested in making a purchase. This type of email can also provide interesting, valuable content as well as product/service updates to keep your subscribers informed.
3. Sale promotions / Announcement emails
The goal of this type of email is to convert the subscriber into a customer. It’s purely marketing in tone and should make the subscriber believe that this purchase will ‘get the job done’ or solve the problem that brought them to your brand in the first place.
4. Order receipt emails
The goal here is to confirm a purchase made by the subscriber. This email should be triggered when a subscriber makes a purchase and can be used to promote other relevant products. However, the ratio needs to be 80% transactional and 20% promotional.
5. Re-engagement emails
Not all of your subscribers are going to remain active and keep opening your emails. The goal of these emails is to give your dormant subscribers a little nudge and, hopefully, bring them back to your sales cycle.
6. (For e-commerce) Cart abandonment emails
There are many reasons as to why a well-nurtured subscriber may abandon their purchase mid-way. The goal here is to try and draw such “abandoners” back and reunite them with their carts. This is a must-have email for e-commerce businesses.
Of course, depending on the industry your brand belongs to, there will be more emails that you are going to need such as birthday/anniversary emails, survey/review emails and re-order anniversary emails – to name just a few.
What are the essentials for designing an email campaign?
The design of your email is one of the most important stages as it creates the visual identity and defines your brand’s personality. Therefore, before you rush off, consider the following prerequisites:
- Email layout
- The subject line, preheader and personalisation
- Memorable, relevant email content (contextual marketing/humanisation)
- Responsive design
- Impactful imagery and animation
- White space
- Clear CTAs plus bulletproof buttons
- Web Fonts and fallback options
- Spelling/ Grammar
- A/B testing
The layout of your email campaign should help your recipients know what they should be checking out first and where to go from there. They should be able to scan the email quickly using a logical hierarchy with large headlines and images focusing the attention. Below you can see 3 examples of email layouts.
This type of email structure is very simple but effective. You start with a bold image or header that fills the whole width of the email, followed by a narrower image, header, title or button that draws the eye towards the centre of the email, and finishing with your CTA, usually a button or link, which is even narrower (and also centred). Here is a really great example from InVision:
In other words, the design is like an upside-down triangle pointing straight to the final CTA.
Another attractive design grid is an angular one with a zig-zag layout. According to graphic designer Mary Stribley, “an angular layout is both enticing to look at as well as functional to order lots of information and imagery.”
You can create these angles by using imagery or colour blocking in order to guide the reader through each step of the email. This not only creates a visually pleasing layout, but it also helps to simplify each section of the email so that it is easy to read. Here is an example from Sephora:
For mobile devices, it’s best to stick to single column layouts of no more than 500 – 600 pixels wide. Your emails will a) fit properly in the screen without scrolling sideways and b) they’ll be much easier to read that way. Here is an example:
Hearing horror stories of people engaging with email scams, audiences can be cautious of opening and interacting with emails if they don’t know who they came from. Therefore, you must ensure your email is branded accordingly in order to make it clear who’s sending the message. Make sure your logo is prominent in the design to gain the trust of the recipient.
3. Subject Line, Preheader and Personalisation
Whilst not being a traditional “design element”, your subject line is considered one of the most important factors in getting your email opened so your subscriber can see the sweet email design you’ve been working on. Therefore, make it engaging, personal and, of course, relevant. After all, according to Email Monks, 80% of email opens depend on your subject line.
However, you must remember not to overdo it. The overuse of CAPS and unnecessary punctuation, as well as some words, can trigger spam filters. So, respect your subscribers and don’t go there.
One of the important email design best practices to remember when crafting the perfect subject line is that longer is not necessarily better. According to data from our friends at Return Path, 65 characters seems to be a sweet spot for subject lines. Which is about 15 characters more than the average subject line.
The saying “a picture is worth a thousand words” may have never been truer than when it comes to emoji. An emoji in email subject lines can have a major impact. Not only can they take the place of words, be attention-grabbing and add a definite charm, but they can also increase your open rates.
A report by Experian noted that 56% of brands using emoji in their email subject lines had a higher unique open rate. However, keep in mind not all email clients support emoji. Therefore, if an emoji isn’t supported by the email client, your recipient may see a box (☐) character instead. If that happens, the whole purpose of using an emoji in your subject line would fail, you might not achieve the set goal of further enticing your recipients and the intention of the remaining text may not be clear.
Take a look at some ideas for irresistible subject lines here.
The preheader, also known as the ‘Johnson Box’, is the visible part in the inbox preview – and in the body of your email – which adds valuable content to your subject line and can help your open rates. Its purpose is to draw the recipient’s attention to the key message first in order for them to understand why the email campaign is useful to them. It’s important to note that your subject line and preheader text should work together. So consider them joined at the hip.
Emails that are highly segmented have the tendency to have higher performance levels (such as open rate and click-through rate) than emails that are not personalised.
According to Experian, emails with personalised subject lines are 26% more likely to be opened. Hence, go beyond just injecting the subscriber’s first name in the subject line and use other data – especially in the email body – in order to fuel super relevant messaging.
4. Memorable Messaging
One of the most important email design practices is ensuring that the content (email body) of your email is concise and straight to the point. After all, the “meat” of your email is the body copy. Therefore, make sure there is a cohesive story between your email’s subject line, (pre)header and, you guessed it, content. Each one should provide just a little more information than the previous element of your email campaign.
So, you sat down and started writing the body of your email campaign but you are drawing blanks. You are thinking “what am I supposed to write?”, “how do I make a new product or feature appealing to my audience?” or “what topics should I cover in my next newsletter?”.
Writing a great email copy can be difficult. However, the key to writing awesome content isn’t a big secret known only to copywriting experts. The key is simplicity. By presenting the benefits of your product/service, giving advice or providing relevant and interesting content, you are definitely about to make much more impact to your audience and ultimately drive more conversions than by simply bombarding them with irrelevant emails attempting to achieve higher results and better exposure merely through volume.
Thus, if you’ve already enticed your subscribers to open your email, it’s imperative to retain their attention and interest by proving what you have to say is important and valuable in order to prompt them to take action. The first step is to decide what type of content you want to include in your email campaign – active or passive. Then, your second step would be to ensure your email body is “humanised” – write it as if you’re talking to a buddy instead of making your subscribers feel like they are conversing to an automated machine. Finally, make sure that your message won’t be as long as “War and Peace”. People allocate very little time reading emails. Your copy should be kept short, clear, simple and direct. If you have a lot to say, you can include links to specifically designed landing pages that have more information on the topic. Just don’t overload your audience. It won’t do any good.
Active vs Passive Content
At the beginning of the article, we mentioned that defining the goal of your email campaign – before you begin with anything else – is one of the most imperative email design best practices. Depending on what that goal is and how often you plan on emailing your subscribers, you will be able to either actively or passively create content for your subscribers in the time between two (or more) email sends.
Active content builds customer acquisition and lead generation tools directly into the body copy’s presentation and design. These tools may be a simple email subscription request or a social network follow, or they may be more detailed such a lead form or deeper-funnel call-to-action.
Whether they are best implemented in front of the content or as optional next steps surrounding or embedded beneath the content depends on the content, the audience, the context and the desired outcome.
Active content means that something is required from the recipient, who needs to participate with the content and your brand. The prospects provide you with information and, consequently, you provide them with something of value. It also helps your business be more interactive with your recipients.
Passive content is easy to spot. Things such as whitepapers, e-books, slide decks and even most infographics are a clear example of passive content because there is nothing for you to interact with. You read them (or watch) and then you move on. Basically, this type of content is not attached to an explicit “next step” for the audience. If someone consumes your content and likes it, it’s up to them to figure out what to do next.
Have you heard of contextual marketing (or humanisation)? No. Don’t worry. It’s a term that is just beginning to get popular.
Its main focus is making emails more of a one-to-one engagement rather than a one-to-many type email where one size fits all.
Making your emails feel more “humanised” and feel like they were built for each subscriber individually has many benefits including increased engagement, better relationships with your subscribers and even getting people excited about receiving and opening your emails.
5. Responsive Design
It’s essential for your email’s design to work on multiple devices. Roughly 42% of emails are being opened on smartphones or tablets. So, make sure your design will render flawlessly for all screen sizes.
Remember emails are not webpages, so you should definitely not position things anywhere you like. For example, wrapping text around objects is a no-no and also using strange shapes, angles and curves. This is because these examples can’t easily respond to different displays. Overall, the more display widths you consider the better.
As a minimum, according to email design best practices, you should design your email campaign for the following widths:
- Desktop display – 600px
- Mobile display – 320 px
Just keep in mind that a lot of email clients don’t use the full width of your screen to display an email message. Some show ads or have navigation or a menu, so there are limitations to the real estate on the recipient’s screen.
6. Impactful (Hero) Imagery and Animation
When you are using (hero) images and/or animation in your emails, it’s important to ensure they will visually convey the main point of your message. Using large photography, GIFs or CSS animation can help customers engage with your products – despite not being able to interact with them in real life – and it’s also a great way to catch your audiences’ attention.
Wondering what a hero image is?
Well, it certainly doesn’t fly around saving damsels in distress or fights against crime. The term is given to an image that prominently covers the entire width of the page. It’s usually placed at the beginning of the email to act as an introduction.
Photographs as a hero image are mostly used in online retail, e-commerce, travel & hospitality. Whilst, illustrations as a hero image are mostly used in industries providing I.T., SaaS or a digital experience/service.
When it comes to animation, being it GIFs or CSS animation, you must keep the file size to a minimum. We’ve seen fantastic animations in large GIFs that are under 1MB. However, we’ve also seen more complex ones which come over 10MB. If your GIF is too large in size it’ll take too long for it to load and your subscribers, some of which will probably view your emails on mobile devices, won’t even get to see it. Therefore, it’s a good idea to keep the file size as close to 1MB as possible. Under that size is perfect and a little over it is still alright, too. But don’t go crazy.
Another factor to take into consideration is that not all email clients can display GIFs and CSS animation. Thus, make sure you have a suitable fallback image for those clients that represent your animation as a static image. In some cases, the first frame of a GIF is displayed, but you need to make sure it is suitable – and not a blank screen.
Learn more about adding a video to your emails here >>>
When using images in emails, keep the following email design best practices in mind:
Dimension. Most emails are 600 to 640px wide. However, in order to keep your image crisp on high-resolution displays, you need to make sure it is 2 times the size – i.e. 1200px – and use the image attributes and CSS to keep the image at the width you want.
File size. You can easily forget about file size in an email but you want to make sure your images are optimised. The bigger the email, the longer it’ll take for mobile subscribers to view and thus create a negative email experience.
Alt Text. If your image doesn’t load or breaks somewhere along the sending process, alt text is what will be displayed in its place. This is another area that many email marketers overlook. We advise you to add helpful alt text that compliments your message in the case that your image doesn’t load. Also, alt text also makes your email more accessible.
Use images that complement the email. Your email definitely shouldn’t be a bunch of images placed together. The purpose of an image is to add to the email design and the message – not be the message. Therefore, the easiest and simplest way to test this is to view the email with images turned off. Does it still make sense? Is the message still clear? If the answer is ‘no’, you need to have a re-think of the image’s text and/or alt text description.
Stock and royalty-free images. On occasion, stock imagery may divert your audience away from the message. Thus, keep your images on brand and genuine. Why not even create specific imagery if you have the time and opportunity? But, if you don’t have the time you can use stock and royalty-free images from sites like Unsplash, Pexel and Pixabay.
7. White Space
No one likes clutter. A jam-packed email design with too many columns and images – or too much text, can be off-putting and annoying. It is no longer essential for all your content to appear within the email client preview window as audiences are used to scrolling, however, ensure your key message is ‘above the line’ ie seen in the preview pane.
So, make sure you space out your content into easily digestible sections. Trust us, it will be much more appealing to the eye.
By simply adding ample white space around the elements in your email, you will be encouraging click-throughs and helping the subscribers focus their attention on each element at the right time. It can also increase the legibility of your email and improve the recipient’s ability to follow the content. You can use your best judgment to ensure your copy and CTA buttons are separated enough in order to stand out and prompt actions, but also, close enough that your readers know the elements are connected.
8. Clear Call-To-Action + Bulletproof Buttons
Ensuring your CTAs stand out and look clickable is essential for effective conversions. It’s also the most obvious point where you try to convert your recipients. Use bright colours, create button shapes and/or bold fonts. Consider placing plenty of white space or block colour around the CTA to isolate and emphasise it.
The ideal CTA button has three main aspects that work together:
- Copy – be specific and focused on the benefits.
- Design – it should stand out, be appropriately sized and have enough white space around it. Placing your CTAs in a button design makes them easily identifiable.
- Placement – the ideal placement for your CTA button is relative to the complexity of the email copy. If you are offering something to your subscribers, you may need to add more explanation copy before the CTA.
Learn more about how to pick the best CTA button colours here >>
However, it is very important to keep the number of CTAs to a minimum. Focus on where you want people to go and remove any unneeded clutter.
Here are a few things you should consider when crafting a button:
- Size. Keep your buttons big enough in order for people to notice and click on them – even on mobile. Typically that means around 50 px tall.
- Colour. Most businesses match the colour of their CTAs to the colour of their brand, contrasting against the background colour and the space around it. A nice design could be ‘hover effect’ which is supported by most email clients and allows the button to change colour when one scroll over it.
- Frequency. The number of buttons you have is determined by how many actions are possible to take. Hence, be mindful as to how many you add to your email. For retailers with multiple products, they may add a button for each one. For others, there may be just one button to focus on the most important message.
- Language. The goal of a button is to ‘spark’ subscribers to take action. So, an active verb is typically what’s used to give them a nudge.
9. Web Fonts and Fallback Options
Think back to the early days of the internet where you’d find the web filled with very basic fonts that made both designers and marketers cringe. The reason: marketers were forced to use a handful of web-safe fonts that were most common – at the time. However, things have changed.
Whilst your email copy conveys the message of your email, how that message is presented also plays a fundamental role. Enter web fonts.
There are two different types of fonts available to marketers for their emails: web fonts and web-safe fonts. However, do you know the difference?
Web fonts are fonts generally designed specifically for use on the web. This means they don’t usually come included in operating systems or devices. However, some notable email clients such as Apple Mail, iOS Mail, Outlook 2000, Outlook.com app, Thunderbird and the default Android mail client (not the Gmail app) support web fonts.
Web-safe fonts are the default fonts that are included with most operating systems. Hence why they are called web-safe fonts and we can assume that these fonts will work regardless of the device – or operating system – your recipients are using to view your email. This includes fonts such as Arial, Verdana, Georgia, Times New Roman and Courier New. They are all considered to be web-safe fonts that can be used for live text in an email.
Fallback fonts are fonts shown to your subscribers when their email client doesn’t support web fonts. Thus, it’s imperative to have a fallback web-safe font in place. It’s important to choose your fallback font first and then select the primary one rather than vice versa.
To learn more about web fonts and how to embed them in your emails click here – web fonts in email marketing.
This is not the FULL article, which was originally published on 19 December, as there are length restrictions on posts. You can finish reading it here.
Open your Unlimited Sends one-month free trial today – after your first month with us you can switch to our FreeForever account giving you 12,500 sends to 2,500 contacts each and every month for free, forever. Corporate email marketing? Contact us.
You need to be logged in to comment