This past January we held our very first Litmus Community Contest. Community Contests will be held monthly and encourage Community members to explore new techniques and push the boundaries of email design, all while showing off some impressive email design skills.

Our first contest asked members to try out new, creative uses for one of our favorite aspects of email design: ALT text. With 43% of emails blocking images, providing alternative text (ALT text) is one of the quickest wins for email designers. We wanted to see if Community members could push ALT text beyond just basic styling.

While only a few members entered, we were blown away with the results—so much so that we couldn’t pick one winner. Instead, we crowned both Michael Muscat and Rémi Parmentier the winners of the very first Community Contest.

Winning Entries

While a lot of email marketers are familiar with using ALT text to provide information about images even when they’re disabled, few have really explored anything beyond the basics. That’s not the case with our two winning entries, which both utilized some truly cutting edge techniques for optimizing emails even in the absence of images.

Michael Muscat’s Space Invaders

While not technically using ALT text, Michael Muscat’s winning entry shows off an alternate method for handling email clients that disable images. In an homage to the 70’s classic Space Invaders, Michael uses ASCII characters to provide a fallback for an included video of the vintage video game.

When the video is disabled, the ASCII block characters act as pixels and allow Michael to build a wonderful representation of the familiar Space Invaders screen.

What really pushes this entry into new territory is Michael’s use of CSS3 animations to actually make those mock-pixel graphics move, mimicking the coming alien onslaught and the back-and-forth motion of the laser cannon.

Check out the code with Litmus Builder →

Rémi Parmentier’s Shadow DOM

For his winning entry, Rémi took advantage of one of the more experimental browser features, the shadow DOM, to gain deeper access to ALT text and make it dynamic.

The shadow DOM allows individual HTML elements to be broken down into even more granular elements, giving designers even more control over their display and use. In this example, Rémi accesses the ALT text and combines it with CSS pseudo-elements and the content property to add even more ALT text. Finally, using CSS transitions, he animates between the ALT text when a user hovers over it.

Check out the code with Litmus Builder →

Explore More in the Community

You can see all of the entries, as well as read more about how Michael and Rémi pulled off their email acrobatics, in the Community Contest discussion thread. Be sure to check out all of the entries’ code examples using Litmus Builder.

Join us next week as we announce the theme of the second Community Contest, along with some new prizes.

Not a Litmus Community member?

Join the Community →