1973 Ltd

Interactivity & Email – The Hottest Duo of 2016

By on February 24th In Development, Email marketing
code to animate in emails

Interactive emails are the latest evolution in email creation and bring a wow factor to an email, whether it’s a newsletter or a last day sale email. In this blog post we’ll talk about interactivity in email and how you can implement it.

So, what is an interactive email?

An action taken in an email that triggers an event within the same email

Mark Robbins - TEDC15 London

Thanks for the inspiration Mark! (@M_J_Robbins)

Adding Interaction Into An Email

Implementing interactivity in an email is possible simply with a label tag, an input tag and two lines of CSS. The CSS part controls what the element will do when interacted with but we need some sort of trigger within the email to dictate when the interactivity should start. This is where the label and input tags steal the show.

Labels and inputs are fairly common in webpages, usually as part of a form to allow the user to enter data, but they can also serve as triggers for interactivity in an email. This is down to the fact that an input can be assigned multiple style properties depending on it’s current state. Adding different styles to multiple states is by no means a new thing and has been used many times in web and in email. In the example below your see two CSS classes assigned to one line of text – one class is it’s normal state and one it’s hover state –

This example works perfectly if you’re looking for a small interaction in your email but doesn’t offer a permanent change to the element which we need for email interaction. Using an input, either a radio button or checkbox, will solve this problem thanks to the ‘checked’ state you can use in your CSS. A checked class works as you would imagine by styling an element whenever the input is checked and is perfect for interactivity in an email. Both radio buttons or checkboxes work fine but we prefer using checkboxes as these allow the user to toggle between checked and unchecked.

Let’s start getting the ball rolling with some coding to showcase some interaction in an email.

As you can see from the example above we added a CSS class so that when the checkbox is checked/ticked the colour of the title next to it will change to red. Unchecking the checkbox will turn the title colour back to the default colour. This method will form the basis of all of the interaction you see in this blog post and future interactivity examples.

Whilst the checkbox creates the change in colour it’s not exactly the most appealing of elements in your email. Labels can help to solve this problem by allowing you to create a more custom-friendly button to activate your checkbox. We’ll build up the example code more to show this off –

You can see now that the label acts as a button to trigger the checkbox, which then changes the colour of the title. Adding the label allows you to hide the checkbox, improving the visual look of your email whilst maintaining the functionality you want. It also means you can move the checkbox to any position within the email, enabling the possibility of animating certain parts of the email or the whole email itself.

The label itself can be styled as a block element which allows the option of styling it as a button, a piece of text or even a see-through element on a background image as we have done in our gaming email.

Our example has shown so far the changing of title colour from Black to Red and whilst that’s impressive on its own we feel a little bit of creative flair wouldn’t go amiss. This is where the fun part comes in! Thanks to CSS transitions we can create a nice transition between the black and red, giving the user a more engaging experience with our email.

CSS transitions are generally not as advanced as CSS animations but will work perfectly for our example and for elements of the gaming email. CSS transitions are designed to add smoothness to any property change and can be added to any CSS class with 4 values

All – The type of transition you want to happen whether it’s a width change or an opacity change. All is the default value and works fine unless you want to be specify

2s – How long the transition will take to get from the start to the end

Linear – The speed curve of the transition

1s – The delay on the transition before it starts. This is an optional property but can be added to set up some nice multi-transitions on one element.

Once you’ve added a transition style to your desired CSS class you need to create another CSS class with the styles of the element when it’s checked like the below –

Transitions can work on all element states so it’s possible to transition on a hover, checked or even an active state. With the styles added we’re hoping to achieve a change of title colour when the checkbox is checked. This transition should take one second and should go at a linear speed.

Now we have talked about each of the different parts needed to animate elements in an email let’s put them all together in our example –

As you can see when it’s all broken down adding interactivity into your email is not that difficult and with a little bit of work can be easily added to your own emails. From the simple example above you can start to imagine how CSS can be used to alter the various states, switching an elements background for example, so there’s lots that can be done with a little imagination. We think interactive emails are definitely something that will become more prevalent so encourage you to get accustomed to it.

Conclusion

We hope that by breaking down how to code interactive elements into an email it may lead to more uses of it. It’s an area of email development we really feel could take off and we look forward to seeing how people implement it in their own emails.

If you’re still not convinced about interactivity in an email stay tuned for future blog post where we’ll showcase the techniques we’ve discussed today and prove that interactivity elements and email are the hottest duo of 2016.

Comments  -  2 Comments

Leave a reply

Follow our blog!

Recent Posts

Categories

Our latest tweets

Archives

Authors