« Back to Blog

 

How to Design Appealing and Effective Email Templates

Templates allow you to create multiple versions of your emails quickly and easily. They’re incredibly useful because they enable you to generate newsletters, drip campaigns, promotions and any other type of email you want to send while maintaining brand consistency. You can also run A/B tests easily if you’ve mastered the use of your templates. 

An effective email template is like a recipe. It combines conversion optimisation and creative graphic design with compelling copy and is all held together by code. If you mix all of these ingredients together the right way, you’ll get a tantalising, and effective, final product.

In this post, we’re going to talk about the design elements that are common among all types of successful emails.

There are approximately 12 common and effective types of emails that businesses use in their email marketing strategies. Of course, every marketer will subtract, add, or combine these in their own way, but here’s how we’ve broken them down:

  1. Welcome Emails
  2. Newsletters and Announcements
  3. Promotional Campaigns/Offers
  4. Free Gift Emails
  5. Seasonal Campaigns
  6. Triggered Emails
  7. Social Campaign Emails
  8. Receipt Emails
  9. Cart Abandonment Emails
  10. Post Purchase Emails
  11. Customer Surveys
  12. Re-Engagement Emails

We’re not going to break them down one-by-one in this post (that’ll be next month). Right now we’re going to talk about the fundamental components of every email, and how to design them in order to achieve maximum effectiveness.

Layout/Format

Your layout is the first thing you should consider, as it’s going to determine where the attention of your readers is drawn and how they will progress through your message. The best emails balance creative design and conversion optimisation.

In all actuality, you only have a couple of seconds before your reader decides whether your email is worth their time or not, so you want to follow a few parameters to make sure your email has the highest chances of actually being read.

Start with the value

A good tactic for building out your template design is to treat it like a news article. A reporter’s mantra is ‘start with the lead,’ and yours should be ‘start with the value.’ 

Convey the most important information first. Quickly informing your readers of what they’ll gain by reading the rest of your message should be your first priority.

Along with that, we recommend placing a crystal clear call-to-action near the top of your email. After all, the goal of every email is to convince your readers to take some sort of action and leave their inbox to engage with your brand in some way. 

Giving your readers a quick ‘escape route’ allows them an opportunity to take action without wasting any time, and puts them one step closer to your desired result.

 

CoSchedule Marketing Email Example

Example of how to state your value include an early CTA early

 

Keep everything within 600 pixels

Emails that require readers to scroll side to side might as well go straight into the trash. The average web user ‘scans’ more frequently than they do word for word reading, skipping over content that they deem unimportant or irrelevant and focusing on key sections that they believe they will find the most useful information.

This often happens in an F-Shaped Pattern of Reading and should inform your design.

 

F-shaped Reading Pattern

Example of the F-Shaped Reading Pattern sourced from Nielsen Norman Group

 

This essentially means that: 

  • Everything on the left side of your email is more likely to receive attention than that on the right 
  • First sentences are extra important
  • Anything outside of the frame is, for all intents and purposes, nonexistent

Now, good design can offset this effect, but if you’re just starting out with your email campaign, lacking time, or don’t have a ton of design experience under your belt, it’s safe to assume your readers will follow this pattern of reading, so use it to your advantage!

 

F-Shaped Reading Pattern Example

Example of content designed to fit the F-Shaped Pattern of Reading sourced from Nielsen Norman Group

 

Use HTML fonts

They’re the only ones that work. Simple as that. Stick with one of the basics like:

  • Arial
  • Helvetica
  • Times
  • Courier
  • Verdana
  • Geneva
  • Calibri
  • Optima
  • Cambria
  • Garamond
  • Perpetua
Only use 1, 2, or 3 columns

Since you’re keeping your email within 600px, you don’t have a lot of space to play with. 3 columns is the most you can squeeze in there without overcrowding. 

Keeping your design clean and minimal should help keep your readers focused on your message. If they have to struggle to read anything, chances are they’ll give up before they even start.

Content and Images

Once you’ve got your layout set up perfectly, it’s time to add your content, keeping in mind the F-Shaped Reading pattern. You should also note that many people don’t allow images from untrusted senders, so your design should incorporate images while allowing for the possibility that they won’t be seen.

Focus your message

Your subject, preheader text, body copy and images should all work together cohesively to get your subscribers to take action. Like we said before, the purpose of your email should be clear immediately. Each sentence of your copy and every component of your content should work to convince your reader to click your CTA.

Keep your copy short

2-5 lines or less for each section. Remember some of this won’t even be read, and bear in mind that there’s an entire landing page after this that you’re trying to get your audience to read.

Use big beautiful images

As we mentioned, it’s always possible that your images aren’t going to be seen. But if your marketing is good enough, your subscribers will allow your images to be shown. After all, we are visual creatures, we want to see pretty pictures!

Graphics stimulate readers and are able to convey multiple emotions that text cannot elicit in such a small space. The use of relevant, alluring images will engage your audience. 

This is especially relevant for e-commerce stores showcasing certain products. Since customers can’t see, feel, weigh, or try out your product, the more “real” your photos are, the more likely people are to buy.

Videos

Unfortunately, at this point in time, many of the popular email clients don’t allow videos embedded into email bodies. And attaching a video isn’t going to give you good results (plus it can usually only be 25mb). 

The only way surefire way to incorporate a video into your email is to provide a link to wherever your video is hosted (YouTube, your website, Instagram, etc.) The most effective links are thumbnails with play buttons. 

But be sure you want to send your readers away from your email, video links should be treated like CTAs.

GIFs are a great alternative to video if you want to add some motion in the body of your email, as they are supported by nearly all email clients. Just try to keep them around 1mb or less.

 

gifgifGifs are fun 😉

Before Hitting Send

Be sure to test your email out on a range of devices, operating systems and email clients. This includes mobile phones, tablets, Android, PC, Windows, iOS, Gmail, Outlook, etc. 

This is a time-consuming process at first, but after a while, you’ll learn what works and what doesn’t, and it will become easier to create designs that work no matter where, when and how they’re opened.

 

For a limited time only, we're offering free email marketing assessments to individuals and businesses looking for ways to increase their ROI.

New call-to-action

Tagged Design, digital marketing, email, email marketing, good design