Episode 10

Expert Masterclass: Let’s Get Interactive!

Today it is my pleasure to welcome Jay Oram from Action Rocket to join me on our monthly E-telligence Masterclass session.

The amount that we are able to do in the inbox is growing. And if we want to keep getting the best results from our email marketing we need to understand how our audiences want to interact with email going forward and how we can make their journeys faster, easier and more enjoyable. There is a wealth of emerging technical capabilities for email marketing that many companies are just scraping the surface off.

In today’s episode, Jay and I talk about interactive email and how you can use it to surprise, delight and engage your audiences with your design and of course, make it even easier for them to convert.

Jay is part of the design and code solutions team at the ActionRocket. In his role at ActionRocket, Jay is usually experimenting with new code for emails or finding that elusive rendering fix.

Find him on Twitter at @emailjay_

Useful Links:

Get in Touch

If you want help to create a customer-centric, personalised, intelligent email marketing programme, get in touch with eFocus Marketing and discover how we can help you skyrocket your results.

    Listen on PodBean

    (Google link coming soon)


    The latest information for anyone looking to get into creating AMP emails, the best place to start is the amp.dev [https://amp.dev/about/email/] documentation. You can find all the latest information on where amp is supported, the latest ESP to support sending AMP versions of email and resources to get started. 

    UPDATE (Jan 2020) 

    • AMP is being rolled out on Gmail app on mobile
    • Outlook.com is in beta – but support will be rolling out soon
    • Mail.ru now supports AMP emails

    More and more ESP’s and email editors are supporting AMP!

    Find the latest list here [https://amp.dev/documentation/tools/]  

    Braze and MAPP are rolling out support for AMP as we speak and one of the first fully interactive AMP emails I created will be sent in January through Braze!


    To start sending AMP emails you’ll need to be whitelisted with the different email clients, check out the amp.dev documentation to find out how.


    Useful links


    In the podcast we also chatted about other ways that Gmail has some added extras that you may want to look at including in your email strategy. 

    Gmail introduced the social and promotions tab into the inbox back in 2013 and ever since we have been learning more and more about the best strategy – first it was an instinct to think it was a place for spam, but now we know it is exactly where we want our marketing emails to land – I wrote all about the promotions tab and its benefits on the Action Rocket blog [http://www.emaildesignreview.com/strategy/gmail-promotions-tab-3712/]. Since then an even cooler added bit of promotion, Gmail annotations has become more prevalent, Steven Sayo did a great job explaining how they work and how to use them [https://medium.com/@sayo1337/gmail-annotations-977e40ddc60a]. 


    Interactive email 

    Even without using AMP you can bring interactivity into your emails, by using CSS to add a bit of interactivity. 


    Hover effects

    To use hover effects in your email you can use the CSS selector :hover – this basically adds whatever CSS you put within the style to an element when you hover over it. The CSS looks like this: 



    .button:hover {

         background-color: #ff0000;




    We can break this down – to add CSS into the <head> section of your email you need to tell the email client that you want to style the elements below. We use the <style></style> tags to wrap around our CSS.

    Next we add a class, which acts as a label we can set on any element throughout our HTML email, in the example above the class is .button this will target any element we had class=”button” to in our HTML. 

    Immediately after we add the selector :hover this means that the styles inside will only be applied when someone hovers over that element. 

    Then inside the curly brackets {…} we set what styles we want to apply, using a CSS attribute. In the example we want to change the background-color of our button to #ff0000 (red).

    Then in the HTML we add the class to our button and when we hover over it, it will change to red. 


    <td class=”button”>Call to action</td>

    Find the full code to create the below hover effect, with some added CSS animation to help transition the colour here [https://codepen.io/emailjay/pen/dyPmbQZ]. 

    Tap to reveal

    The second interactive element that isn’t too complicated and can add a lot of intrigue to an email is the tap to reveal. In the example below, we use CSS to show and hide different elements based on if someone clicks on the image. I go into depth on how to create the tap to reveal in this Email on Acid blog [https://www.emailonacid.com/blog/article/email-development/how-to-make-an-interactive-email-with-click-to-reveal-code/]. 

    Carousel/Slider Tool 

    Jay worked with the team at Taxi for email to create a carousel tool so anyone could create a three image slider with a fallback without touching the HTML or CSS, just click export and give the file to your email development team or add it to your ESP templates. We have plans to add more tools like this one so keep your eyes peeled! 

    Slider tool [https://my.emailcms.net/tools/carousel/editor


    Creating your own interactive email

    If you code emails or are just getting into coding emails, jump into the code above and pull it apart to see how it works, drop me a tweet or direct message @emailjay_ and explore as many interactive emails as possible that land in your inbox. The basis of the majority of my interactive emails is targeting the clients that support the interactive content and making sure the fallback (the non-interactive) section is shown to everyone else. I spoke about this at Litmus Live in London and the full presentation and code is online [https://jay-oram-litmus.carrd.co/].


    BONUS – CSS snow animation

    If you want to add snow to your emails to add that extra bit of chilliness at Christmas or during winter, you can use CSS animation to enhance any email – I wrote an article explaining all the ins and outs here [https://www.emailonacid.com/blog/article/email-development/how-to-add-an-animated-snow-effect-to-your-holiday-email-campaigns/]. 



    Having a good strategy and plan behind how interactivity can enhance your email marketing is the best place to start. Don’t just add interactivity because you can.

    Start small with the hover effects, maybe carried over from your website and try different techniques out on your audience.