Categories:

Create a Memorable Subscriber Experience with Interactivity in Emails

Category : Email Design

It’s no secret that your subscribers are receiving numerous emails in their inbox each day. Most of them are not inherently interesting and as a result, you cannot warrant subscriber engagement. That said, it is important to realize that emails are not always about promoting your products or services and making sales. It is about how your subscribers interact with your emails.

Ask yourself these three questions –

  • “How do my emails look?”
  • “Are they unattractive cut-and-paste email templates?”
  • “How will my subscriber feel on receiving that email?”

Your email should be time-intensive and contribute to building a credible brand.

So, how will you create emails that enhance your brand visibility and bring you more sales (in the long run)?

INTERACTIVITY is the answer.

Basics of Creating Interactive Emails (With Gamification)

Interactive emails with gamification mainly involve click-based animations achieved with CSS animations.

Of course, it would be easier to accomplish these animations through JavaScript… but emails do not render them well, so we choose to go with CSS. Also, these animations have a smooth performance even during moderate system load.

These emails usually work by specifying sub-properties for the animation property, as explained below.

1. animation-name

Specifies the name of the @keyframes at-rule describing the animation’s keyframes.

2. animation-duration

Configures the length of time that an animation should take to complete one cycle.

3. animation-timing-function

Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.

4. animation-delay

Configures the delay between the time the element is loaded and the beginning of the animation sequence.

5. animation-iteration-count

Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.

6. animation-direction

Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.

7. animation-fill-mode

Configures what values are applied by the animation before and after execution.

8. animation-play-state

Allows you to pause and resume the animation sequence.


That said, let’s begin the journey towards AWESOME emails…

EmailMonks presents to you the interactive emails designed and coded with great enthusiasm and passion.

1. St. Patrick’s Day

St. Patrick’s Day is essentially about the mischievous fairy-folk Leprechaun, his coveted pot of gold, three-leaved shamrock, and dressing up in green attire. EmailMonks brought alive all these elements in their email design this year.

We conceptualized the email around a treasure hunt wherein the recipient was supposed to acquire Leprechaun’s pot of gold.

Click the image to view the live email.

At the outset, the email greets the recipient that it is their lucky day with a button to “Start the hunt”. The scaling of the button is achieved through CSS animation. Although, it could have been possible even with the help of GIF animation, we chose to do it through CSS because GIFs are heavier in weight. And the email would load slower.

The email includes two questions with two options each and the subscriber is supposed to choose the right answer. Once the subscriber chooses the option (action), it triggers the re-action. If the answer is right, the next question will be displayed. In case the user fails to answer, he or she will see the “Oops” message. The animations here are also achieved with the help of click-based keyframes.

On answering both the questions correctly, the user will be asked to select the right door that hides the pot of gold. In case the user successfully guesses it, he or she will see the message – “You found the gold! Lucky you!” and encouraged them to share the email on Twitter and let their friends find the treasure too. If not, the user will be directed to the “Oops” message with a prison in the background.

The best part of this email is that it is fully responsive and renders well on all devices, regardless of the screen size.

Experience Treasure Hunt in your inbox. Fill this form to get the email.


2. Valentine’s Day

Most of the people celebrate Valentine’s day in the name of their better half. However, the true meaning of love is when you can radiate positive vibes and make someone smile. EmailMonks created a special email for the day of love where the recipient had to mend the broken heart with the arrowed directions within a specific time limit.

Click the image to view the live email.

Once the game starts, a piece of heart gets selected and is free to move within the puzzle unless it’s fixed within the actual location. The pieces get selected automatically one by one and subscribers are free to move the pieces.

The interactivity has been created with the use of input tags. Each piece of the heart is linked with its inputs, and number of inputs are equal to the possibilities of movement. Each input carries its unique position and selecting that input will move the piece into that position.

Once all the correct inputs are selected, there’s an entire change in the theme which is made possible through CSS. When the subscribers complete the game, the email shows a thank you message with a link that lets them share the email and spread love and positivity.


3. Christmas

A) EmailMonks conceptualized their first Christmas email in view of the excessive usage of social media, taking a toll on personal relationships. We motivated the subscribers to spend quality time with their family instead of sharing posts on social media.

Click the image to view the live email.

The highlights of this email are the high-resolution arrow that is designed in APNG format and the full-width slider (utilizing the negative space effectively).

The entire email is designed in such a way that it kindles curiosity in the minds of the subscriber and urges them to keep clicking that cute arrow.

Technically, it is a height responsive email. The emails you usually come across are just responsive in terms of the width. We tried to create an email that was responsive in terms of the height too with all the elements placed above the fold.

The email ends with a strong message:

Share a few moments and make it memorable for your family!

The best present you could give them is: YOUR TIME.

Did you notice the fading text animation given to “YOUR TIME”?

B) Another email that we created for Christmas focused on creating an “expressive” GIF animation.

Click the image to view the live email.

As the envelope unfolds, it displays a Monk blinking his eyes with a warm smile, peeping from the top of the greeting card. As you read through the card, the Monk switches the place and gives the same warm smile that emulates Christmassy vibes. We always wanted to create an expressive GIF and we made that dream come true during this Christmas.

And you know an inside secret? The team of developers gave a surprise to their boss with this email. A great Christmas gift, indeed

Again, we used negative space beautifully in this full-width email.


4. Thanksgiving Email – Cross the Maze

Maze is a game loved by individuals belonging to every age group.

We brought it alive in emails by creating the first email maze along with a gaming console – all in the email itself.

The basic concept of this email was to call attention to the importance of ‘family time’ on Thanksgiving Day.

Click the image to view the live email.

We created a character, Alex, and built a story around him. He was stuck in traffic and the player had to help him reach home in time.

Here too, the logic works in similar fashion as in the Halloween email. Every turn or path (visually) has two inputs or click events. One at the start and another at the end. The ending event becomes the starting event for the next action or path. Logically binding correct sequence of events, the actions are planned and we use key frames to move the object (in this case, a car) in the direction where inputs are positioned. Similar to what we did for the Halloween email, we created inputs for defining win and lose messages.

The controller was placed at the bottom of the email. It was developed with background inputs, which relied on the actions that ultimately moved the position of Alex. Choosing an incorrect path would lead to a dead-end and showed an error (lose) message. On the other hand, choosing the right direction and helping Alex get to his home displayed a win message.


5. Halloween

To deliver a delightful experience to the subscribers, the developers put together an interactive game for the Halloween email.

The concept behind this email was to make the recipients feel involved and let them exhibit their benevolence.

They were supposed to save the city from the attack of five monsters.

Click the image to view the live email.

The email opens with the message – “The monsters have attacked the city” and the subscribers have the opportunity to save the innocent civilians from dying.

The email used GIF animations in the backdrop and the game took the center stage.

Since the email couldn’t work in email client Outlook, those subscribers were provided an option to click through and play the game online. As much fun as it was to create the email, it was equally exciting for the audience, which resulted in better engagement rate.

This email has been created using multiple interactive components in a well-arranged way to give users the gamification experience. It contains keyframe animations with five rounds of the game and each round appears at the right time by including delay in the animation.

We have added input tags (click events) to allow subscribers to interact with the game. Logically binding each input to create a pattern of winning and losing, every click event is placed and positioned accordingly. Each input has its own individual actions and re-actions to allow viewers see the change on the course of action. Depending on the pattern selected in the course of actions by the subscribers, the winning or failure message will be displayed.

If the subscriber wins, the civilian featured in the GIF will rejoice and the CTA “Spread the word” will flash on the screen.

The subscribers engaged with the email as it promised “Email is King” merchandise to the first five heroes.


Compatibility

These gamification emails are compatible in Apple Mail (both Mac and iPhone), Outlook 2011 and Android Native All.

Fallback

Developing a gamification email is quite challenging but making it compatible across all email clients is even more challenging as not all of them support these emails. Therefore, it is imperative to display the right message with a fall-back version.

The non-supportive email clients will show a custom message, depending upon the email client in which the email is opened so that the reader can experience the interactivity as desired. We accomplished this by using an email client-specific conditional code.

E.g.: For the Halloween email, this is how the fall-back version will appear if it’s been viewed in Gmail.

Performance of Gamification Email Campaigns

The best way to measure the engagement in a gamification email is by the ‘time spent’ on that email rather than the click-through rate.

Normally, the email campaigns get around 55% read time.

The average read time of gamification emails is around 60%, which is around 5% more than the usual emails.

Need any other reason to execute it in your strategy?

Over to you…

If you need any help with preparing similar emails for your marketing strategy, Monks would love to get in touch.

 

The following two tabs change content below.
Kevin is the Head of Marketing at EmailMonks, one of the fastest growing email design and coding companies. He loves gadgets, bikes, jazz, and breathes ‘email marketing’. He is a brand magician who loves to engage, share insights with fellow marketers, and enjoys sharing his thoughts on the latest email marketing best practices at EmailMonks Blog.

Leave a Reply

Your email address will not be published. Required fields are marked*