We send over 2M emails per day and over 66% of these are opened on a mobile device. This means designing mobile responsive HTML email is the new norm. This need not be limiting and by applying some simple tricks from Web design, we can move one step forwards and start to create interactive emails that wow the reader and increase conversions.

In this article we will explore the use of interactive design in email and highlight some of the benefits and some of the issues that may arise on selected email clients.

What is interactive design?

Interactive isn’t fundamentally different from print design but it involves an extra dimension. The extra dimension is navigation and interaction which allows the user to change what they see. To be effective the designer must consider how to make those changes and movement clear to the reader.

Email HTML is still very basic relying on old fashioned

based constructs. However, with some good use of CSS properties such as hover, position and z-index, we are able to build more dynamic emails that avoid stacking content which can make emails too long to read on mobile.

With interactive designed email you can:
• Allow multiple key messages and Calls To Action (CTA) to stay above the fold
• Create more engaging content that capture users’ attention

However, not all email clients are as advanced as we wish them to be. With this in mind, you should do the following:

1. Make sure you have a fallback design
• Play around with your layout without the stylesheet. By doing this you can make sure email clients that strip out stylesheets, such as Gmail and Gmail Android Apps, can fallback gracefully.

2. Check out how different email clients support CSS
• For example with Outlook make some good use of <![if !mso]>. Although Outlook support CSS (only partially), ‘position’ and ‘display’ attributes which are essential to interactive design are not supported.
• To see which attributes are supported on different clients, you can check out Campaign Monitor’s guide which has some good tips.
https://www.campaignmonitor.com/css/

So, how does interactive design work? Here’s a promotion email we designed for one of our Clients.

Position attribute allows the content to flow next to each other to create a slide box. We also used z-index to position all buttons so they stay on top of the layout.

To enable the slider effect, we used CSS selector to change the content’s horizontal position when a button is hovered. You can also combine this technique with other CSS properties such as display, colour etc. which will allow you to create various interactive effects.

Interactive Design vs. Android 5.1

During the testing phase we found that while Android 4.X and 5.X native email app supports most CSS properties, it did some strange things, creating a huge amount of unwanted space in our content frame.

To look into the issue, we downloaded the .eml file from the device and looked into the source code. We found Android adds extra plain text before which caused the extra space to be displayed.

A quick fixed is to wrap all your interactive content in to 2 <table>s with position:relative

<table style=”position:relative”><tr><td>

<table style=”position:relative”><tr><td>

<- – interactive content goes here – ->
By doing so, it’s not going to affect the layout on other devices. However, it fixes the gaping issue nicely.

To find out more about interactive design and see how it can help your email stand out from the crowd, drop us a line on 01189794055