Finding randomness within HTML emails

This is a post about how it’s possible to create games and randomness within the limitations of HTML emails. I also talk about how simply having the restrictions imposed on you actually can free you up for creative thinking and problem-solving.

Developing “games of chance” within emails sounds like it’s surely an impossible task. You wouldn’t be wrong in thinking that since you can’t use Javascript to generate a random number or anything like that. There’s no logic, no decision trees that can be ascertained from simple HTML and CSS, especially in the even more restricted realm that emails exist in… right?

The art of constraint

There’s a Latin phrase “multum non multa” which translates to “much, not many”, or this can be interpreted to mean “to give much, but not many in your work”. To do this you must go deep rather than wide, you end up exploring a select few things thoroughly as opposed to exploring many things superficially.

So what am I talking about?

The art of constraint is a theory that comes originally from the world of art, rather than programming. The Oxford English Dictionary defines constraint as a limitation or restriction. So exploring the art of constraint is about accepting and understanding the limits of the medium and then hopefully finding ingenious ways to use them to your benefit and create something beautiful. It can be seen as finding chaos within order; because chaos at a fundamental level, is simply creativity.

Have you ever had to experience the intimidation that can radiate from a truly blank canvas? A blank canvas represents infinite possibilities, a million different directions in which you can go. Having too many potential avenues can mean you struggle to move forward even an inch.

Constraints, however, are paradoxically very liberating to you, the imposed shackles can free your mind and they will literally change how you will approach an obstacle. Take a look at the art form of cubism, for instance, it places many restrictions on what the painter should or shouldn’t do yet it results in a plethora of art.

Bringing it back to coding, if you have ever had to code any HTML emails, you will understand the limitations and restrictions that are placed on you as a developer. You only have a handful of tools and must make square blocks fit into circle holes while duct-taping some fixes to the side and then wrapping it all up in a pretty bow before you even get to QA. Which is when it all falls apart.

Creating something random in HTML emails

I used to make emails for a big gambling company and they asked us to regularly come up with new concepts for emails. I always daydreamed about creating a game of chance within HTML emails, I thought that would undoubtedly be something a gambling company would want to dabble with. After having a think about what would be the most simple game I could make, I decided to make a slot machine.

The idea was that you click the lever on the right and it’s a 50/50 chance to win. You are actually clicking an invisible box that is placed over the lever, which triggers the spin animation and then shows the final screen of either win or lose.

I realised that I could have both invisible win or lose boxes placed in the exact same place on top of each other. Then just have a simple keyframe animation that fully hides one while the other is showing, then flips. This could be done at an incredibly fast speed and the user would never know that they are hovering over something that is actually just flicking between a win or lose. Effectively making it random from their point of view!

Now you could play around with the keyframe animation to make it so that you would win every 2/3 times or whatever you like. It would simply be a case of adjusting the keyframe animation to hold on the “win” lever longer than the other.

Unfortunately, we never got to use this idea in a campaign and to this day I have never seen this technique used within an email. Or even used on the web for that matter since you can just use JS so why would you. Here is the link to the slot machine demo.

I’ve made a quick code pen to help visualise what is going on. You can see that the click area stays in the same position, but the “win” box moves in and out leaving behind the “lose” box. So by simply hiding the win box repeatedly and covertly, the user will think they are just clicking the area to run the game, thus creating randomness within a HTML email.

See the Pen
Pseudo randomness by Dalton Walsh (@daltonw)
on CodePen.

Endless possibilities

There is so much that you can do with this technique within a HTML email, below are some of my other examples I made but never fully finished.

You could create a blackjack game like the example above. It wouldn’t be too hard to flesh out a fully working concept. I wanted to create a mini football shootout game but I never got around to finishing out the functionality for the example I made. You could create a simple Wheel of Fortune game, this one has a 50/50 chance of winning.

I was even planning on building a little RPG style game similar to Pokemon in which you could fight an NPC. You would just build out the decision trees and could even have a bit of a story.