Skip to main content

Welcome to our new ‘Tech Talk’ series, where we dive a little deeper into the mechanics of email creation and offer insights from our in-house experts.

First up is Digital Designer Gorka, covering the basics of interactive email – why we use it, how it’s coded, and who stands to benefit from its implementation.

Interactivity in email has been a growing trend in the last few years, and we have been noticing increased interest from clients in recent months.

The main benefit of interactive emails for brands is that it gives us the opportunity to surprise the customer in our communications. Firstly, because interactivity is still a relatively uncommon phenomenon in a world of static emails, but also because it gives marketers the opportunity to challenge recipients (with games, riddles, etc.) or to present information in appealing ways (interactive tabs, dropdown menus, slides, etc.).

That sounds good from the marketer’s point of view, right? But how does this translate to designers and developers? It’s not always that simple when it comes to email development, as there are a great number of challenges we will need to face.

Whether you’re a designer yourself, or an email marketer looking to glimpse behind the CSS curtain, let’s take a look at how we make interactive emails here at Adestra…

How it works

Let’s use an interactive tabs component we recently built as a reference here, although note that this approach can also be taken for other interactive components:

“Input” elements

Now, there’s going to be a fair bit of code coming up. Don’t panic; we’ll talk you through it…

As designers, we can add interactivity by adding hidden “input” HTML tags to the code. In this case we have four inputs (that’s one for each tab) which are hidden by CSS, like this:

<input id="tab-1" type="radio" name="tabs">
<input id="tab-2" type="radio" name="tabs">
<input id="tab-3" type="radio" name="tabs">
<input id="tab-4" type="radio" name="tabs">

“Label” elements

Each clickable element within the email – for instance, a tab or a button – is wrapped by a “label” HTML element, which will select different “input” tabs when clicked.

<label id="tab-1" for="tab-1">
<!--tab HTML code-->

For example, by clicking on the label “tab-1” you would be selecting the input with the ID “tab-1”. As the input type is a radio button, only one input can be selected (so clicking on “tab-3” would both select the input “tab-3” and deselect “tab-2”).

CSS selectors

Our next step is to add styles depending on the selected input. In the HTML we have four content blocks which are hard-coded, but can view each one depending on the input that has been selected. So if the input “tab-3” is selected, content block number three will be the only one visible – see “.content-3” below). This is achieved by CSS sibling selectors – more info here.

A simplified example would be the following:

input#tab-1 ~ .content-1,
input#tab-2 ~ .content-2
input#tab-3 ~ .content-3,
input#tab-4 ~ .content-4{
display: none !important;
/* other CSS classes like max-height, overflow, opacity will also be required here */

input#tab-3:checked ~ .content-3 {
display: block !important;
/* other CSS classes like max-height, overflow, opacity will also be required here */

Some CSS3 animations can also be added to fade in the content blocks, or to add fun transitions to the tab’s background color when clicked.

Of course, a great deal of extra code is required to ensure the interactive component works as expected, and we always advise showing a fall-back option when interactivity is not supported by the recipient’s email client. Which leads us neatly to an all-too familiar struggle for the email developer…

Email client support (or lack of)

The good news is that interactivity is supported in some web and mobile clients.

However, some major ones – e.g. Outlook, Gmail, and Yahoo – do not. To get around this, the four content blocks need to be displayed as stacked for users of those particular clients:

To make sure the email renders properly in Outlook, for instance, we need to add some conditional MSO code to hide the tabs and stack those four content blocks instead. Bear in mind that every email client has its own quirks, and requires specific CSS to cover its own particular issues.

The final step is, as always, to test. In some cases the testing stage might take even longer than the building stage, but that’s the price you have to pay for a perfect email.

Other applications

Interactivity can be applied to different component types, enabling you to show content, hide content, change a background image…pretty much any CSS style that you can imagine!

For example, here’s the template we built for our holiday email this year, using exactly the same principles outlines in this article. You’ll notice, however, that the result is completely different:

Final points

  • As you can see, interactivity is still very much limited by the level of support available from the recipient’s email client, so a fall-back option should always be available.
  • Mastering interactive email means mastering CSS3 sibling selectors and client-specific CSS targeting rules.
  • As with all areas of email marketing, testing, testing, and more testing holds the key to success.