6 Rules for Email Template Design

If you are tired of reading about email conversion, tracking, and deliverability, let’s talk about email design, about the layout if to be more specific.

Let's say, you've set the campaign's marketing goals and prepared text and images. How do you place them in the email template in the most effective way? 

Big text volumes may be appropriate for analytical campaigns, and image overflow - for promos by photo stocks. The rest is better to rely on the universal rules of email content design and not overload templates with unnecessary elements. A concise structure, clear call to action, simple design - these are some of the tips we'll look at below.

These rules don’t claim to be an ultimate guide, but they will help you arrange the content more effectively. And by the way, knowing these rules will make it easier to go beyond these very rules.

Rule 1. Clear Structure

According to Litmus, it takes most recipients about 11 seconds to read your message. So you have only 11 seconds to explain the purpose of the email, form a need and call to action.

Well-structured content is easy to digest - a quick scroll down should give the reader the general idea of the message. Split the content into logical parts and give them appropriate titles. This way, the recipient will be able to quickly scan through.

"Early access to the fall collection," "Three top articles of the month," "30% off a monthly club card for any gym" - these headlines aren’t literary masterpieces, but they deliver the meaning. Remember that your subscribers open emails looking not for verbal art but for the benefit (discounts, promo codes) or entertainment (interesting content).

Rule 2. Focus on a Call to Action

Textbooks say a good marketing email has a pyramid structure. I'll offer an alternative metaphor: a good marketing email resembles a well-focused photo. A well-set focus can change the place in the email structure, but its presence is essential, and it should be convenient for the recipient place.

"Templates with a CTA on the first block is our golden rule," says my colleague Marina Shinkarenko, an email marketer at Depositphotos and Crello Project.

"Almost a third of clicks in our August digest was made on the first CTA. We see similar figures in almost every campaign."

- Marina Shinkarenko

Not every reader will scroll your email beyond the first block, so put a CTA higher, and also - make it red. Many would say, a red button is a predictable move, but red stimulates the nervous system and triggers an action faster than more muted colors. For example, the A/B test by HubSpot showed that the red CTA button generated 21% more clicks than the green one.

Rule 3. Simple Design

Organize your content in a clear way - don't use fancy elements or visual solutions just to look original. It is better to make your email simple but easy to digest than unusual but confusing.

What design solutions to apply?

• repetitive elements;
• white space;
• popular fonts;
• only necessary images.

Let's take a closer look at each.

1) Repetitive elements

They visually support the semantic structure of the email, making it easier to scan the content. Finding titles or CTAs takes a second and doesn’t tire down. Repetitive elements allow to skip all the uninteresting parts and quickly find the information most useful to the reader.

How to team up a set of diverse elements? A stock photography agency Depositphotos uses a similar style for headlines, buttons, and rounded corners:

2) More space

White space in the email design serves as vacuum. It is a neutral background for your content that allows to build an informational hierarchy. Look at this campaign by Medium:

The text is organized in clear blocks, and the message itself looks “spacious” due to white space around.

3) Standard fonts

Use fonts supported by email clients to guarantee your text would be displayed correctly. Rare custom fonts aren’t supported by many clients, so be careful with those. The most popular font for emails is Arial. It will look as intended in any client.

You can set up a certain font for each device. For example, Apple users are used to San Francisco and Android users - to Roboto; use Helvetica for Windows 10 users and Arial for the rest. To do this, add to the layout this code: "font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;".

4) Images

Images increase the time of email upload, and while it’s uploading, the recipient may lose interest. Do not overload email with active/bright backgrounds, icons or design elements just for decoration. If you don’t sell photos or videos, limit their presence to a minimum.

Sometimes you do without images, like Really Good Emails below:

This is a transactional email whose task is to quickly notify the user of the successful action. Images in such an email only distract. On the other hand, a sales promo can’t go without images. Your tactics should depend on the purpose and type of emails. Such a plain text email can be the main version of your campaign or serve as a backup for users who can’t view an HTML version.

If radical minimalism isn’t your thing, create a beautiful header and add a logo and/or slogan. For example, you can find the right templates in the Crello graphic editor.

Rule 4. Good Readability

If you want your email to be read, remove all distractive elements - make the text contrast and avoid unusual styles. Black text on a white background is a classic that should not be abandoned. With maximum contrast, such text is the easiest to read.

For the same purpose, avoid bright images in the email header - they will steal the attention, and the text is unlikely to be read. To keep the focus on the text, darken or reduce the contrast of the image.

Readability can also be harmed by unusual approaches to the design of text blocks when text is split vertically or zigzag (image on different sides; text jumps right to left). Both options make it difficult to read, breaking the usual way of perceiving information from left to right.

Place your images so that it's clear to what text they’re assigned. Don’t make the reader think about it, they don’t have time for this.

Rule 5. Mobile Version

Look again at the campaign by Depositphotos from #3. Simple design? One in seven recipients viewed it on a mobile device. According to Litmus, 46% of emails are opened on mobile devices.

Even if only one in ten recipients reads your emails on a smartphone, optimize your campaigns for mobiles. There are two ways to adapt emails to devices:

• create a different design specifically for mobiles or enlarge the font;
• reduce the width and simplify the structure of the main copy(for example, remove columns).

Rule 6. Unsubscribe Link

Every day, I see many campaigns in my Inbox. To most of them, I signed myself, but it doesn’t mean I don’t want to unsubscribe from some. To do this, I look for the unsubscribe option in the email footer. If I can’t find it, chances are good I may report the campaign as spam.

Make sure you offer your subscribers the option of unsubscribe in each email. There is no need to make unsubscribe options too huge, but its presence is essential. It will help avoid mass complaints and bans by email clients. Such complaints hurt your email deliverability so don’t neglect email etiquette.

Product Hunt did the job well. Alongside the unsubscribe option, they offer to receive emails once a week instead of daily messages.

To sum up

Aim to make your emails not "beautiful," but convenient and understandable for subscribers - decorative elements shouldn’t hurt the content perception. Only in this case, your well-thought information will hit the target.