Electronic mail aka email, as a communication tool, is great for delivering messages to people across the globe and is still hugely relevant despite developments in private messaging and social media. It’s among the oldest communication tool on the Internet and is still heavily used despite it being at times perceived to be stuck in its birth decade, the 90’s. However, email is far from dead, in fact, you could say that the proliferation of smartphones has helped increase its popularity as a communication tool. Current industry trends indicate over 55% of all emails are now being opened on mobile devices and so far in 2016 Movio Cinema has seen almost 60% of all email being opened on a mobile device.

However, when it comes to email it is unlikely that you are always going to be able to execute all of your wildest marketing and design dreams. Let me explain further. For example functionality like embedding video or fonts are not greatly supported. This is due to email clients (e.g. Gmail, Outlook, Yahoo) wanting to provide a virus-free inbox for their users, so they do not cover more than the most basic HTML and CSS. This obviously complicates things when designing and coding emails. The support for different functionalities also varies between email clients; so what works for one may not work for another. To a designer, this means testing, more testing and even more testing. So, having worked with emails for some time now I’ve become quite familiar with their quirks and wanted to share what I’ve learned.

Below I’ve outlined a few dos and (even more) don’ts to keep in mind when planning your next great marketing email template.

Do

1. Optimize for mobile!

I can’t emphasize enough how important this is with more than half of emails now opened on a mobile device. Not providing support for mobile might prove costly as you’re not creating the best possible experience for your recipient. People want, and should have, easy access to information which an oversized email on their small mobile screen isn’t likely to provide.

Responsiveness is one of the answers to this problem. Responsive emails adjust to the width of the screen by stacking and resizing objects and images. The great thing about this is that you can allow more space for important objects like buttons. Responsiveness is based on CSS media queries and is supported by most mobile email clients. Media queries allow you to set different styling rules for desktop and mobile devices. You can, for example, make the font size larger for mobile and change the overall layout to suit smaller screens. However, there is one major client, that doesn’t support this functionality: Android’s Gmail App. With Gmail App you can either go hybrid (scroll down to read more on this method) or mobile friendly. The mobile-friendly approach is highly recommended as it’s more reliable of the two and allows for a few more design options, plus it’s simpler to execute.

What makes an email mobile friendly?

Mobile friendly email resizes the width of the entire email (typically 600px wide) to fit the width of a mobile screen. This means everything just got a whole lot smaller, which means you need to design everything a bit bigger. Hence, these kinds of emails generally avoid very small content in order to provide the full experience for all recipients. For example displaying more than three columns may cause difficulties for users with small screens.

The below image shows how mobile friendly and responsive emails differ on mobile, whilst looking the same on desktop.

The good news is that on iPhone media query support is divine. Based on a recent analysis iPhone takes a leading 33% of mobile opens compared to Android’s 10%.

2. Make it pretty

A sure way to impress and have your audience engage with your email is to look good. People do judge a book by its cover so invest in making a positive first impression. In email, it can be challenging as you only have around 10 safe font options to choose from (examples below) not to mention all the other stuff you can’t have like videos, cool interactive effects, Google Fonts etc.

Keeping it simple usually helps. The current ‘flat design’ trend also applies in email, making it easier to build modern looking templates with very basic methods. Besides, the less clutter you have the better the email tends to render across different platforms. Broken emails will definitely be a turn-off for your recipients and won’t look very professional.

When it comes to looks, branding is important. Make sure your emails are in line with your brand and consistent so your recipients will instantly know who they are from. An overall unified look across different platforms makes your brand appear clear and recognizable not to mention competent.

3. Personalize and surprise

Increase the wow factor by getting personal and targeted.

Well thought out subject lines and preheader text may play a role in grabbing your recipient’s attention out of dozens of emails but you shouldn’t stop there. Make sure you keep the good vibe going by giving the recipient what the subject and preheader already promised. Make the message look like it’s meant for the individual. Our blog post 3 golden rules for successful email marketing digs deeper into how to get the most out of your emails.

The structure of your email plays a role, too. Use the top section to raise interest and include your most important message there. Selecting content based on an individual’s interest is a big plus. Movio Cinema is designed for targeting; e.g if your recipient has watched Avengers: Age of Ultron and/or Jurassic World they may well be keen to see Captain America: Civil War so be sure to take that into account when sending your next email communication.

Last but by no means least, give your emails personality. Most of the marketing emails I receive in my inbox are left unopened but if there’s something different about the messaging i.e. my name is addressed or the subject line has more imagination to it I’m far more likely to be interested and click it open.

Don’t

Note: some of the below techniques might work well depending on the type of email and the demands they need to fulfill. I’ve outlined these approaches because they aren’t that widely supported and can sometimes be unreliable or restricting.

With email it’s best to keep things simple!

1. Go too big or too small

Size matters in the world of email. If an email is too large it can cause various viewing problems. For example, on some email clients horizontal scroll bars appear when the opening window is smaller than the email itself. In order to avoid this occuring keep the maximum width of the email to 600px as it does feel like a bit of a deal breaker if some content gets cut off when opening an email.

On the other hand, content that is too small might annoy its reader. The less columns the better usually – a simple single column layout is often enough for delivering an effective message. The least you can do is try to avoid going over three columns. If the email needs to include smaller content make sure all text is legible and images still look good and always consider mobile. Think about what content actually matters; do you really need to include every single image/story in that one email? The more content the longer the email becomes, meaning more scrolling for the recipient, so you’ll likely lose engagement.

2. Rely on images

Designers and marketers often rely on images within emails to allow for more design options, such as including special fonts for example. This may be a risky practise, as some email clients tend to block images preventing your recipient from seeing them, meaning that instead they will be faced with an empty space which may make the email look less appealing. Or even worse the email will end up in spam folders. When images are blocked your only hope is to impress with words.

If you use images, it is advisable to include your key message in plain text to make sure it gets delivered. It is also good to avoid using images as calls-to-action since they may become invisible if the email client blocks images.

To summarize, a good approach is to keep the balance right: include eye-catching images but keep the main communication and calls-to-action in plain text and HTML.

3. Use video

The majority of the most popular email clients don’t provide support for embedding video in an email. This is frustrating for those working in the film industry with the importance of sending out trailers and cast interviews. The good news is that you can always use a still image with an imaginary play button that directs the user to a site playing the actual trailer or video.

4. Design with out-of-the-norm fonts

Typography can prove a bit dull when dealing with email as only the basic web fonts are supported across different email clients. Here’s a handy list of the most reliable email fonts:

• Sans-serif: Arial, Arial Black, Tahoma, Trebuchet MS, Verdana
• Serif: Courier, Courier New, Georgia, Times New Roman

Depending on whether the recipient is a Mac or PC user some other fonts may be available:

• Mac: Helvetica, Lucida Grande, Geneva, Times
• PC: Impact, Lucida Sans Unicode

Luckily, with HTML you can choose multiple fonts from which the best suited option is automatically selected. For example, having Arial as a fallback for Helvetica is a good idea. In your HTML it would look like this: “font-family: Helvetica, Arial, sans-serif” – “sans-serif” being the last option displaying any sans-serif font if none of the mentioned ones are available. This makes sure that the font is somehow in line with the chosen style in case the selected options aren’t available.

5. Go hybrid – unless necessary

The hybrid method may seem like a gift from above when tackling Gmail App’s issue of no media query support. The approach is designed for coding responsive emails without relying on media queries, which basically means ‘cheating the system’. This may work well if your layout is quite simple, e.g. using only one column. Unfortunately, making the email look nice with this method can be quite challenging and time-consuming.

The hybrid approach relies on flexibility, in other words applying percentages based on the width of the device screen, so it does not allow for separate rules for desktop and mobile devices. Percentages bring a lot of challenges since it’s relatively hard to control their exact behavior on multiple email platforms. Also, some functionalities like changing font size for mobile or hiding content aren’t achievable with this method as they require media queries. But by describing the layout in percentages of the screen width (which is different for computers and mobile devices) you can still make the email look better on both devices types.

Although the hybrid method supports a wider range of mobile platforms it has its limits which include:

• Hiding content on mobile isn’t achievable without media queries
• Less control over sizing of objects
• Requires more flexibility from email layout
• May compromise functionality on other email clients

In summary

Regardless of some of its challenges email is still very much alive and kicking. It’s packaged up with restrictions but it also provides enormous possibilities like the kind of personalization and targeting Movio’s products can provide. The key is to know how to make the best use of this combination.

Consider these when planning new emails:

• Optimize for mobile
• Invest in good design
• Targeting/personalization increases open rates
• Keep the width of an email within 600px
• Avoid small content
• Use effective images but never rely solely on them