16 May 2018
Interactive Email Design: Does It Have a Future?
Emails are becoming far more like mini-websites today - not only design-wise but also by their extended options to add various interactive content. Now you can be even scared by what is called interactivity - gifs, timers, and usual buttons... No, all that interactive email elements are for subscriber to interact in different ways right in email without visiting website. So let's make everything clear - ...and learn whether it is worth to have so high expectations for interactivity.
Testing interactive email campaigns
I sent test mailings to all the addresses of my mailing list (yeah, I have a lot of them) and designed the message for devices with different interactivity options.
I’ve selected the following test subjects:
the most popular mailing systems in our service
built-in mailing clients of mobile devices
mobile devices with iOS, Android, Windows OS: IOS, Android, Windows
foreign interactive email marketing tools
For today, various interactive email elements are added to email campaigns only by using the code. Let's look what can already be used and will efforts fulfil the expectations.
Changing images when hovering cursor
Implemented with: freshinbox, emailmonks etc.
Such result is achieved with a hover effect; we can test how does it work using rollover which works only in Gmail, Thunderbird, and Apple mail.
It should also be taken into account that there’s no cursor on mobile devices - hovering and click are the same single action. Definitely not all users are like me, but I have a default link opening by click on my mobile. I didn’t even notice that there was such a block in email :)
Most emails display a static frame even in my Outlook mobile and Web tests. Also, there was stated in the article that Gmail doesn’t support rollover but it goes to a certain example only - in fact, one can solve the specific interactive email campaign troubles for Gmail mailings so it may work quite good )
It’s still possible to embed such an image only manually (by inserting code to email) but soon our platform will be updated by option to add these elements in a few simple clicks :)
Implemented with: freshinbox, emailmonks etc.
It looks like a strip of images that can be switched to the right/left.
There are different plugins to add such a strip to website - but everything is much worse with emails. The problem is that some types of CSS are not supported, so user will only see the main image. There are different templates on freshinbox.com - you can add their samples or send from website. Let's look at the results:
The carousel isn’t even displayed correctly by mailing clients - we can see only the main image. Outlook succeeded half the time but I was pleased with the standard iPhone and Android, mailing clients, although I'm not sure that they are often used :)
Yahoo! Mail is not mentioned in the list of mailing clients because it’s not too much popular among domestic users, but I had to test it too - just to make an experiment complete. Carousel worked on PC but not on the mobile devices.
Pretty bad toy for clients involving, as we can see - much more troubles with interactive email design than real profit.
Implemented with: google forms, emailmonks etc.
The most common way to embed a survey form is to place a button and add the Google Docs link to it. Or you can follow more sophisticated way and embed the survey form right in your email. Imagine our surprise when form appeared on all devices screen and in every mailing client. But only Outlook (as usual) stayed alone… with it’s instability.
Popular mailing systems pleased us with correct displaying of survey form:
the appearance of checkboxes and fonts didn’t change
the form is available to fill
sending was successful
In Gmail for Android, "watch but not touch" mode was activated somehow - i.e. survey form appeared but it was unavailable to fill. The worse situation happened with Outlook 2010/13 and Mobile
Fonts have changed, the button was broken, but the scariest thing is that checkboxes didn’t work. But in the older versions everything worked good.
In our case it was impossible to fill the form on one device of ten, so in order to be safe it’s better to add the survey link. And, yeah - if there are 15 questions in your survey, there's probably no reason to add them all to email at once. Step-by-step solution looks more convenient.
Search engine in email
Implemented with: emailmonks etc.
You have probably seen such interactive email elements as search engines:
Nothing special - just a pic and the link below which leads user to search engine on website. In emailmonks there is readymade search engine where you can enter your query right in email. You can use Google Search, or your website’s search bar.
The website states that search engine is compatible with Apple Mail, Yahoo Desktop, AOL, Lotus Notes, Outlook 2007+, Outlook.com, Mobile App (Gmail App, Yahoo App) etc.
Screenshot was the same in almost all mailing clients:
In Gmail App, the form was downloaded only in web version. Inbox mailing client on IOS didn’t please us much too, but in Apple Mail the form was finally displayed and even interactive!
Reading the website you can notice that developers add some rotten apples again (pardon the pun :)) "As Apple has a limited text field support, it’s users are unable to fill the field or insert "space" between the words. However, "Alt + Space" can solve the problem". In fact, the form was easily filled in our tests when even three words queries are entered.
For Yahoo!, search engine worked quite well but these news are rather good for those who is sending mailings abroad, due to Yahoo Mail unpopularity among our users.
In emailmonks I tested each function separately, and even though the site indicates where some function will be displayed - divide it by another two. Still, different combinations of devices and OS are actual for interactive email marketing so it’s important to take it into account.
For example, something about another function - a fixed CTA button. These interactive email elements should be always visible at the bottom of the message when scrolling:
In general, my button worked only with a native Android mailing client. You can trust it - but better test :)
Interactive email design for geeks
It’s implemented with the help of: Justin Khoo layout sorcerer, tr td table geeks :)
Some examples of what you can do manually, but it really needs you to be maniac.
It’s quite difficult for those who are not coders to invent and implement such interactive email design. They mostly care about Safari and iOS to make everything look cool there. Here’s the link to play with freshinbox and these interactive email elements seem to be really impressive.
Light the fires in any mode and sequence you want. You can change the tree modes, reset results or start again.
The subscriber's task is to click the cells with characters to find the right password. There are readymade combinations: certain phrases will appear when you composing them. Spoiler: "Get the coupon" button appears only when you enter AICD
You can find many more interactive email marketing examples in the blog, here are only those I liked most of all :)
2) Table tr td
User can subscribe to newsletters on website to receive a piece of fresh inspiration or view the readymade examples. I didn’t find neither code fragments nor completely described frameworks, anyway I didn’t want to test it so much ) If we have the video not playbacked anywhere else except of iPad, what can we say about the more complex code?
Interactive email elements I liked most of all in the website:
Get a bit childish - and have an excellent mood for the next 15-20 minutes! Choose the color in the palette, and desired image element is painted in the color you want.
Who of us didn’t play Minesweeper on the old Windows. As we can see, it may be attached to interactive email campaign. However, you will not play for a long - mines position in the field doesn’t change, flags cannot be placed too. But when you receive it with the message - it's impressive.
You can add some olives, sauce, cheese etc by click on the baked cake. But... why ingredients are added only in a certain sequence? For example, I like when cheese is above :)
Maybe in the nearest future we will be able to create such interactive email campaigns in a few clicks, but there’s another problem - who will see it? Combinations of “mailing client - device - OS” chain are countless. Unfortunately, not every email service or device is really fit the interactive email marketing.
Embedded video in email
Implemented with: vidyard.com, realtime etc.
Graphic content in interactive email design is better than 1000 words. Moreover, experts like eMarketer.com predict amazing future of videos. Is it possible to embed video in emails? If you are going to embed video - Internet says that it will work correctly only with HTML5.
Just as promised: standard iOS clients Apple Mail and Outlook.com allow recipients to playback your video right in the mailing client without clicking the link. All other mailing clients, Android and Windows devices will display a static image. Let’s start testing:
Video is displayed as a static screenshot almost everywhere. Only iPad pleased me - it played video without leaving email; in all other cases video was opened in a new tab.
Email looks quite good. But I'm not sure is it worthy to spend huge efforts to have a static screenshot in email anyway. And even Yahoo (which I liked so much during the testing period) decided that video playback in the email is a bit superfluous.
Summing up. Only the survey form worked almost perfect among all the interactive email elements I’ve tested. The rest are still not ready for bulk mailings. Maybe you have your own experience in interactive email marketing - don’t hesitate to share it. I will be glad to update my skills and test something new :)