Enabler provide best practice advice for coding your email marketing templates within B2B and B2C email marketing. Check out Enabler’s top tips.

Posts

Plug in, crank the dial and listen up, as we take a look at the power of Google’s new AMP for Email.

AMP (Accelerated Mobile Pages) launched in 2015 by Google was developed as an open source framework to speed up mobile web, to cut out or bipass all of the code that slows down page load and performance, and supply faster, smaller alternatives to the code, mainly via JavaScript.

As of February 2018 AMP is available for email, under the catchy (if unimaginative) title “AMP for Email”.  According to Google, this is so “developers can create more engaging, interactive, and actionable email experiences.” It will allow the user to submit forms or surveys, check flight details, change a booking, get the latest news or search, select and purchase an item without even leaving the email. Basically Google doesn’t want you to leave the inbox if it’s not necessary, reducing the user journey from A to B.

Divided we fall

However, AMP for Email has caused a divide, with the majority wanting to pull the plug entirely.  AMP for Email brings new opportunities for marketers, offering their clients interactivity, increased performance, and improved email accessibility. Which sounds great, but ‘wiring’ your emails for AMP is not that straightforward.

There are initial concerns around security, as Google’s AMP for Email requires the injection of JavaScript to run those carousels and shopping baskets, and the use of third party integration could potentially raise unforeseen vulnerabilities.

Another concern is that Google just wants more control over people’s data, deciding how a process should work regardless of any current, tested, custom version. Imagine a retail store has developed its shopping cart process best to suit it’s clients needs, AMP for Email will not necessarily use this same process. What kind of impact does that have? Will the client lose faith with 2 processes? Will the website suffer from lack of driven hits and missed sale opportunities?

Lastly, when Google mentions interactive and dynamic content within email, are they possibly talking about Google Ads?  It’s very likely that Google will use this opportunity to push their Google Ads through AMP for Email. Hopefully we won’t end up with emails resembling bad 90’s style websites.

We also have to consider if AMP for Email is even necessary? Is this a revolutionary kick start to interactive email or is it over complicating what is meant to be a simple process.

“It’s like someone who sells bottled water telling you your tap runs too slow.”
– Devin Coldewey

The Light Show

Let’s have a look at some of the code, here is a basic layout for an AMP Email:

Doctype required declaring the html to be ⚡4email (“ampforemail” also accepted)
<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<style amp4email-boilerplate>body{visibility:hidden}</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
.emailbody {
padding: 16px;
}
.helloworld {
font-family: sans-serif;
color: red;
font-size: 24px;
padding-bottom: 8px;
}
.images {
max-width: 100%;
}
</style>
All CSS to be included in <style amp-custom> tag, as above.

</head>
<body>
<div class=”emailbody”>
<div class=”helloworld”>
Hello, world.
</div>
<amp-img src=sample.jpg width=300 height=300></amp-img>
Components like the img tag above, adopt the amp name.
</div>
</body>
</html>

There are also a number of components that have changed:

 If you want to have a go, you can double check your code with an AMP HTML validator.

The Output

This is not the first time Google has pursued email interactive products.  In early 2010 they Beta tested “Enhanced Email”, “Google Wave” and “Google Grid”. All with not much success and were dropped after a few months.   Interactive email could be the new era, and even if AMP for Email is not the right step, at least it is a step toward the future advancements of email.

Are Google pushing the boundaries of the inbox, or just trying to take it over?
But then who better to trial these new concepts than Google, perhaps if Apple or Microsoft adopts AMP for Email we will see further developments and testing.

 

“All progress has resulted from people who took unpopular positions.”
– Adlai Stevenson

AMP for Email is in its early days, the full working version won’t be pushed out until later 2018, and there’s still a lot of unanswered questions regarding security. Some are excited, most seem to think it’s a bad idea. Lets just hope it’s a plus for the world of email.

For more detail on AMP for Email you can see a recording from the AMP conference 2018: A New Frontier for AMP. Or, if this has piqued your interest, hit me up on Twitter –@Dipper2009 #emailgeeks.

Video may have killed the radio star, but it’s certainly alive and kicking in email.

You probably already know this, but adding captivating and entertaining videos to your email content can significantly increase your click-through rates.  Having video content that drives end users to take actions, helps provide you with a better insight into user engagement and interactivity, and as Michael Litt once said…

“The play button is the most compelling call to action on the web”
Michael Litt – Vidyard CEO

Let’s take a look at the different types of video is being utilised today, plus some coding tips on how to implement video within your own email marketing.

Lights, Camera, ACTION!

The Prequel

In today’s online world, video is everywhere – streaming out the sides of the internet and going full screen on every platform. Videos online evolution can be associated with renowned sites such as YouTube or Vimeo, both created in the early 2000s. These types of sites have transformed the way we see and interact with videos online, paving the way for video sharing, streaming, higher visual and sound quality, and the significant development of audience targeted programming.

Nearly all social media channels today have involvement in video; Facebook, Instagram, Snapchat, Google+, Twitter – to name a few. So it’s no surprise that videos next evolutionary step was into email… in fact it would have been unusual not too.

The Main Feature

So let’s take a look at how you can take advantage of the benefits of having video within your own emails, by giving you some helpful tips on how best to implement it.

Please place your mobile phones on silent, turn off any recording equipment and sit back and enjoy the show…

There are two main ways of placing video into your emails.

The first would be to have an actual mp4 video file playing directly within your email using HTML5 video, with a fallback image for those email clients that cannot play video.  Unfortunately because the list of email clients that support a full working embedded video file is quite limited, the fact is your fallback image is more likely to be displayed than your video… which makes your video file a bit of a B movie email.

The second, not so advanced but more widely accessible method, would be to incorporate a link to a video within your email by using an animated image or GIF of a video. Utilising a GIF (see below) instead of a full video file ensures your video is more likely to be supported by email clients.  So your end user gets the impression of a full working video, while you relax knowing you haven’t got the drawback of your video not displaying within your email.  Using a video format that’s more widely supported, like a GIF, allows you to reap the benefits of having a blockbuster email that drives higher engagement levels.

For more information on the benefits of GIFs, check out our blog: Quick Guide to GIFs in Your Emails

The Visual Effects

Now, if you do decide to go down the route of embedding a full video file with a fallback image in your email, we’ve got some technical tips to help you along the way.

Let’s take a look at the code* below and go through how we actually get a video embedded within an email.

As this is a HTML5 build we can start with simple doctype: <!doctype html>

Within the stylesheet the video is wrapped in a display: none, until requested to display: block, dependant on the viewing platform. Vice versa for the Video fallback.

The @supports styling are workarounds for different iOS platforms and a Yahoo fallback. #MessageViewBody is for displaying video with the Samsung email client on the Galaxy range.

The next two sections are the video section, with a pre-play/poster image, and the first fallback image, for those email clients that don’t play video.

The second fallback section is for email clients that load the pre-play image but won’t play the video. This just links an image to an online or streamed version of the video.

The size of the video can be set inline, currently 320×176, just remember to set/change it for the fallback image as well.

<!doctype html>
<html>
<head>
<title>Jellyfish</title>
<style type="text/css">
.video-wrapper {display:none;}
@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px)
{
.video-wrapper { display:block!important; }
.video-fallback { display:none!important; }
}
@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
div[class^=video-wrapper] { display:block!important; }
div[class^=video-fallback] { display:none!important; }
}
#MessageViewBody .video-wrapper { display:block!important; }
#MessageViewBody .video-fallback { display:none!important; }
</style>
</head>
<body>

<!-- video section -->
<div class="video-wrapper" style="display:none;">
<video width="320" height="176" controls="controls" poster="blob:https://docs.google.com/91acb26d-2833-4aa8-ae04-b37816b9a9e6" src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" >
<!-- fallback 1 -->
<a href="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" ><img height="176" src="blob:https://docs.google.com/91acb26d-2833-4aa8-ae04-b37816b9a9e6" width="320" /></a>
</video>
</div>

<!-- fallback section -->
<div class="video-fallback">
<a href="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" ><img height="176" src="blob:https://docs.google.com/91acb26d-2833-4aa8-ae04-b37816b9a9e6" width="320" /></a>
</div>

</body>
</html>

The Sequel

Now if you’re not one for coding, there are some companies, like playable.video, that will take your video file, convert it and provide a 10 second clip with the code to embed into your email.

Our best practice top tips would be to use a small video file size within your emails – just like images you don’t want a long download time. So if you like the mentality of “build it and they will come”, having engaging video content within your emails could give you that edge over your competitors, meaning more subscribers, more clicks and potentially more sales!

Updates and testing are ongoing for video in email.  The above code was edited at the end of 2017. In the meantime, “the first rule of video” is not to forget the fallback imagery… “they may take our video, but they will never take our images!”

The future of video will hopefully provide streamable videos directly in your inbox, meaning “where we’re going, we don’t need fallback images”…but that’s (potentially) in the future.

So “show me the videos” and lets see your emails go “to infinity and beyond”, and “I’ll be back” soon with more blogs.

 

*Code from Justin Khoo of Freshinbox – Codepen https://codepen.io/freshinbox/pen/yMLLoX

Is it a bird? Is it a plane? No it’s Kinetic Email!

“Kinetic email… what’s that?” we hear you say. “That must be the latest in email development!” Well… actually, despite sounding like a new type of superhero, Kinetic emails (or as we sometimes call it ‘Captain Kinetic’), have been around for a few years now.

Kinetic email was coined by the Oracle Corporation in July 2014 for their B&Q email marketing campaign. The email they produced used HTML5 and CSS3 and contained an interactive hero image carousel, which was triggered by mouse hover buttons.

B&Q had great results from their debut Kinetic email;

  • 18% increase in responder-to-open rates, with 32% increase among club members.
  • 42,000 click-throughs to the website.
  • 30% decrease in time spent on email.

(Click here for the full marketing report from Oracle.)

The clever part of using a kinetic carousel image which housed all the information and links meant there was less time spent in an email by the user.  A regular email format would have seen users scrolling down through different sections, with the information and links spread out across the email – the Kinetic Hero, however, had everything in one place.

B&Q successfully decreased the time spent in email and upped the click through rate, by directing the user (via the interactive carousel), without the need to scroll through the whole page.

The Power of Kinetic

So the basis of Kinetic images within email is the use of CSS3 transitions and animations, which opens up lots of possibilities for captivating or interactive emails.
Some dynamic content examples that Kinetic email might utilise include:-

  • Hamburger style menus
  • Forms
  • Graphs
  • GIFs
  • Polls
  • Tap to reveal
  • Flip / hover / carousels or slideshow images
  • Embedded video and more…

As you can see, Kinetic Heroes have a lot of work to do.

Kinetic Heroes And Their Many Disguises…

Just as superheroes have their different identities, i.e. Spider-Man and Peter Parker or Superman and Clark Kent, Kinetic emails can be broken down into three different types:

1. Kinect

These are the emails that utilise CSS transitions and animations. A good example of this is the auto scroll carousels.

2. Kinetic Interactive

These type of emails are where the user actually interacts with the email. The example below has a collapsible hamburger menu. Other examples could be a carousel where each slide has a clickable button.

An API (Application Programming Interface), believe it or not, is an interface between two software programs. It essentially allows the two programs to make use of each other’s services and resources, and interact with each other. You can think of them like tunnels between programs that allow them to work together… and all without exposing their inner programming!

You might not realise it, but you will probably use APIs nearly every day of your life. For example, an API would let you open a chat window inside an app, or let you run a map program on your website. Being totally honest with you, it’s really hard to get really excited about APIs themselves, (my development team are shaking their heads in dismay as I write this), but what is worth getting excited about are the benefits APIs have for marketing purposes.

Most email systems today will have some sort of built in API functionality where, with a little effort, you can link your company data systems to your email service provider. This is something we do with Enabler’s email marketing software, allowing is to provide the option of adding bespoke APIs completely tailored to your data needs.

From an email marketing perspective, APIs allow you to do some really cool things that allow you to deliver much more targeted messages to your consumers, helping with both acquisition and retention.

APIs and Automation

API integrations allow your data that’s being stored elsewhere (i.e. CRM system) to be drawn down into your email system.  Giving your email marketing software direct access to your customer data has big benefits for enhancing and deploy your emails, especially when it come to marketing automation.

Let’s take a look at an API example in action.

eBay:

eBay utilised an API integration to send out a daily product email to their customers. Each deals displayed within the email is being automatically drawn from the eBay product pages. The deals changed daily on the website, and because an API was set up between the website and the email campaign, it meant the email deals changed also to reflect the website. This meant that the marketing team could send the same daily emails without so much as a single edit to the actual email content, and know that everything in the emails would be automatically updated to reflect the current deals.

The smartest thing about this API integrated email is yet to come however…  If a recipient opened this email the day after it was sent, they would see the content for the day they opened, not the day it was deployed, meaning they always saw the latest deals.

The reason API integrations are so powerful is because the data being pulled through the API already exists, and as a marketer all you are doing is bringing that information into your campaigns.

Other uses for API content within email:

  • Customers of airlines and ticketing venues can select or upgrade the latest seats from within an email.
  • Restaurant guests can receive special deals and reserve seats in real-time within a few taps.
  • Doctors appointments could be made from within an email simply by displaying an up-to-date list of appointment times.
  • Hotels could send loyalty emails to their customer base and guests could reserve a room directly from the email.
  • Sending a welcome email to a customer when they sign up on your website.

APIs and CRM management

API’s also serve another function in the world of email. Let’s say you have a fantastic CRM system, but sadly it doesn’t send email…now in the old days this would have meant exporting data from that system, uploading it into your email tool, sending an email, exporting the unsubscribes from that email, and re-uploading into your CRM. I don’t know about you but I get exhausted just thinking about that process. Luckily, those days are over! You can now use APIs to help manage your data across multiple systems.

When transferring data between systems, an ‘API call’ is made. An API call is an individual interaction between the two applications through the API, for example when a request for data is made from one system to the other using the API. This allows the two systems to keep your data up-to-date across both systems simultaneously without any manual intervention.

APIs and Security

Each time a data transfer happens, lots of Personally Identifiable Information (PII) is being handled, so security is vital (especially with the GDPR updates coming in May!). Best practice for security when it comes to APIs is to assume that everyone is always out to get your data. Now, it’s also good to remember that not all APIs are equal, and not all vulnerabilities will be preventable. An API gathering weather data does not need to take the same precautions as an API that is sending patient’s private medical data.

The best way to ensure this data is kept private during transfer is by using encryption. With sophisticated key management strategies, or encryption key management strategies, the data can become accessible on a need-to-know basis.

The process works something like this:

1. Authenticating with the web server before any information is transferred

Authentication is used to reliably determine the identity of an end user, while Authorisation is used to determine what resources the identified user has access to.  Authentication and Authorisation are commonly used together.

On the web, Authentication is most often implemented via a dialog box that asks for a username and password. For added security, software certificates, hardware keys and external devices may be used.

2. System decides which resources or data to allow access to

Once the user is authenticated, the system then decides which resources or data to allow access to. For APIs, access tokens are commonly used, either obtained through an external process (for example when signing up for the API) or through a separate mechanism. The token is passed with each request to an API and is validated by the API before processing the request.

The best solution is to only show your authentication key to the user once. It’s their responsibility to hold that key near and dear. Think about it this way – would you trust someone who kept losing the spare keys you gave them…?

This all sounds great, why doesn’t everyone do it?

API setup can be complex, especially if you are navigating your way around big data and different systems and teams. More and more however, companies are realising that API integrations are the way forward for making your marketing campaigns truly personalised, more interactive and the most enjoyable experience for your customers, and are investing time and resource into getting APIs set up. Additionally, from an internal perspective, they will save your team and company time in the long run.

If you want to chat to us about how Enabler’s APIs could take your email marketing to the next level, please get in touch.

Email marketing has undergone some fairly dramatic changes in the past 10 years, both from a strategic and technical standpoint.  Gone are the days of sending mass emails to your entire database which include generic product pushes, which are about as inspirational as the ‘one size fits all’ label on a piece of clothing.  One of the driving forces behind this change is that it  is now commonly accepted by marketeers that segmentation and personalisation of email campaigns are the ways to drive higher ROI, brand awareness and loyalty.

So how do we make sure every email we send is tailored to the personal needs of our customers?  We believe there are three things that have to be in place for this to be achieved:

  • Knowledge about your customers – Without understanding your customers, how do you expect to give them relevant content?  How do you determine what is relevant to them?

  • Data – How do you implement the right email strategy without the correct data in place?

  • A fantastic ESP (Email Service Provider) – that enables you to implement and successfully deliver a decent targeting strategy. (See Enabler’s functionality to see how it could do for you)

 

 

Knowledge About Your Customers

Your customer knowledge can come from your existing databases looking at the data that’s been gathered from previous customer activity (i.e. through forms, surveys or events), or it could be gathered from the customer’s email behaviour (opens, clicks, unsubscribes). However, even if you are starting from scratch, there are ways that you can build up a picture of your customers.

When it comes to using your customer knowledge to create effective email campaigns, we would highly recommend a personas led approach,  where you create profiles describing a particular group of your target audience based on their shared interests.  Grouping together these valuable pieces of customer information, such as challenges, goals, needs, pains and responsibilities, will help you create a ‘character profile’ which you can use to tailor your marketing so that you offer a personalised, valuable service. This information goes beyond normal demographic data and provides real insight into the customer’s life. If you want to enhance your understanding of your customers, check out one of Pancentric Digital’s Design Thinking workshops.

 

Data

Having the data that enables you to achieve your customer personalisation goals is imperative. For tips on how to acquire data click here. If you want more information on how best to retain your current customers try this one. However you decide to get your data in place, we’re going to assume you have done a great job of it, and skip ahead to the part everyone is waiting for….’How do I turn my data into relevant, personalised emails for my customers?’.

 

 

Dynamic Content

Dynamic or ‘Conditional’ Content allows you to use your customer data to create one email that displays different, unique content to each individual email recipient depending on their customer data. As the marketeer, you set pre-defined rules based on your customer data, so the customer only sees the email content that matches their data. Without this in place, you would have to create multiple emails with every possible content variation of based on your customer profile data (which is messy and time consuming) or just bulk email everyone with one message (which isn’t personalised and far less effective).

Sounds a bit abstract, right? So let’s look at a live example coming to us from the insurance industry. Full transparency here, the example we’re going to show you is an Enabler client, but they are using dynamic content in exactly the right way, so are the perfect example of how you should use dynamic content.  The company in question are Petplan, and we will take you through some examples of how they have used conditional dynamic  content successfully in their automated quote and buy email campaigns.

Below you will see an example of one of PetPlan’s emails with elements of the conditional code sitting within the template. From first glance, it looks like a fairly messy, basic template, however I’m going to show you just how clever this template really is.

– Email Template with Dynamic Conditional Content in Place –

Everywhere you see the phrase {conditional:xxx}, is a section of the email that will change based on the customer it is being sent to. This means, as soon as this email gets uploaded into Enabler, all those sections will look completely different and, most importantly, 100% personalised for each individual customer. Conditional elements can comprise of text copy, images, or a combination of the two.

Secondly, wherever you see {recipient_x_number}, that part of the email will also change to include a personal detail about the customer. This could be anything from their policy ID number to their name (or in PetPlan’s case, the pet’s name. )

Now let’s take a look at what that email would look like for a customer. (For the purposes of this, we have set created a fake customer within the Petplan system).

– Email Template with Customer Data Controlling the Dynamic Content –

As you can see, this looks like a totally different email. You will notice that images and copy have sprouted in all areas of the email, causing the look and feel of the email to change.

Let’s walk through the different elements which change based on the dynamic conditional content set up within the backend system of Enabler:

  • Images – the co-branding logo, pet image, roundel, and plan details all change based on customer information.

  • Alt text – the copy sitting behind each of those images will change based on the image itself, providing a fallback option if the customer has their images set to not display.

  • Lists – the ticks and bullet points in the two lower sections all change based on customer information.

  • Copy – there are too many instances of these to point each one out, but everything from the pets name, down to whether a sentence says ‘need’ or ‘needs’ changes based on customer information.

  • Terms and conditions – depending on the co-branding on the email, an extra paragraph will feature in the terms and conditions of the email. This will not be visible if co-branding is not in place.

  • Cover section – this whole section changes depending on which plan the customer has chosen. For this example, I have not chosen a plan, so I’m seeing all the options. However, let’s assume I had chosen the Covered For Life® 12k option, it would look more like this:

The best part about conditional content within Enabler is that you have a fallback option. This means if for some reason not all the data is held about the customer, (for example they are not sure which plan the customer has selected as in the example above) they will see a default view. This can be carefully chosen depending on what next step we want customer to take.

 

Benefits of Using Dynamic Content

Aside from the massive time saving benefits from an email deploying perspective, this style of email set-up will also save time in the future. Imagine having set up one template per customer variation. Not only would you be wasting time creating and testing all those emails, but when it came to updating them, you would also waste a lot of time. Even if you had one line of copy to change in each email, you may have to do it upwards of thirty times. In these conditional templates, you make the change once, and can then generate mass tests from the one template. Similarly, if you need to add something new to the emails, you are doing it once, rather than across a large number of templates.

Petplan are really at the forefront of creating dynamic templates, both from a strategic and build standpoint that put their customers first. From an agency standpoint, this is something we love to see, and the templates are also great fun (for an email nerd anyway) to put together.

However you choose to do your conditional content, make sure your data is in place, you have a great ESP solution in place, and you fully understand your customers before starting to build.

If you are interested in following in Petplan’s footsteps and bringing your email campaigns into the future but your current ESP doesn’t provide the necessary functionality, why not switch to Enabler.

“If you were a web font, what web font would you be?”

I was once asked a very similar question in a job interview, but that time it involved biscuits.

“If you were a biscuit, what biscuit would you be?”  It’s personal preference, and there is a wide choice of biscuits out there…and it’s the same with fonts, with designers and developers enjoying an immensely varied selection of standard ‘Web Safe Fonts’ or the more daring ‘Web Fonts’.

(And for those still wondering about my choice – it’s the Bourbon biscuit, always the Bourbon.)

 

Safety in letters

So what are the differences between Web Safe Fonts and Web Fonts?

Web Safe Fonts

These are the standard available system fonts found on everyone’s operating system. So it is ‘safe’ to assume it will render correctly across email clients and platforms.

The most common Web Safe Fonts include:

  • Arial/Arial Black

  • Helvetica

  • Times/Times New Roman

  • Courier/Courier New

  • Palatino

  • Georgia

  • Garamond

  • Bookman

  • Comic Sans

  • Trebuchet

  • Impact

  • Verdana

Out of these Helvetica and Arial are the standard fonts of choice, whereas others are frowned upon… like Comic Sans.

Comic Sans was released with Windows 95, it had a bright start in life, and this was possibly it’s downfall. “Hmm that Times New Roman header is just too serious, what can I use that’s more fun and quirky… Comic Sans, it even sounds fun.” The font was overused and wasn’t a good font to start with. The character weight too heavy and poor kerning (the space between characters) made it a designers arch enemy.

 

Web Fonts

These are licensed fonts, hosted and accessible either by purchase and download, or linked/imported via a host site like Google Fonts. Although these web fonts provide you with a much wider choice of fonts, they don’t yet all render 100% across all devices, so you should use them wisely.

At present, a small range of email clients accept web fonts, including:

  • Android (default mail, not Gmail app)

  • AOL Mail

  • Apple Mail

  • iOS Mail

  • Outlook 2000

  • Outlook.com app

  • Thunderbird

However this small number does cover the majority of the top 10 email clients being used today.

Google Fonts started up 7 years ago and provides fonts for free, but if none of the 800+ Font Families float your boat, you can always purchase fonts from numerous web font services, including:

Obviously hosting your own fonts is safer than relying upon a third party server. On the off chance that Google gets bored of providing free fonts and decides to stop the whole project, at least your “Gotham” won’t become “Georgia”.

Ideally web fonts should be an email designer/developer’s preference, the varied choice and potential impact of a unique font could help boost opens and drive click through rates, and without sounding like a supermarket advert, every little helps.

 

Web Safe or Not Web Safe?  That Is The Font Question…

The ability for your fonts to render properly in someone’s inbox can actually have a big impact on your click through rates, and not always in a positive way, so your choice between web safe fonts and web fonts is sometimes more than just a style choice.

For instance, you might think that ‘Lato’ font looks great in your new email newsletter, and when you see the ridiculously high click through rates of  70-80% you think you’re campaign has been a roaring successful. But when you look more closely, you discover that the majority of those clicks were people clicking a ‘download font’ link prompted by their device or browser because it doesn’t have or support the ‘Lato’ font.  This ‘download font’ link has now completely skewed all your click through rates and reporting stats.

So, think carefully before you choose a web font instead of a web safe one.

Now that you’ve made your font choice, let’s get them coded into your email.

 

Adding Web Safe Fonts To Your Emails

Looking at web safe fonts first, these would sit in the html as inline styles, like so:
(for this instance, we’ve chosen ‘Georgia’ as our web safe font)

<td align=”left” style=”font-family: Georgia, Arial, Times, serif; font-size:20px; line-height:30px; color:#000000;”>Extra, extra, read all about it</td>

Notice that the font-family has others listed after your initial or main font ‘Georgia’, this means that if for some reason Georgia doesn’t render in your email, ‘Arial’ will be next, then ‘Times’ and so on and so on – these are what is known as fallback fonts.

Outlook 2007/10/13 have Times New Roman as their default fallback font. Even if you set your own fallback fonts within your code, Outlook will ignore them.  However, if you want to avoid Times New Roman, this can be fixed with some code in the header:

<!–[if mso]>
<style type=”text/css”>
body, table, td {font-family: Georgia, Arial, sans-serif, Helvetica !important;}
</style>
<![endif]–>

 

Adding Web Fonts

We can add web fonts in a number of ways, but all are added to the head stylesheet of the email. As an example let’s use the popular Google ‘Roboto’ font.(https://fonts.google.com/specimen/Roboto)

After you have selected the “Roboto” font you will be given a Link or @import option.

<link href=”https://fonts.googleapis.com/css?family=Roboto” rel=”stylesheet”>

Or

@import url(‘https://fonts.googleapis.com/css?family=Roboto’);

Then to call the font you use font-family as normal:

<td align=”left” style=”font-family: ‘Roboto’, sans-serif; font-size:20px; line-height:30px; color:#000000;”>Extra, extra, read all about it</td>

The difference between Link or @import is the loading. @import waits until the html code is loaded, causing a delay to display, and a possible jump between the fallback font and the web font. Link is the opposite, it will load inline first as the code is read from top to bottom. Depending on the font used it could cause a delay for the whole email to display.

Link also offers the option of preferred or alternative style sheets.

The last font option is @font-face, this is possibly the most precise web font method.
It allows you to pick the file format from .woff, .woff2, .ttf, .eot & .svg. The former .woff format being a email developer’s choice, due to more email support.

@font-face can be dropped into the head style sheet just like @import and Link, and looks like this:

@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’), url(https://fonts.gstatic.com/s/roboto/v16/DDBbt_SKtg0EqyMEnMOuTX-_kf6ByYO6CLYdB4HQE-Y.woff) format(‘woff’); unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;}

If you are obtaining the font from a provider like Google Fonts you will need to copy the url in the provided link and paste it into Internet Explorer or Safari to view the @font-face.

<link href=”https://fonts.googleapis.com/css?family=Roboto” rel=”stylesheet”>

 

There’s always an Alternative

Don’t forget your images Alt text, the web fonts have limited platform rendering, but there is no harm in adding some style. We are not talking anything fancy like a Velour jumpsuit and house slippers here, after all this is just the text that loads when your email image doesn’t.

That Alt text can be styled with font-family, font-size, font-colour, text-decoration etc. try and match the image style, and get your email looking good even before the images are loaded.

<img src=“images/grandpa-style.jpg” width=”200″ height=”40″ alt=“Grandpa Style” style=“font-size:16px; font-weight: bold; font-family: ‘Roboto’, Arial, Helvetica, sans-serif; color:#000000;”/>

 

Put the kettle on

So break open the packet of Bourbon biscuits, put the kettle on for a brew and go crazy with the multitude of font families at your fingertips.

So you’ve created the perfect email.  The HTML, CSS and design have all united together in a beautiful choreography, like a ballet dancer waiting to wow their audience.  Now – the last thing you want is for your email’s inbox performance to display View Online or Unsubscribe links as the first act people see.

You need to make an impact in the inbox, enticing the receiver to open your email above all others, and not delete it in one foul swipe.  “How do I do that?”  I hear you cry.  Fear not friend, Preview Text is your saviour.

What is Preview Text?

Preview Text is the first sentence or words from an email that are displayed in your inbox, under the Sender and Subject Line.

The format in your inbox runs like so:

Sender Name

Subject Line

Preview text

Most email providers, like Enabler, will let you control and customise the preview text that’s displayed in the inbox by allowing you to write your own sentence.  This way you can ensure you grab the attention of your audience before they even open the email, by avoiding the appearance of default text in your Preview Text – because lets face it, View Email Online isn’t really going to drive engagement.

 

Now You See It, Now You Don’t

There are two ways to use the Preview Text:

  1. Displayed in the email at the top

  2. Hidden in the code

More commonly, the Preview Text is hidden away to work it’s magic in the background.  If it’s displayed at the top or head of your email, it is referred to as a Preheader Text.  Don’t worry, you can still use hidden Preview Text alongside your Preheader.  If you set the Preview Text container above the Preheader in the HTML, it will appear first.  This could help push down text you don’t want displayed (like that pesky View Email Online)

Email Header example:

Get the best offers available today

To view email online click here

Email HTML example:

<body>
<div class=“preview-text” style=”display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;”>Welcome to the new online store. </div>    
    
<table width=”100%”>
    <tr>
        <td align=”center” valign=“top”>
            Get the best offers available today <br>
            To view email online <a href=“##”>click here</a>
        </td>
    </tr>
</table>
</body>

 

Might look complicated, but what this clever piece of HTML does is bump the view email online text out of the inbox preview, like so:

Inbox results example:

Sender Name

Subject Line 

Welcome to the new online store.  Get the best offers available today.

The Preview Text Hack

So everyone has their own inbox display preferences, and sometimes we don’t get the choice.  You could be displaying 1, 2, even 3 lines of preview text, or annoyingly all of it – it all depends on the email provider.  This could result in the above inbox example displaying text you don’t want your audience to see, i.e:

Sender Name

Subject Line 

Welcome to the new online store.  Get the best offers available today. To view email online click here.

But don’t worry, we have it covered.  There’s a little hack that can help with this:

&zwnj;&nbsp;

No… I didn’t just fall on my keyboard and hit the keys at random.  This bizarre-looking strong of code stands for:

  • Zero width non joiners, or &zwnj;

  • Non breaking spaces, or &nbsp;

The idea is &zwnj;&nbsp; repeated will create white space after your preview text, effectively giving you an invisible buffer to bump down the unwanted copy from the Preview Text.

Example:

<div class=“preview-text” style=“display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;”>Wow that’s short…&zwnj;&nbsp;&zwnj;&nbsp; &zwnj;&nbsp; &zwnj;&nbsp; &zwnj;&nbsp; &zwnj;&nbsp; &zwnj;&nbsp; &zwnj;&nbsp; &zwnj;&nbsp; &zwnj;&nbsp; &zwnj;&nbsp; &zwnj;&nbsp; &zwnj;&nbsp; &zwnj;&nbsp; &zwnj;&nbsp; &zwnj;&nbsp; &zwnj;&nbsp; &zwnj;&nbsp; Text you don’t want displayed</div>

The result, a beautifully tidy inbox display:

Sender Name

Subject Line 

Wow that’s short…

Emojis in Email

😀 😃 😄 😁 😆 😅 😂

These little characters have been around since the late 90s on our mobile phones.  In 2017, emojis have taken over our messages and have now stepped out of our mobile phones and onto the big screen with ‘Emoji Movie’.  There’s even a World Emoji Day on July 17th.

Now, coming to a subject line near you, the emoji is finding it’s place within your email inbox.

Like in the example above, some companies are opting for the subject line emoji as it can help capture the audiences’ attention, plus it allows you to have a bit of fun with the wide selection of icons available.

However, like a lot of new ideas in email (for example video or GIFs), emojis are not accepted across the board, as they will render differently across different devices and email platforms. Emojis are built around Unicode which is a standard set of figures that will display different emojis, for example:

U+1F602 = 😂

U+1F60D = 😍

U+1F601 = 😁

(A full list of emoji icons and their codes can be found here)

If you are planning on using emojis in your subject lines, test before you send otherwise your hip looking emails might turn out  looking a little square, as this ☐ icon will display if your emoji code can’t be recognised.

 

Roundup

A few more things to take into consideration when composing your Preview Text are:

  • Avoid letting the View Email Online into your Preview Text

  • Think of the Preview Text as a continuation of your Subject Line

  • Try some A/B testing with different Preview Text

  • Try not to repeat what is stated in the Subject Line

  • Test your Emojis

  • Try to use personalisation in your Subject Lines or Preview Text

  • Use the Subject Line or Preview Text to promote scrolling by referencing key points or articles lower down your email.

  • Be mindful of your character count – Preview Text can vary in different email clients and platforms, so don’t leave the best bits until the end.

Preview Text shouldn’t be an afterthought.  These small techniques can help to improve your open and click-through rates, and show your email as being professional and well thought out.

 

So go ahead, try some different combinations of subject lines and preview text.  Test, test, test those combinations, then sit back and watch the positive responses.

Well done!  Your performance is complete and your audience is demanding encores!

As email marketers, we are always trying to find the best ways to make sure our emails are the very best they can be.  Gone are the days where you could send a test email to your inbox, sign it off and send it out.  Now more than ever, we have to be extra vigilant with our emails, making sure get into our customer’s inboxes, and that they look good when they arrive there. But with so many tools available and more cropping up all the time, how do we separate out the good from the… not so good. Luckily, the Enabler team are here to provide you with our expert opinions on the tools on the market now.

Our Top Five Email Tools to help you get the most out of your campaigns:

 

1). Adobe Photoshop

Photoshop is design software that falls under the Adobe Creative Cloud – which means if you already have a creative cloud log in, you can access all of your assets and imagery from inside Photoshop. The programme itself is very intuitive and provides a host of different ways to achieve your goals. It enables email designers to produce beautiful creatives and maximise their potential.

Adobe are always updating the product (you can check out their update timeline here). Photoshop allows you to work across desktop and mobile devices to create the best looking emails you can, making it probably the best software out there for creating great email design.

Price-wise, you can get the full 20+ creative desktop and mobile apps in Adobe Creative Cloud for £45 per month or you can just go for Photoshop which is £17.15 a month.

View the full breakdown of pricing here.

Photoshop is a creative tool we highly recommend investing in if you want to create visually stunning, engaging emails that drive clicks.

 

2). Adobe Dreamweaver

Dreamweaver is a fast, flexible coding engine designed to give developers the freedom to code emails that look brilliant on any size screen.  Dreamweaver is extremely intuitive, and is a suitable choice for any email marketer, whether you are new to coding or have years of experience.  The coding engine offers code ‘hints’ for new users and works with the developer to keep code clean, reduce errors and improve readability.  It has three main view screens, code, design and side-by-side.  This is incredibly useful as it allows you o see how your code is affecting the design.

A new feature we love is ‘snippets‘.  Snippets are sections of code (e.e. headers, footers or images with text) which you code once, then save for use later.  When you next have a template that needs that snippet in it, you can easily drop it in, making development faster and more accurate.

Dreamweaver has the same pricing structure as the rest fo the Adobe Creative Cloud, so you can own it for just £17.15 a month.

 

 

 

​​3). Litmus ​​

Litmus is an email testing tool which allows you to check how your emails will look across a wide variety of email clients and apps.  The main thing we love about Litmus is that it saves you from having to create test email accounts across all email clients, allowing you to test everything in one central place.

You can test everything from link tracking to email load time.  They even have a section of the tool called ‘checklist’, which is essentially your pre-flight check before sending your email.  It will help you catch broken links, optimise loading speed and check how your email works with images on and off.  This section is fantastic – especially as it allows you to choose which browsers and clients you want to see.  It covers desktop, mobile and tablet – we couldn’t recommend it more.

Litmus also has its Community Area, where you can ask questions to hundreds of other developers and share in each other’s  experiences to make your emails even better.  They also produce emails themselves which keep you up-to-date with the latest email trends.

Litmus does offer a free 7 day trial, but after that prices range from $79 a month to $399 a month (for the Brits out there, that’s approx £63 – £320 a month).  They do have a pricing option where can tailor your package, so it only contains what you actually need; like an email pick’n’mix.

 

 

 

 4). Send Forensics

Send Forensics is an email deliverability tool that focuses specifically on making sure your emails hit your customer’s inboxes. It’s very advanced, and works to safeguard your email reputation and boost engagement.

You can run a free email deliverability test that will score your email and tell you the percentage will end up in spam, however to get the full features it costs $49 a month.

Once you sign up to the full features version, the software not only gives you a deliverability score, but what elements of your emails are trigger spam – whether its due to your content or the technical makeup of your email, for example if there is no SFP set up.

(Here’s some tips on avoiding spam filters)

It will mark your vocabulary and copywriting, judging words you’ve used and highlighting any negative one that are hindering your deliverability, and offers you alternative phrases to use instead.  It also highlights any positive keywords to demonstrate the phrases helping your email deliverability.  Send Forensics will even rate your copywriting tone of voice in determining whether you are being overly promotional or conversational in your tone.

 

One of the really standout aspects of Send Forensics are all the technical checks it undertakes when examining your email.  Not only will it check the image:text ratio, and inspect the quality of the links you provide, it will also dive under the skin of your email set-up, domain authority and IP address to check your sending reputation, noting any sites that have blacklisted your IP or technical problems that might be hindering you reaching the inbox.

All this might sound very technical, but Send Forensics is anything but.  The software is exceptionally user friendly, and offers advice on how to undertake any actions it suggests, making it an ideal solution for email newbies.

5). Email on Acid

Email on Acid is another email testing tool that will help you make sure your emails look great across devices and clients.  It provides coding tips and marketing guides via their blog, and also has a forum where you can post techniques and questions to other email developers – however if this is one of your main uses, we would probably recommend going with Litmus as they tend to provide answers faster.

It comes in cheaper than Litmus at $45 – $295 per month, however unlike Litmus they don’t provide a custom tailored option, meaning you have to take everything in each package.  Both LItmus and Email on Acid’s basic package come with one user, but Litmus’ most popular package comes with five users, whereas Email on Acid only has the one user account.  E

Email on Acid is a cheaper alternative if you are a small business with only one users, but if you’re a bigger business, definitely opt for Litmus.

Say the words “Build me an email” to a developer and watch the expression on their face drop. Yes, HTML emails are old school, but there’s no need to don a loin cloth and start chipping out code from a stone tablet.

Email has come on leaps and bounds within the last few years, and with open rates frequently increasing on mobile devices, there are a few tips and tricks you can use for responsive emails.

 

Here are a few favourites to keep you building successful, responsive emails:

 1). Keep inline

If you have tried building an email before, you have probably heard of this one. This is basically adding any style changes you make to the containing table of your content.

For example:

<td style=”font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000000;”>Hello World</td>

The main benefit behind using this styling is that some email clients will strip out embedded CSS in the <head>, leaving your email with as much style as socks and sandals.

Email developers have already started trialing emails with no inline CSS, which are not 100% foolproof yet, but with a large percentage of global email clients supporting embedded CSS, there is hope for cleaner emails in the future.

 

2). Query your media

Let’s say you want that image smaller, or a different font for that block of text, or you need that column to stack on mobile… not a problem! Media query to the rescue.  Media queries are the CSS3 commands that allow you to change your viewpoint depending on your screen resolution,  meaning that your imagery and content will display differently on different devices… thus making your content fully responsive.

Within the <head> of any email there will be a minimum width set, for instance 480px which will control and sometimes constrain how your media is displayed.  But, if you add a media query to your style command, any styles that you set within that media query will take over when the screen resolution drops below the minimum width.

For example:

<style type=”text/css”>

    body {width: 680px;  background-color:#000000;}

    @media only screen and (max-width:480px) {
        body {width:100% !important;  background-color:#ffffff !important;}
    }

</style>

This means your image can be any size, the font family can styled differently for each resolution, and you can stack your columns all day long. Happy days!

 

3). Stacking

 We briefly mentioned stacking columns in the last tip.  As you’d expect, this coding command allows you to stack columns on top of one another by setting them as .stackonmobile {display:block;} for mobile. This coding tip helps with mobile optimisation by making sections of your email more visible and legible on smaller screen resolutions, instead of trying to squash them into one column.

The default for stacking was left to right for a long time, however more recently we can now reverse stack, by setting the containing tables text direction as right to left.

For example:

<table width=“600” dir=“rtl”>
    <tr>
        <th width=“300” dir=“ltr” class=“stackonmobile”>World</th>
        <th width=“300” dir=“ltr” class=“stackonmobile”>Hello</th>
    </tr>
</table>

Note that we need to redirect the sub-tables back to left to right for text alignment. Also the html layout will be reversed, right column first, which is why ‘World’ is before ‘Hello’ in the example above.
Also note that we have used <th> instead of <td> for Android compatibility, as they dropped the use of display:block on td’s.

 

4). Min vs Max

With screen resolutions getting bigger and bigger, is it a good idea to make our emails wider?
When I started in email builds (back in the dark ages of blackboards and chalk written HTML), the width was 585px. This slowly grew to a standard 600px, which seems to still be the acceptable size. Most of the emails we produce today are anywhere between 600px & 720px. Occasionally a 1000px email rears it’s oversized head, but these are usually for big occasions with large hero images for impact.

What we need to remember is that emails will still be framed by the email clients furniture i.e. the inbox list, the search and edit tools, sender details etc. So an oversized email might end up stretching beyond the width of the screen, which results in an ugly horizontal scroll bar at the bottom… and nobody wants that.

So remember, size does matter.  Always aim for the optimal image size depending on the platform or device being used to ensure your emails remain mobile responsive.

 

5). Bring it to the Table

With email development, it’s all about the tables. Below you’ll find an example of an email HTML table.

Example:
<table width=“100%”>
    <tr>
    <td align=”center”>
        <table width=“700”>
            <tr>
            <td align=”center”>
                <table width=“100%”>
                    <tr>
                    <td align=“center”>Hello</td>
                    </tr>
                </table>
            </td>
            </tr>
        </table>
    </td>
    </tr>
</table>            

The first outer table is set at 100% width to ensure the table is centred within the main body of the email itself.  Then the body table is set at your desired email width (i.e. 700px as above) with a 100% media query class.  By setting the tables within the body to 100%, this helps to ensure the content flows responsively when scaled down to a smaller screen resolution.

 

Handy tip: When building emails using tables, make sure you repeat your inline styles.  A table within a table will lose styling in some email clients, especially background colour and font attributes.
And another handy tip: Try and make sure you nest your tables, and avoid using colspans in your email code. Outlook has a nasty habit of ignoring colspans and rowspans, so nesting your tables will give you more control over your code, making you a happier developer.

 

6). A font by any other name

Be on the lookout in Outlook, your font might not be the font you wanted! 
Having a backup or fallback font within your email code is exceptionally useful to ensure your emails always look the way you want them to, even if the email provider doesn’t have your first choice font.

However… Outlook 2007/10/13 has other ideas, and will automatically apply their own fallback font or Times New Roman. Even if you set fallback fonts in your code, Outlook ignores them. Cheers Outlook.

But wait, there is a fix.. phew!
<!–[if mso]>
<style type=”text/css”>
    body, table, td {font-family: Arial, sans-serif, Helvetica !important;}
</style>
<![endif]–>

Drop this code into the <head> of an email and Outlook will pick up the web safe fonts first, so you can safely steer clear of Times New Roman.
Font-astic!

 

7). Does my article look big in this?

A bit of extra padding never did anyone any harm, but adding Padding and Margins to your table styles could harm the way your email looks, as some email clients might ignore them.

Spacer images used to be the way to use padding in emails. Developers would use transparent 12px x 12px gifs and fit them into every nook and cranny of their emails… sounds tedious doesn’t it?

Luckily there is an alternative which is much more efficient to implement, and works across all email clients successfully… A non-breaking space (&nbsp;) – just add font size, line height and a width/height depending on the space you require:

 

<td style=”font-size:20px; line-height:20px;” height=”20″>&nbsp;</td>

So now your emails and tables will always be lean and evenly spaced…no padding required.

 

8). The (Alt)ernative

 When your emails load quickly, you get to display every image and aspect of you email in all its glory. But what happens when you’re a slow connection speed or your email client is blocking images by default?

You could end up with empty spaces where your images used to be, but hopefully you will see the Alt text – the alternative text that’s displayed when an image can’t display.

Some email clients won’t load images automatically, so without any Alt text you could get a blank looking email. 🙁

Example Alt text:
<img src=“images/hello-world-title.jpg” width=”200″ height=”40″ alt=“Hello World”/>

Another alternative is to actually style your Alt text so that it’s less bland if it gets displayed. Add a font-family, font-size, font-colour or text-decoration, so you try and match the image style, and get your email looking good if the images don’t load.

Example stylised Alt text:
<img src=“images/hello-world-title.jpg” width=”200″ height=”40″ alt=“Hello World” style=“font-size:16px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color:#ffffff;”/>

 

9). Hamburger to go please

Now that emails have further CSS3 support, it’s allowed many developers to start introducing some great responsive features to their email code.

The Hamburger Menu (so called because it looks like a little burger between a bun) is one example of this.

Those long menus on an email don’t need to be stacked half way down your mobile screen anymore, they can be tucked away neatly in a clickable, drop down menu, making your email more mobile-friendly and more visually appealing.  Just need the fries to go with it now!

 

 

 

10). Give yourself a fighting chance

Make sure you are putting yourself in the best possible position for email building. One of the ways you can do this is to get the right software. Lucky for you, we’ve put together a list of our favourite email development tools, from design right through to deployment.

Check them our Email Tools blog and start getting the best results out of your emails.

Whatever you do, keep experimenting with your HTML/CSS emails, even if you end up with Frankenstein’s monster there might be a small part that works really well, or another that will give you a further understanding of where to go next.

Happy coding!

Email is a huge part of most companies’ marketing mix but many brands are still swinging and missing when it comes to delivering great campaigns. Email is an integral part of many marketing campaigns. We use it every single day. The first thing I do when I sit down at my desk in the morning is check my email and it’s also the last thing I do before I leave. It’s the one thing that stays up on my screen for the whole day.

When we’re dealing with something that impacts so many people day to day, we can’t afford to be getting it wrong. So, what are the challenges of email and how do we overcome them?

1. Getting noticed in peoples inboxes

  • Subject line testing
    Every data list is different, so there’s no magic solution to email subject lines. The best way to achieve results is to test subject lines through A/B testing and then roll out to the rest of your list. For example, send 20% of your emails to one subject line and 20% to another. Leave it 24 hours, assess the results and send the winning subject line to the rest of your list. Over time you’ll get a sense of what engages your audience and what bores them to tears.

  • Do something a little different
    Emojis in email subject lines can work really well when used cleverly and sparingly.

  • Know when to send
    Different databases respond to different send times. At Enabler, we find that 9am, 11am and 2pm work really well as send times for B2B. This enables you to catch people as they start work, on their morning coffee break and during the post-lunch slump. Again, the way to find out what works best for you is testing. Split-send to your list at different times of day and compare the results.

  • Know how often to send
    No-one wants to be spammed with emails after they’ve signed up for a newsletter. With the introduction of Gmail’s inbox tab system, which separates everything into primary, promotions, social and updates you don’t want to be stuck in the junk section! A way to deal with this is to ask your users what they want; find out what they’re interested in and send them that.

 

2. Ensure your emails are rendering correctly

There is nothing worse in the world of email than opening up your inbox to find an email that hasn’t rendered correctly. Maybe you’re missing half an image, maybe you can’t see images at all. Maybe you’re missing half a call to action button on your Outlook client because a lazy developer didn’t run the email through an email testing client before sending it to your inbox. The key to making sure you get it right is to test on each email client before hitting the send button. I prefer Litmus because it allows you to email your HTML directly to the program and shows you how your email will render on both mobile clients and desktop clients. It also shows you all the versions of the clients rather than just the latest ones. Top tip: Outlook 2007 and 2010 basically support nothing.

 

3. Keeping up with trends

  • Mobile vs desktop
    Know what percentage of your list are opening your emails on mobile. I generally work to the rule that if it’s more than 10% you should definitely be using responsive design and if it’s anything over 2% you should definitely be at least considering using it. We’re a society of mobile users, and that’s only going to grow. With that in mind, email marketers can’t afford to delay making their content accessible to mobile users.

  • Dynamic content
    Gone are the days of building 30 emails, one for every category you have in your database. It’s all about building one email, and using conditional content conditions to ensure each user sees what you want them to see upon opening your email. All decent ESPs will have this functionality built in, so what are you waiting for?

  • Rich media
    Knowing how to make your emails stand out is more important than ever. Emails can drive sales and brand awareness as well as provide platforms for event attendance. Explore GIFS, Video, Twitter feeds, Social sharing and more to support your email campaigns. With technology developing so rapidly, it’s important to be creative to ensure you stay on top of your game.

  • Be practical
    This is a big one, there’s no point sending great content to your database if they won’t be able to see it, and the email therefore loses all meaning to them. It’s imperative to know, for example, that Outlook won’t support your animated GIF and will freeze it on the first frame. Or that Gmail won’t display emojis in your subject line and show them as little boxes instead. Make sure you do your research and find out what will and won’t work, before you get creative.

 

4. Managing your data correctly

  • You can’t have good email without good data
    Understanding what you can do with your data is every bit as important as keeping up with the latest front end coding trends. You can segment your data by age, region, gender or anything you know about them – all you need is the right tools to collect that data and the right tools to use it to code a great email. Never miss an opportunity for data capture and always employ the Pokémon tag line ‘Gotta catch ‘em all’. (‘em all being the bits of data).

  • Know what to do with that data within an email.
    Personalisation is key but get it right – no one wants to see ‘Hi First Name’ at the start of an email. There’s no point personalising if your data isn’t correct. I’ve seen brands put the wrong merge code into an email so the policy renewal ID was swapped with the recipient first name. This gave the effect that the company was referring to one of its customers as a number, not a name.

  • Be creative
    You’d be surprised how many people actually miss this out of campaigns. It seems like common sense, until you sit down in front of a computer and start trying to plan, at which point your brain might give you… nothing. So how do we get around those creative email mind blocks? First work out what you are trying to achieve. Do you want people to buy from your site?Do you want to increase brand awareness? Do you want to encourage people to enter a competition or play a game or simply visit your site?

 

Once you’ve worked this out you can start working out how you’re going to achieve it. Don’t be scared of doing some competitor research to get you started. Most importantly, have fun – email is great, you should be enjoying yourself!

Is email a dying channel?

In short, no! Email has been around since 1971 when Ray Tomlinson sent the first one on the ARPANET system. It was the first system that was able to send mail between users on different hosts connected to the ARPANET. Since then we have seen the evolution of email as a channel to the point where many of the functionalities mirror what you can do with websites – which is remarkable when you think about it. Considering everything you code into email has to sit within tables… within tables – the amount it has and continues to achieve is outstanding.

Think about how many other internet based fads email has remained a constant throughout. Email saw the birth of MSN, Myspace, Facebook, Twitter, YouTube, Mobile apps… and it’s still going, still developing, still adapting. There are conferences all around the world dedicated purely to email and how we can keep developing email.

Online sales have skyrocketed in the last few years and now remain at a consistent high. A huge part of what drives these online sales is email. Email drives people to websites. Email makes sales. Email is awesome.