Notes from the Dev: Using CSS Variables in an Interactive Wordle Email 

Interactive emails are showstoppers that really help you stand out in the inbox. But they’re not easy to pull off unless you’ve got some serious email coding skills.

In this episode of Notes from the Dev: Video Edition, we’ve got just the guy (or bloke) for the job. Jay Oram of the digital agency ActionRocket joined me to explain how he developed a Wordle game for ActionRocket’s weekly newsletter.

To refresh your memory… People went crazy for this word guessing game last year. Wordle was the most-Googled word of 2022, and the game’s creator sold it to the New York Times in a seven-figure deal.

Sometime around the height of the Wordle craze, the email geek community questioned who would be the first to deliver a Wordle game for the inbox. Jay rose to the challenge. His secret trick? Using CSS variables.

Watch the video below to find out how he built the interactive Wordle email and keep reading for all the details.

When people solve a Wordle puzzle, they typically have six chances to guess the word of the day using the process of elimination. Players make a guess by typing in a word. If a letter isn’t in the answer at all, the box it’s in will be gray. Letters that are in the word, but in the wrong spot, are yellow. And the right letter in the right spot will be green.

To build this gamified email, Jay needed an interactive keyboard, the ability to clear and reset the puzzle, a way to change colors of letter tiles based on the subscriber’s input, and a whole bunch of CSS variables for all the different possibilities.

There’s even a surprise animated GIF of the party blob emoji after you figure it out. Here’s how it looks when you win:

Jay says it took him three or four hours to get his interactive Wordle email working. (Of course, he’s a living legend among email geeks – so don’t compare yourself.)

To make it happen, he used the trusty checkbox method for interactive emails. Jay wrote about this for the Email on Acid blog several years ago. The method involves using the :checked CSS pseudo-selector with a form that has radio buttons or checkboxes to hide and reveal content in an interactive email.

Basically, what you’re doing when you code emails this way is replicating JavaScript functionality that toggles things on and off.

For example, here’s an interesting use: Jay coded separate keyboards for each of the five letters in the puzzle. When a subscriber clicks a letter on the keyboard, it hides that keyboard and reveals one for entering the next letter. But because they are identical keyboards, and it happens so quickly, recipients don’t notice.

Note that the so-called “click-to-reveal” or “punched card” method is only supported on Apple Mail, Outlook for Mac, and some other email clients using the WebKit rendering engine. The same goes for email client support for CSS variables, which are a big part of the Wordle email.

So, be sure you have a view in browser link for subscribers on Gmail. For interactivity in Gmail, you could try creating a Wordle game using the AMP for Email component amp-bind, which the folks at Mailmodo have done.

Also known as custom properties or cascading variables, CSS variables are entities containing specific values that the coder defines and that can be reused and repeated. The variables provide an effective way to manage property values. Web developers often use custom properties to cut down on repetitive CSS throughout a website, which makes things easier to update.

You can create CSS variables using the :root pseudo-selector when you want the variables to be applied globally, but they can be applied to any specific element. You insert or access them using the var() function. CSS custom properties are formatted using two hyphens before the name, and the basic syntax would look something like this:

                            

                                :root {
  --name-of-variable: 'Update the value here';
}

css property: var(--name-of-variable); 
                            
                        

If you’ve never used CSS variables in email code, that’s no big surprise. Jay says most developers don’t, and its support is limited to Apple Mail and Outlook for Mac along with some of the smaller email clients.

In the Wordle email, CSS variables are used to define and display options for both letters and colors.

Jay says the main reason for doing this is to avoid repeating tons of code in interactive emails. In the video, he walks us through some basics of using CSS variables in email. Here are some important notes:

1. Each variable is only related to the element it is within, but custom properties must be in a CSS selector.
2. Place CSS variables in a :root selector if you want to use them throughout the entire document. But that’s not required.
3. You decide what to name CSS variables. Make sure they start with two hyphens, end with a colon, and don’t contain any special characters. They are also case sensitive.
4. Variables can be colors, numbers, text, spacing – just about anything you can code.
5. Use a comma after the variable name to define a default value that can serve as a fallback.
6. You can also use CSS variables within media queries to create different experiences depending on screen size.

Here’s Jay’s example code for color variables. It applies a red font color to the entire document while specifying purple text in a specific module of the email. It also has a fallback/default color of pink.

                            

                                <style>
:root {
--fontcolor: red;

}

.module {
--fontcolor: rebeccapurple;

}

.testcolor {
color: var(--fontcolor, pink)
font-size: 40px;

}

</style>
                            
                        

See all of Jay’s example code and play around with it on Parcel.

So again, the main purpose of CSS variables is to reduce repetitive coding in interactive emails. It supports the DRY (Don’t Repeat Yourself) approach to coding. To read a more in-depth explanation, check out the CSS Tricks guide to custom properties.

Another potential use for CSS variables that Jay and I discussed is using them to manage and update brand colors in an email design system.

Not only is Jay Oram an awesome email coder, he’s also a super generous creator of content for email geeks. Here are just a few of the popular articles Jay has written for our blog:

• Media Queries Demystified: CSS Min-Width and Max-Width
• 10 Easy Ways to Improve Your Mobile Email Design
• How to Code Search Bars in Email

Jay was also a presenter at Email Camp 2022. Watch him live code a click-to-reveal module and hear more about using CSS variables in interactive emails.

Plus, Jay and I recently faced off in a debate over using artificial intelligence for email development. Watch a replay of the webinar Email Geeks vs. ChatGPT to find out about our thoughts and opinions.

Follow @emailjay_ on Twitter and reach out to him in the Email Geeks Slack community. And if you’re not already subscribed to Email Weekly from ActionRocket, do yourself a favor and sign up right now. When the ActionRocket team isn’t using their newsletter for cool inbox experiments like the Wordle email, they’re delivering an excellent collection of curated content for marketers of all types.

While you’re in a subscribing mood, why not subscribe to Email on Acid’s YouTube channel? That way you’ll never miss an episode of Notes from the Dev.