Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
Looking for a challenge? If you feel like you're coding the same types of emails over and over again, check out Emre Demirel's Playbook.
He decided to figure out how he could create an interactive email with a “rock, paper, scissors” game that his subscribers could play without leaving their inbox. Emre joined me for our latest episode of Notes from the Dev: Video Edition, and it's sure to get your creativity flowing.
Email gamification is a hot topic in the email geek community, but it's not often you find campaigns that actually pull it off. Emre created this interactive email game to showcase the capabilities of his email agency PotionLabs. And he was kind enough to show us how he built his email masterpiece.
See for yourself below, and don't forget to subscribe to our YouTube channel so you can watch every episode of Notes from the Dev as soon as it comes out.
What is Email Gamification?
Gamification has proven to be an effective way to engage and motivate people in various ways. It's just about introducing gameplay where you wouldn't normally expect it.
If you've used a fitness app that offers incentives or lets you earn badges – that's gamification. If you've played McDonald's Monopoly – that's gamification too. Gamification can be used to train employees, educate students, or motivate the sales team to close deals. Rewards and loyalty programs are also a form of gamification.
Email gamification brings fun and competition to the inbox. And it could be one of the best ways to stand out from your competition, especially if you can offer an interactive email experience. However, as you'll see in this episode of Notes from the Dev, it will likely take some experimentation and hard work.
Interactive email challenges
When Emre thought about how to program a “rock, paper, scissors” game for email, he realized that there would be three major challenges:
- He had to do it Create randomizationr, which could indicate various moves by competitors.
- He had to Build application logic using only CSS to display a specific message based on the result of the game.
- The email you need Conditional rendering for various email clients.
Here's an animation showing Emre's interactive email game in action:
If a developer were to program such a game for the web, they would most likely use JavaScript to complete the task. However, as you probably know, JavaScript is not supported in email and everything has to be created in HTML and CSS.
Emre actually used Mailjet Markup Language (MJML) to start developing his email game. This is because MJML is a responsive framework that works in all major email clients. Therefore, Emre could be confident that coding a component in MJML meant that it would work almost anywhere. Learn more about MJML basics in our episode with Nicole Hickman.
While you could try using AMP for Email to create interactive content for Gmail users, none of the other major mailbox providers currently support AMP. Emre's interactive email game rock, paper, scissors works with customers who use this WebKit Rendering enginewhich mainly affects anyone who uses an Apple product.
That's a pretty big audience on most contact lists. But we'll explain how he handled non-WebKit email clients a little later.
Rock. Paper. Scissors. Shoot!
Here's what Emre had to create to make his game work as an interactive email…
First, he needed a way to “randomly” generate a rock, paper, or scissors image after the subscriber selected the move they wanted to play. Then there had to be logic that knew which message to display depending on whether the game ended in a win, a loss, or a draw/draw.
Emre built this interactive email game out of two main sections: a label container and a form. The label container displays everything a subscriber sees before they start playing. The form section displays the subscriber's move, the computer's move, the game result message and a replay button.
The randomizer
At first, Emre thought about creating a large image with all three movements, which would be animated and rotated to randomly display only one. That is possible. The problem, however, was that there was no good way to determine the outcome of the game using this method. He needed a way to “catch” the random generator inputs to determine the outcome of the game and display the correct message.
Emre got the idea from an Email on Acid blog post that explained how we created an interactive quiz email campaign in 2017. The secret ingredient to this inbox experience is Radio buttons. Basically, you can code an email to display specific content based on the radio button a subscriber clicks.
Emre took this concept one step further and created what you could call a “magic button” (ooooh). There is more to the “Play” button in this game than meets the eye. A CSS animation runs in it.
For a detailed explanation you can watch the video. But basically there are three CSS classes (one for rock, paper, and scissors) that are constantly rotating. When a subscriber clicks play, the computer plays the class listed above. So this is the randomizer.
The app logic
The next challenge was to include application logic that determined who won – the subscriber or the computer. Emre also needed a way to reset the game so his contacts could try again. And yes, he had to do it all with just CSS.
There is no way to code things in CSS based on specific conditions. But Emre also does some JavaScript development where he uses so-called ternary operators, which also work in CSS and enable certain inline logic.
Emre created a container with three different ones
Tags that tell players whether they won, lost or drew. And the CSS logic he created using ternary operators knew which ones
Tag to display based on player and randomizer input.
Finally, another button allows the subscriber to play again. As you remember, Emre embedded this section of the email in a
