Learn how to design emails that work on every level. Particularly your audience’s.

EMAIL DESIGN: A guide for savvy digital marketers

1

Your newsletter’s design does more than just contain your company’s offers or content. When you think about the format, layout and appearance of your emails, remember 3 key facts:

• Email design impacts your immediate results. The number of people clicking on your offers and content also depends on how you present that offer or content.

• Email design impacts awareness. We’ve seen how email contributes to brand awareness and the customer relationship. Your presentation plays an important role here, too.

• Email design is not the same as other kinds of design. If you design an email like you would a piece of direct mail or a web page, it won’t always work. The different ways email software and webmail services display email has led to email design having its own rules and principles.

/ EMAIL DESIGN: WHAT IS IT?

Good email design is a vital part of successful email marketing. In general, though, it’s considerably more limited than modern web design. Unlike a web browser, email clients cannot handle all the clever design elements, code and functionality you get on web pages. This applies both to installed software like Microsoft Outlook and web-based solutions like Hotmail or Gmail.

When you design a website, you only have four major web browsers to consider, so many website design elements have become standardised. Email, on the other hand, has a much bigger range of client software and far fewer standardised solutions.

And even if all software worked the same: an email newsletter isn’t a website, just like a movie trailer isn’t an entire film. A trailer attracts and creates interest, which the film follows up. So your email design is not about making a poorer (or simpler) version of your website. It’s about creating a vehicle that drives email response.

Fortunately, there are some simple guidelines that will help you easily overcome this challenge!

Sometimes marketers design an email template, test it in an email client like Outlook and then use it for their newsletter. Good plan, isn’t it?

Unfortunately it’s not just email software that behaves differently than a web browser. Many of the different email clients have their own unique display rules and ways of handling images and design code. A template might look great in Apple Mail, but odd in Outlook 2016. It might look fine in Gmail, but strange in Yahoo Mail. Your newsletter can look completely different depending on which system your recipients use. Anything that goes wrong with the design might affect their perceptions and, ultimately, your results.

A well-designed email template works everywhere. The only way to find out if your template belongs to that group is by testing. However, there’s no need to set up dozens of different systems in your office and check your emails in each one: instead, you can use stand alone email design preview tools or the preview tool built into many modern email marketing solutions.

TEST PROPERLY!

WHICH FORMAT?Why don’t more organisations send text-only emails to sidestep these design issues? It’s all about the first two facts we mentioned at the start of this chapter.

HTML marketing emails (emails featuring pictures, colours, different font sizes etc.) present a much more attractive, brand-friendly image to subscribers.

THEY ALSO GET BETTER RESULTS.HTML email also lets you include tracking codes that tell you much more about how people respond to your email.

So should you never send email that is only text? Certainly, plain text email comes across as more personal. As a result, some types of messages can occasionally work better when they are mainly text. (Like a “personal” note from your CEO, for example!) But even then, it makes more sense to send a HTML-like email, which looks like plain text but may still contain colours, small logos or emphasis.

/ DESIGNING HTML EMAILMany designers take their inspiration from their company website, letterhead or brochures when designing a newsletter for the first time. It’s tempting to use entire sections from your website or stylish, spectacular graphics from earlier print materials. You have to be careful though: like we said before, email is a form of communication all its own.

Generally speaking, you should always use a clear and simple graphical form with at least some text. Have a lot to say? Don’t put it all in the email. Instead, tease the reader into clicking on a link and visiting your website. Provide a clear and easy path to where an action can take place.

(All participants in the study first read emails in the preview window, which we’ll talk about on page 9.)

The left-hand column gets 80% more attention than the right-hand column.

You only have a matter of seconds to grab and engage the reader, so eye-catching head lines, images and text need to be near the top of the email.

Almost 40% of the viewing time is spent on headlines!

To give you some idea of what to focus on, consider the results of an APSIS eye-tracking study, which looked at how people read emails on a computer:

40%

80%

/ A TYPICAL NEWSLETTER LAYOUTThere is no single approach to the look of an email. What works for one sender and their subscriber list may not be appropriate for another. It’s always important to test what you do yourself, rather than blindly follow what others are doing. That said, our example here is typical of many successful newsletters:

Ever wondered about how triggered emails work?

Open this email in your browsern

Maximize results with smart triggers

Boost your sales through leads

The best emails aren’t just relevant: they speak to your head and your heart. With APSIS Pro Trigger, you can personalise emails based on your subscribers’ behaviours and preferences – and fully automate the process going forward.

Discover the ways of Trigger

Taking care of your leads is important. This is why we’ve developed our APSIS Lead solution.

Time to boost your sales

APSIS International AB Stormgatan 11, 211 20 Malmö, Sweden

This newsletter is sent to john.doe@apsis.com, if you wish to stop receiving our sendings – please unsubscribe here.

2

3

4

5

6

7

8

9

10

1

Ever wondered about how triggered emails work?

Open this email in your browsern 2

3

1

1. PreheaderThe preheader is the first item to appear in the newsletter. It should be used to get the email’s main message across or invite further reading. It’s often displayed in the inbox itself (at Gmail for example, or in many smartphone email clients), so it’s also like an extension of the subject line. Preheaders can provides useful clues as well if your images are blocked, so it’s quite important.

2. Link to a online version of the newsletterThis links to a copy of the newsletter on a web page. Some people like reading emails in their web browser. (It’s also a fall-back option for when your design gets messed up by your subscriber’s email client.) Whatever happens, they can usually still click on this link and see the email as you wanted it to look like.

3. Header/senderAn email is more likely to get attention when the reader knows and trusts the sender. Help them recognise your emails by putting your company name and/or logo in the header; but don’t go to extremes, since it’s the actual content that’s important they’ll be interested in.

4. Headlines and subheadingsThese are real attention-grabbers, and very important for getting people to read more, or click on something. It’s well worth spending a bit of time to find the right wording for every one of your headlines and subheadings.

5. Teaser/lead textThe lead text under your headlines grabs your readers’ interest and sets the tone for what will happen after they click to read more. Remember: a short, clear teaser is usually better at capturing clicks than a long, rambling summary. (You can also build links into this text as an added bonus!)

6. CTA linkThis is your clear call-to-action. Many marketers don’t bother to think too hard about these links, and simply put ”click here” or indeed just ”read more” as the button text. Stand out by taking time to test more appealing versions, like ”save now” or ”discover the answer”.

7. ImageNewsletters with images look and work better than plain text mails - provided you use the right images, of course! Even so, images are one of email designers’ biggest challenges, because email clients don’t always display them properly. We’ll examine this issue in more detail on page 11.

Maximize results with smart triggersThe best emails aren’t just relevant: they speak to your head and your heart. With APSIS Pro Trigger, you can personalise emails based on your subscribers’ behaviours and preferences – and fully automate the process going forward.

Discover the ways of Trigger

4

5

6

7

8. Background colour or imageImages that frame the email often look nice on a sketchpad, but it’s quite tricky to make them work properly in email. It’s best to stick to a colour or minimal pattern instead.

9. Links for unsubscribing, sharing and contact informationUnsubscribe links, sharing links (to social networks or a tell-a-friend email form) and contact links can go in email footers, sidebars or near the top of the content. Whatever you do, it’s important to clearly show how a recipient can cancel a subscription. That’s also a legal requirement!

10. FooterQuite a few of your subscribers will read all the way down to the end of the newsletter. This is a good place for important administrative information, such as clear contact details that say you are a serious sender who would like to invite others into a dialogue.

Boost your sales through leadsTaking care of your leads is important. This is why we’ve developed our APSIS Lead solution.

Time to boost your sales

APSIS International AB Stormgatan 11, 211 20 Malmö, Sweden

This newsletter is sent to john.doe@apsis.com, if you wish to stop receiving our sendings – please unsubscribe here.

8

9

10

/ PREVIEW PANE – THINK ABOUT YOUR EMAIL’S TOP LEFT SIDES!Many people read emails in their installed email client’s preview pane. This is a small window that displays part of the email, so people can decide if they want to scroll further or open the message in full. Many email clients, like Outlook or Apple Mail, offer such a preview - often as the default display.

The preview pane normally shows the top and left sides of your email. This doesn’t mean you should cram everything into that area, but it does mean you should think about what will show up there.

Remember that most readers are wondering whether they should bother looking at your email. The preview pane plays an important role here, in combination with the “from” field (who sent the email?) and subject line (what’s in the email?).

So the preview should help people recognise that the message is coming from you (hopefully they’re looking forward to your new offer or content!), and give them further reason to pay attention. This is why many marketers put a logo or slogan up in the top left corner and use a preheader to entice people into reading further.

Of course, if you keep your logo and preheader small, then some of your actual content should show up in the preview too, which is also a useful tactic!

USE OF HTML AND CSSMany email clients can’t handle popular design features you find on websites, since they lack support for the relevant HTML and CSS code.

If you’re used to working with modern HTML and CSS, you may be a little disappointed when you begin working with email design. Some say it’s like going back ten years in time...

Our main tip for you is to keep things as simple as possible. The further you move away from basic HTML and CSS, the more likely you are to run into trouble with poor support from one or more email clients.

Of course, sometimes you can come up with clever solutions to get some feature to work in a particularly difficult email client. Unfortunately, email software and webmail services constantly change their way of handling email display. So a workaround that solves a problem today might not work six months later.

The good news? If you don’t want to design your own emails from scratch, there are many templates, tools, services or designers that can take care of them for you.

Most professional email marketing solutions come with their own email templates, built specifically to work with most email clients or webmail service, so you can simply adapt it to your own needs.

USE WEB-SAFE FONTSThere is mixed support for special fonts in email clients. It’s best to stick to web-safe fonts like Arial or Verdana.

If you really need a special font, you can display the text as an image - the only problem is the risk of image blocking, which we discuss on the next page.

AVOID FLASH, JAVASCRIPT, FORMS ETC.Scripts are not suited to email. If you design an email with Flash animations, few recipients will see them properly.

Although there is support for JavaScript in some clients, such scripts are often blocked for security reasons. Traditional survey, registration, search and login forms do not always work in all the popular email clients. The bottom line: avoid Flash at all costs and use links to take people to relevant forms on your website.

TEST, TEST, TESTEven if you’re using a pre-built, professional template, it still pays to run every newsletter through a design preview testing tool before you send it out. There are so many small differences between clients that even the best templates can sometimes cause display problems.

/ PREPARE FOR IMAGE BLOCKINGAs you’ve probably noticed, many email clients and webmail services block images from displaying by default.

Users can activate images manually, or set up rules that mean images from particular senders are displayed, but the ugly truth is that a proportion of your readers are probably not seeing your lovely images. This has two consequences for your email design:

• You need to make sure the email still does its job when images aren’t displayed.

• Since you put those images in there for a reason, you need to encourage readers to unblock images.

INCLUDE HEIGHT, WIDTH AND ALT ATTRIBUTESIf you want to keep the layout the same with images blocked, then ensure your image code includes height and width information. That way, most software will at least display something of the same size as your original image, even if it’s only a blank rectangle.

In the email code used to specify which image to display, you can also define a so-called ”alt attribute”. This tells the email client what text should be displayed in place of the blocked image, and most clients will comply with this instruction.

This alt text is very important, as you can use it to compensate for the blocked image. You can describe the picture or use this text to encourage readers to unblock those images.

BALANCE IMAGES WITH TEXTWhere possible, important information like headlines, calls to action, links etc. should be in the form of HTML text, not (just) an image. This means your readers still have access to this information when images are blocked. Just look at the examples on the next pages...

With grilled shrimps and Parmesan bread. A Caesar salad without chicken? We seek inspiration from the archipelago and offer salad with seafood delicacies.

A pasta salad without chicken? We seek inspiration from the archipelago and offer salad with seafood delicacies.

Here’s a newsletter that isn’t optimised for image blocking. See how the large top banner, blank image-based headlines and lack of alt text mean a lot of the impact is lost.

Here’s the same email with text headlines and alt text. The impact is much nicer. You could even revise the layout completely to account for image blocking by placing the images on the right, for example. If they don’t show up, it’s not such a big deal. All the text is still prominently displayed on the left.

With grilled shrimps and Parmesan bread. A Caesar salad without chicken? We seek inspiration from the archipelago and offer salad with seafood delicacies.

A pasta salad without chicken? We seek inspiration from the archipelago and offer salad with seafood delicacies.

CAESAR SALAD

PASTA SALAD

Here’s our great and tasty salad!

Tasty Caesar salad with grilled shrimps and Parmesan bread.

Our Tasty Pasta salad, yet again!

ANIMATIONPerhaps surprisingly, many email clients and webmail services support animation and video.

OPTION 1: GIF ANIMATIONSStandard GIF animations work in the vast majority of email clients. Please note though that Outlook 2007 and 2010 only display the first frame of the animation. This means that animated GIFs are safe to use, provided you make sure the first frame looks meaningful and conveys the message you want to express, in case it’s displayed as a static image.

Done well, a small, smooth GIF animation can also look like a video, which will please your recipients even more!

OPTION 2: THE LINKED VIDEO SCREENSHOTAnother option is to use an image to encourage people to click through to the video:

• Capture a static shot of your video playing in a video player. Make sure the captured image is one that looks interesting and engaging.

• Place a clear ”play” icon in the middle of the picture.

• Put the image in the email and link it to the web page hosting the video.

If someone clicks on the ”play” button, they will go to the appropriate web page where they can watch the video. Give the image a good headline and call-to-action. Include a text link and alt text for when the video image is blocked.

When you design an email, make sure the unsubscribe link is easy to find and use. Giving readers the opportunity to unsubscribe easily from your newsletters is an integral part of permission-based email marketing. It’s also a requirement of every anti-spam law we’ve ever come across.

A clear link for unsubscribing creates trust: the knowledge that you can quickly and easily unsubscribe is important. Otherwise you can feel trapped or imposed upon.

Plus, if someone cannot easily find or use your unsubscribe link but want to stop getting your newsletters, they will simply mark your emails as spam or junk mail. If this happens enough, it can lead to your emails being blacklisted.

In particular, avoid putting the unsubscribe link in an image, since it won’t appear if your images are blocked. Most subscribers expect to find the link in your footer. Some senders have found placing a second, more prominent unsubscribe link nearer the top of the email also has a positive effect, but this is something you should definitely test first.

/ DON’T HIDE THE UNSUBSCRIBE LINK!

DESIGN FOR MOBILE, TOOThe latest challenge for email marketing is the growth of mobile email. According to analysts, more than 1.4 billion smartphones were sold in 2015, and email is a hugely popular smartphone activity. For example, a Google survey found that 63% of Swedish smartphone owners check their email daily.

Smartphones and other email-friendly mobile devices are spreading so fast that it’s hard to find up-to-date statistics about their use. What we do know is that a lot of your subscribers will view at least some of your email newsletters on a smartphone, an iPad or similar. This is important because increased mobile email use means:

• People are viewing emails on small screens and a greater variety of software systems (as if we didn’t have enough issues with traditional email clients!), and

• People are viewing email in different places and at different times: not just in the office between 9am and 5pm, but in bed, the bathroom, the train, etc.

OPTION 1: DO NOTHINGDoing nothing is an option because smartphones, iPads etc. are all actually very good at displaying email. A few years ago, mobile phones were notorious for how badly they handled HTML email, but this is no longer the case.

Standard email design assumes people are sitting in front of a decent-sized monitor and using a mouse. A more mobile-friendly email design that accounts for smaller screens and touchscreen control will get a better response from mobile email users. Doing nothing is actually a missed opportunity.

Emails that aren’t mobile-optimised display accurately on small mobile screens, but hardly make a good first impression. And first impressions count even more for mobile email users, who often flip quickly through their emails in a spare five minutes.

SO HOW DO YOU ACCOUNT FOR MOBILE EMAIL USE IN YOUR NEWSLETTER DESIGN?

OPTION 2: MOBILE-FRIENDLY DESIGNA pragmatic solution would be to make your email template more mobile-friendly. The aim is to get the template to work fine, whether viewed on a desktop or a mobile device. What makes an email mobile-friendly, though?

• The narrower the better. Consider using one-column layouts, not exceeding 500-600 pixels in width.

• Make sure the email opens strongly. Small screens may only display a small portion of the email, so the preheader, logo and topmost content should take up as little space as possible, but still grab and encourage attention.

• Use larger fonts and ensure contrast between text and background colours, so words are easier to read.

• Keep content to a minimum, so it’s easy for readers to grasp the important material and then take the required action.

• Put plenty of space around links and make them clear and easy to notice.

This last point is especially important because mobile users don’t have a mouse. They manipulate your email on a touchscreen, using their fingers and thumbs, which are much less precise than a mouse.

If you place links too close together, it’s hard to ”click” one without accidentally touching the wrong one. Apple recommends a target area for each link of about 44 x 44 points.

People can’t tell when something is a link by hovering over it with their finger, either (unlike when you hover over a link with your mouse cursor). That’s why links have to be very clearly, obviously marked.

Of course, there’s one problem with making your template mobile-friendly. You’ll never have the perfect mobile email experience, because you still want a template that exploits the advantages of desktop email. You’ll never have the perfect desktop email experience, either, because you’re trying to make your template mobile-friendly.

To sum up: this solution is pragmatic, but not ideal.

What we really need is a single email template that adapts to the display environment. It should take a mobile-friendly format when viewed on a mobile device, but a desktop-friendly format on a traditional PC monitor. Responsive design makes this possible.

If you have access to professional design resources, you can build your email using responsive design principles.

This means that your email design will automatically adjust to the viewing environment. So the email might use a one-column format when viewed on a small screen, but a wider format on a bigger screen.

Designing emails for this kind of flexibility does, however, require a solid understanding of such things as @media queries, CSS and the special requirements of different email clients and systems.

Fortunately, at APSIS, we have two options if you want to create newsletters for mobile users: Mobile Headlines and Mobile-Optimised Template.

OPTION 3: RESPONSIVE DESIGN

/ MOBILE HEADLINESThis approach displays a ”for mobile” message that is only seen when recipients open the newsletter using the default email clients on their iPhones or Android phones. Other recipients would see your ”normal” newsletter.

The mobile-only message consists of a single, clickable call-to-action image, which you could choose to link in one of three different ways: A click might open a website in the phone’s browser, activate a phone call to a specified number, or create a new email to a specified email address.

This approach is especially suitable for email and newsletter campaigns that are informative and action-oriented, since the image is always linked to a specific, linked call-to-action.

/ MOBILE-OPTIMISED TEMPLATEOur Mobile-Optimised Template service automatically adapts your email for mobile devices. It customises any newsletter to a single column layout, making it easy to read even on a small screen. This is especially useful if you know that a large percentage of your recipients open your email on their mobile devices.

A great new feature of this service is the possibility to use non-web-safe fonts. This means that it is possible to use fonts that previously were impossible to use – giving mobile readers a great visual experience.

Non-responsive Mobile Headline Responsive

BE ACCESSIBLEOne aspect of design many people forget is the need to make your newsletter accessible to everyone, including those with an impaired ability to view or read your email.

A lot of our suggestions for mobile-friendly design and image blocking also help with accessibility, for example:

• Clearly mark and label links.

• Choose colours that provide high contrast to improve readability.

• Use large, readable fonts.

• Avoid text in images, which are hard for text-to-voice readers to understand. Make sure you have alt text in your images, too.

Include a link to a web version of your newsletter, so that anyone who wants to can read your mail in their browser. That makes it easier for them to change font size or use a text-to-speech tool.

SUMMARY

Email design: what you need to know.

• The main challenge of email design is that email clients and webmail services have their own ways of displaying emails. This means that many features and design tricks available to website designers don’t work in email design.

• Design your email to grab attention - help people find and click on your links.

• A typical newsletter design consists of:

– Preheader

– Link to an online version

– Unsubscribe/sharing/contact links

– A header area with a logo or title

– Headlines

– Teaser/leads

– Links

– Images

– Background colours or images

– Footer area

• Make sure the top left area of your email contains sufficient information or design elements to let people recognise your email and grasp why they should look at it more closely.

• Design the email to still get your message across when images are blocked from displaying. In particular, ensure images are coded with an alt attribute: the text that shows up instead of the blocked image. Use that alt text to describe the image or encourage the reader to unblock the images.

• Make sure the unsubscribe link is easy to find and use.

• Consider adjusting your design to account for mobile email users, for example:

– If you have the know-how (or can access the know-how), use responsive design, so the email adjusts automatically to the viewing environment.

– Use a narrower layout, with key information right at the top of the email.

– Increase font size and ensure good contrast between text and background colours.

– Make sure links have plenty of space around them so people can use them easily when viewing on a touchscreen.

We hope you’ve found this whitepaper useful!

For more tips and trends in email design, sign up for our newsletter at www.apsis.com. As well as practical insights and inspiration, you’ll also learn about our seminars, webinars and other events, as well as our latest product updates.

GOOD LUCK AND GOOD EMAILING!

LOOKING FOR MORE EMAIL DESIGN INSPIRATION? CHECK OUR BLOG!

WE’D LOVE TO SHOW YOU MORE...Discover how simple digital marketing can be. Contact us directly at hello@apsis.com, and one of our experts will demonstrate all the email design possibilities of APSIS Pro for you.

Phone: APSIS HQ +46 40 24 97 70

APSIS.COM

GET APSIS MORE

Want to stay updated?

Sign up for our newsletter: