The ultimate guide to email design

by | Tue 19 May, 20

UX design for email

In the last few years, UX has become a buzzword.

In short, it’s something that creative trendy types like to put on their LinkedIn profiles and CVs to show they are ‘on trend’, and can charge an extortionate amount of money for, BUT
 what does it mean, and more specifically, what does it mean in the world of email design.

There’s a tonne of views and articles online about UX design, but if you boil it down, it comes down to designing around the end user; the person who matters = your customer / subscriber. Instead of looking through the filter and viewpoint of a designer, you are looking through the filter of the customer, asking questions to determine if this appropriate.

To design something visually amazing is a talent in itself, but it’s just a part of the big picture.

To understand UX, let’s think beyond graphic design and look at product design.

At some point, you will have tried out a piece of ‘desirable’ tech and come away thinking; this is great, but the execution hasn’t been properly thought about. The tech looks great, it’s the latest fad, but it’s entirely impractical and the actual day to day use is a real let down. On the flip side, you’ve probably used something day after day, it’s practical, it’s somewhat ugly, but it just does the job!

Great design looks at both the visual aspect and the real world practicality.

I don’t want to come over as an Apple fanboy, but Apple nail this. From the moment you unbox the device, see the beauty of the product design, to the day to day use. It just works.
In the context of email design, here’s the basic questions each role asks:

Email design

Does it look good?
Are the fonts and colours on brand?

Email UX

Who’s reading this?
How will they respond?
UX is less about “making things look pretty”, It’s about solving problems and improving usability, and accessibility.

Email design trends in 2019

The famous Russian author, Leo Tolstoy once said; “If you want to do something, do it well. If you can’t or do not want to do it, better don’t start at all”.

No words ring truer when it comes to email design. While taking the time to actually put some content together and creating a quick template might be classed as progress to some, will it honestly do your brand justice?

The truth is, the art of email design shouldn’t be undervalued. In fact, businesses who take the time to make a quality email marketing campaign average a £24.93 return for every £1 spent – so it pays to get it right.

With this in mind, I’ve pulled some key email design trends I think are destined to cause a stir in customers’ inboxes in 2019.

Open compositions

A growing theme within the email design community is a new-found love for open compositions. This effect is used to cut parts of an image off to create an illusion that the email continues out of shot (or composition).

Combine this image effect with a simple white background for a minimalist appearance and to draw attention to the product itself.

Full-width images

If you’re looking to showcase a new flagship product, include full-width images of it throughout the email. It’s a perfect excuse to capture different angles, colours and features in an ultra-modern and chic way. For inspiration, just check out any product email from Apple.

Using illustrations

Another email design trend picking up speed among marketers and businesses is the use of illustration and graphics. Switching from real photographs to illustrations allows a brand to offer a softer and more customer-friendly side.

What’s more, it helps the readers engage in the content right from the start too. I mean, who doesn’t love a cartoon?

Cool typography

Hero images don’t always have to contain standard fonts. This year, there’s a good chance you’ll notice more businesses experimenting with typography to entice readers to scroll down and take action.

5 email marketing trends that will dominate 2020

Struggling to think of new and exciting ways to draw people into reading your emails? We’ve compiled a list of the top 5 e-mail marketing trends that proved to be effective in 2019 to spark your creativity.

1. Sticking with large hero images

Traditional e-mail marketing has tended to have a central hero image at the top of the e-mail and it seems this isn’t about to go away. People are captivated by this first image, so it’s important you select the perfect one. But don’t go off-brand! If using stock imagery, remember to keep in line with your brand’s theme, message and identity.

2. Spell it out with outlines

Consumers love to click on products that are outlined, typography, buttons, important messages – you can bet that readers are likely to be clicking on anything that is outlined.

Outlining is an easy way of visually drawing in consumers to focus on the important things. It’s no surprise seeing as though for years we have been taught to ‘sign on the line,’ or ‘tick the appropriate box.’ We love to be told where to go!

3. Symmetry is here to stay

A trend that’s here to stay – in 2019, we’ve seen that symmetry is still an essential requirement for any email. Consumers tend to have an easier time reading emails with evenly distributed content between the left and right borders of the email.

4. Go beyond the borders

Speaking of borders, in 2019, consumers have been inundated with large images that look as though they’re going beyond the borders of the email and beyond what the viewer can see.

This effect is created by showing just part of an image, text or design elements, while the rest of the contents are left out of the composition and out of sight. The intention? To leave the reader wanting to see more and clicking through to your site!

5. Typography: The bigger, the better

As marketers have been searching for new ways to capture the reader’s attention, 2019 has seen a huge spike in large typography requests. With big lettering at the start of an e-mail, as a marketer, you know that it is almost impossible for the reader to ignore your message.

But keep it short – people don’t want to read streams of text. Select a short and catchy phrase, choose a large font that stands out against your hero image and it’s sure to pop!

Examples of great email design

Marketing is absolutely crucial when it comes to teaching people about what your business does, why you do it, and how it can benefit them as the potential customer.

However, your marketing is far more than the words you produce; when you are sending out emails, for example, the way the email looks is just as vital as what it says. If the email looks ugly then the recipient isn’t going to read what you have to say, are they?

So, with that in mind, what are some great email campaigns that you should be aware of?

1. Uber

Uber is a great example of email marketing

Uber’s campaigns are some of the best in the world, and that’s for one very obvious reason; they are incredibly simple. The company’s marketing tends to minimise the use of text and utilise pictures, while also giving the recipient a very clear idea of why they have received the email and what actions they can take on the back of it. It does the job, it is very clean, and it is effective.

2. Buzzfeed

Buzzfeed example of email marketing

Buzzfeed regards itself as a progressive and savvy company, and that means it lives and dies on the way people perceive it. The company has designed its email campaigns to ensure to be at once effective and bespoke; when you open an email from Buzzfeed, you can be in no doubt who’s sent it to you. The actions the email wants you to take are obvious – they want you to read articles – and the headlines used are well designed to entice you to make a click.

3. Nike

Nike's example of email marketing

Nike has a vast bank of email addresses garnered from people who’ve previously made purchases on one of its sites or people who have actively signed up for email updates. It has a captive audience, and so it can afford to use colour, images and snappy text to get its message across. Nike is a very cool brand and its emails reflect that.

Launching email campaigns that your customers will appreciate is not always an easy thing to do, but it is something you must dedicate time to. Companies such as Mail Ninja, with a long history of providing email marketing services that make a difference, can help and will be able to advise you on what you’re doing right, what you’re doing wrong, and how you can improve your output.

Email design for mobile

A majority of internet users access online services through smart mobile devices. Email marketing services have had to recalibrate their marketing strategies to reach and engage mobile users.

Designing emails for mobile platforms has proven quite challenging, given the diversity in design, size, and performance of mobile devices. However, there are some fundamental essentials when it comes to designing mobile-friendly emails.

Keep things simple

Due to the limited display size of mobile devices, it is necessary to keep the abundance of email elements at a minimum. Make the email short, precise and to the point. Besides, complex email structures with numerous features only increase the number of things that could go wrong. Exercise minimalism in the design while ensuring that the email’s objective is clear.

Mobile-friendly layout

Design a single column template for your email with a width scaling of between 320-550px. This ensures that the template renders perfectly even on small displays.

A majority of people are right-handed and use their dominant hand to interact with their smartphones. This means that more attention is drawn to the left side of the screen than to the right. Put more elements and text on the left-hand side of the template and leave a reasonable blank column on the right for scrolling. This is called left flushing.

Also, it’s always a good idea to add a bit of padding all around as a responsive design measure so that no elements are clipped on small screens.

Make links and CTA prominent

Buttons and links are crucial elements of marketing emails, which may go unnoticed on mobile devices. Highlight clickable links using borders, outlines or creative colour schemes to make them prominent and affordable. Also, ensure that they are adequately sized and padded for easy tapping. The same goes for CTA statements; customise the typography to make CTAs easily visible and legible.

Customise fonts and images

When it comes to text, use 22pt font for headers and at least 14pt font for the body. Write only between 3-5 properly spaced lines and avoid clutter in the text area. This should make the words easy to read and navigate.

Images don’t pose much of a problem with responsive email design. Most mobile email clients scale images depending on the screen size. However, it’s crucial to define the maximum width of the image to prevent cropping issues. Use large high-quality images, but remember to compress the media file to cut the email’s loading time.

Email design hacks to boost click rates

Are you worried that your click-through rate stats aren’t reflecting the hard work you are putting into your well-thought out email campaigns? Underwhelming click rates means fewer leads, so we have some essential email design hacks to boost click rates right here for you.

Are you asking for the opt-in?

If people aren’t even taking the time to open your emails, they’re never going to click on your links. The first step into improving your CTR is by going back to basics and getting subscribers to opt-in in the first place. Getting subscribers to voluntarily offer their email address shows you’ve piqued their interest. Try using a plugin integrated with Mailchimp services that will do the hard work for you. There are plenty of Mailchimp partners who can offer this service so have a search around for an opt-in form that suits your needs.

Ensure your email subject line doesn’t flop!

Research has proven that the subject line of your emails is a real make or break for subscribers. Writing an email subject line that sparks curiosity, triggers a fear-of-missing-out, asks questions or uses emojis are more likely to get opened, read and clicked through.

Be careful not to mislead your subscribers though. If someone opens your email based on the subject line and is disappointed with the content of the email, they may mark you as spam or unsubscribe from your list entirely.

Looking like a pro email marketing agency with killer formatting!

Getting the formatting of your emails right can potentially make a huge difference to whether someone reads your emails or completely abandons ship. Be sure that your emails are mobile-friendly, don’t have vital information hidden in the images (in case they get blocked by default) and is scannable with easy-to-read subheadings.

Brush up on your email content.

Find out exactly what your subscribers are wanting to read. By offering content that is of genuine interest to your subscribers, you are more likely to get a bigger open rate and a bigger CTR. Try putting out polls and surveys and ask your subscribers and customers what they’d like to read about.

Try these simple but effective email hacks to improve your email marketing services now.

How to use GIFs to maximise engagement with your emails

According to detailed research undertaken by Mailchimp, a little under 23 per cent of marketing emails are opened by recipients. But while many folks will have a quick scan of the contents, less than three per cent will actively click any embedded link to access further information.

That means email marketers literally have just seconds to engage the attention of their targeted audience. And in this day and age of information overload, few have time to read the contents of an email. So that means if a picture tells a thousand stories, then a moving image tells a thousand more. Enter: the GIF.

The GIF is nothing new but how you use it must be

The GIF (Graphics Interchange Format) was originally developed in the late 1980s with simple moving images but the animated source of amusement and engagement has only really come of age in recent years.

Human beings are inherently programmed to take notice of movement. Numerous studies have shown moving images attract attention much faster than static ones. Instantly grabbing a potential customer’s interest with a GIF they like increases the likelihood of browsing your email and clicking on any link(s) to find out more.

GIFs are short, which appeals to today’s attention-lacking online audience. Seconds-long content means people are more likely to watch a GIF than a video. A GIF shows and tells a story and viewers are more likely to remember their short punchy messages. A GIF makes a great teaser and is an effective way of creating an engaging Call to Action.

Where do I find some good GIFS?

There are plenty of awesome websites out there housing literally thousands of GIFS, with plenty to suit every message.

Giphy has been around for a few years and has quickly become a go-to resource for marketers seeking great GIFs. Giphy boasts that they have 300 million daily users. And news, website content and discussion forum Reddit is awash with GIFs as is Gifbin which categorises its resources for easy searching.

Create your own GIFs

It’s incredibly easy nowadays to create your own GIFs to help you stand out from the crowd. There are loads of online tools which allow you to do just that from videos, YouTube clips or combining separate image files into frames.

The aforementioned grandaddy of the GIF, Giphy has a simple GIF creator or you can use PhotoShop to make great looping animations as well as mobile apps like GiphyCam.

A GIF can convey a message and a mood in seconds. The most effective are eye-catching, designed to be small and with mobile users in mind. Engaging, fun and clever GIFs can really add an extra dimension to any email marketing campaign. To find out more, get in touch with us at MailNinja today.

Amazing call to action examples

The aim of most email campaigns is to influence. You want people to click on to your website, buy from you, enquire, register, visit or give you feedback.

Igniting a measurable behaviour means you need a clear Call to Action.

There are exceptions when organisations use email marketing services to inform or educate. However, they still need a call to action within the content, to log a response to the email and to measure effectiveness.

How can you find fresh, dynamic and unmissable calls to action, especially if you regularly use Mailchimp services?

Talk directly to the target audience

One of the best ways to make a CTA amazing is to personalise it.

Instead of ‘sign up’ or ‘click for more details’, you add ‘you can sign up here’ or ‘you get all the details with this link’.

If your MailChimp email campaign is aimed at a specific demographic, make the most of that too.

‘Over 50s like you, can click for more’. Or, ‘As you are a Coventry property owner, sign up now’.

Grey Goose vodka uses ‘Discover a cocktail tailored to your taste’.

Clickable words

‘FREE’ is an amazing call to action addition.

‘Sign up for free’ or ‘try it for free’ works. You could even say ‘lots of free advice for you here’.

How you noticed how many subscription services (like Netflix, Spotify and Disney+) offer a ‘free trial’ now? It is effective in getting people hooked!

Inspire an action

Some CTAs work by signalling people into measurable action. For example, ‘get started’, ‘learn more now’ or ‘join us’.

Dating site OKCupid simply uses ‘Continue’.

Humanising your organisation

This involves adding warmth and possibly even humour to your Call to Action. The invitation could be to ‘Start a great relationship’, ‘Talk to us’ or ‘Sign up, so we can work on this together.’

Running shoe company Brooks invites readers to ‘’Find out when we have more’.

Suggested urgency

Another way to make CTAs powerful is to imply urgency. ‘Send for details now’ or ‘enjoy this limited time offer here’ for example.

You could even turn a negative into a positive. ‘Are you in the dark/doing this wrong/missing out? Contact us to find the answer’.

The psychology of email button colours

Just like any animal, our eyes adapt to colours to assist us in our survival. From foraging in forests and spotting danger to finding precious resources like water and plants, there is a good deal of history and mystery attached to vision. In terms of marketing, this is also what makes decisions interesting, fun and creative!

Mixing things up

Nowadays many of our mental associations are mixed up with all sorts of modern references, shared culture, national ideology and nostalgic ideas. This means colour choices have the power to surprise us and introduce us to new things we may not be accustomed to. At the same time, it doesn’t mean that the basic colour ‘rules’ can be ignored, and certainly not the main one: To understand your target customers (with their particular preferences) as best you can. That way, they’re much more likely to respond as intended.

Button psychology

This, of course, also applies to buttons which are the elements most often designed to attract or be noticed in emails. However, it’s also true that a corporation’s campaign colours impose limits on designers. This doesn’t mean you can’t consider specific clients and match them with certain colours, but it means remaining recognisable, or in keeping with your brand, overall.

When it comes to email buttons such as a call-to-action button, its colour works best in tandem with 3 other things: form, placement and message. The trick is to align them all. With this in mind, follow general design principles. This includes designating a colour that complements the existing background in order for it to conform, yet stick out.

When it comes to large buttons, it can be wise to choose a colour that’s in keeping with the elements surrounding it, including the background. For smaller ones, you could choose much brighter colours.

The aim is not to deviate from the most simple psychological effect: ensuring the call-to-action button is easily noticed within the whole design but without interfering with it. After all, it’s the one button that has the power to increase conversions.

Test your choices

A final, vital rule is to remember to test out your colour and font choices on some of your recipients. This can really assist in gaining quality feedback: it’s what your campaign rests on. Their preferences matter and this, of course, extends to gender. There are studies that show men prefer brighter colours than women, who react better to softer colour choices and shades. Therefore, divide or segment your campaign further if possible. It can all add up when it comes to inviting them to push those buttons!

A guide to email-safe fonts

When you are selecting a font for your email, you need to be aware that there are various fonts deemed ‘web-safe’, and non-standard ones which may not be quite so trustworthy. Most experts will recommend that you use web-safe fonts because they are the most likely to look good on your contacts’ computers.

What’s it all about?

When a reader views your email in their browser or client, that application reads code that tells it which font to display. If the font you have used isn’t supported on their device, the browser will substitute it for a font that is available, and this can make your email design look all wrong. By choosing fonts that are already deemed to be email-safe, you have the maximum likelihood that your chosen font is available on the broadest range of devices. This means your email is less likely to appear different from how you intended.

The following fonts are considered to be email-safe:

  • Arial
  • Comic Sans MS
  • Courier New
  • Georgia
  • Lucida Sans Unicode
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

The most popular email clients in use all support these fonts. This includes Apple Mail, Gmail, Samsung Mail and Outlook, so you will have the majority of your bases covered. Most email applications will only list the email-safe fonts among their options, but if you want to use custom fonts you can do it with Google Fonts. You will need to edit the @font-face in CSS. Here’s how:

  • Find the URL for loading your chosen font in Google Fonts.
  • You will find it is loading your chosen font at the URL, so copy the code for it from the CSS.
  • In your email HTML template, add a block in the and set the font-family.
  • Add in any fallback fonts to cover your bases on devices that don’t support your chosen one.

There is a more detailed demonstration of this process available here, so feel free to follow those instructions if you have any problems.

At MailNinja, we’re the experts in everything to do with email marketing. We’re the UK’s leading email agency and Mailchimp partners. We want you to get the maximum benefit from your emails, so if you need some help then please don’t hesitate to get in touch. We’d love to hear from you!

MailNinja arrow down

Join 25,000+ marketers — Subscribe to blog alerts ⚡

TBC

Subscribe to blog alerts ⚠

[fluentform id="24"]