Community Contest: Creative Use of ALT Text
EDIT: This contest has ended.
It's a new year and the perfect time to start up some fun new stuff in the Community. Starting right now, we're going to be doing a series of monthly Community contests–letting you show off your creativity, design chops, and even win a few prizes. So let's kick this off!
Here's the challenge: Design an email that uses ALT text in a creative way. What you design is entirely up to you, so long as you include some images with ALT text. The more innovative the use of ALT text, the better!
We'll be judging based on creativity, overall design, and code implementation. The contest ends Monday, January 26th. The Litmus crew will then judge the entries and announce the winner that Wednesday.
To have your entry counted, you must follow these guidelines:
- You must be a Litmus Community member.
- You must have a filled out Community profile, so that we can easily get in touch with you.
- You must submit your design as a Builder embed in a comment on this discussion thread. Here's how to do that.
- All entries must be submitted on or before Monday, January 26, 2015.
For this first contest, the winner will recieve 1 month of Litmus Plus and a Litmus care package full of Litmus swag.
Go forth and design some emails! If you have any questions, just leave a comment (along with your entry!).
And the winners are...
We honestly had a hard time picking our favorite entries, so we've decided to call it a tie. Both Michael Muscat and Rémi Parmentier are the winners of the first Community Contest. They'll both receive a free month of Litmus along with some Litmus goodies.
We'll be back next month with the second Community Contest.
Here's a little animated alt-text for you, won't work everywhere but will fallback to static text.
To see the animation you need to click 'edit email' then 'toggle images'.
Credit to my colleagues Kuming Kao and Myles Perry for their help with the artwork.
Final submission, works a little better across mail clients. Could probably get this working in Outlook 07/10 with a little more effort. Strangely it works in Outlook 2013 only.
Without image (opacity: 0)
The basis for this email is the use of ascii blocks to create an alternative representation of graphical images. This produces a similar effect to email on acid's mozify.
Each block represents one pixel, and spacing is controlled using monospaced fonts,
line-height. I haven't actually used the
altattribute in this example, I wanted to go even further and provide a full html fallback. To do that I'm setting
max-height: 0around the fallback html, which works in everything down to IE7. For Outlook 07-13 I sub in
position: absoluteto overlay the image on top of the text. Anything below IE7 is a shambles, so just hide it all with a conditional comment.
I love the idea of this contest. So I gave it a go. What I wanted to do was to manipulate alt text in the most modern way using the shadow DOM. This way, you can manipulate the alt text like any other elements with CSS. This is very experimental. In order to see this correctly, you'll need to try it in Firefox 35 or later, or in Chrome 42 or later. (You can download Chrome Canary to have version 42). And both Firefox and Chrome have different ways to deal with alternative texts.
In Firefox, you can simply style alt text using an
img::beforepseudo-class. So with the following code, you can apply any style you want as if it was an independent element in your HTML.
Chrome generates the following shadow DOM for each image. So you get the following code to play with in CSS then.
Then, you'll need to use the
/deep/selector in CSS to target the img's shadow DOM. With the following rule, you can finally remove's Chrome default broken image icon when an image is not available !
Please note that the
/deep/syntax will very soon be replaced by a new
>>>syntax. So the previous selector will become
img >>> #alttext-image.
I made a few tests in Gmail, Outlook.com and Yahoo. Turns out Gmail has the best support. Gmail keeps intact all the rules based with
/deep/selectors. But unfortunately, Gmail doesn't support the
contentproperty, nor negative margins that I use in my demo. (I could probably do it in another way, but I thought it was enough for now.) Outlook.com removes any CSS rules containing
/deep/selectors. Yahoo mail supports well the
:beforeselector. But it removes the slashes from the
/deep/selector. And it also prefixes the shadow DOM ids used in CSS (so
#yiv3063650175alttext-image, rendering it useless).
Even though it's still very fresh and experimental for me today, I think this is very encouraging for email developers. It already works in Firefox. And in a few months, it should land in a stable version of Chrome. So this will lead to more creativity in emails with images off.
Please note that it seems that way Litmus Builder handles images off is in conflict with Chrome for the use of these techniques. Litmus Builder also doesn't seem to support Emoji. The Litmus Builder version should work fine in Firefox though (but without emojis). So I would strongly advise you to see the full demo on my own server (I'm sorry if this against the rules, but I just couldn't get it to work on Builder.)
In case you can't get it to work, here's a GIF version of it.
Looks like /deep/ and ::shadow are no longer supported in Chrome as of version 63. As best as I can tell there is no way to remove the broken image icon in Chrome now.
Original idea, nice work! (:
Very cool, didn't know about
/deep/will have to read up on that and the new
>>>could open up a few more hacks :)
Mind filling out your Community Profile, Remi?
My bad, I thought everything was complete. Is it okay now ?
In case you need a primer on ALT text in email, here's a good article on it in the Learning Center: https://litmus.com/community/learning/12-alt-text-in-html-email
Dynamic ALT Text
I've been toying with the idea of 'dynamic ALT text' for email. It's pretty hard to achieve in an elegant fashion, since you can't specifically target the HTML content of ALT text. You can't adequately change ALT text with the
contentproperty, which I tried hacking around with.
So, one way I'm testing out dynamic ALT text is to essentially have the same image twice in the HTML with different ALT text, and then hiding/showing that image based on the desired behavior. For my example, the idea is that for some clients like Gmail app you could display shorter ALT text with images off for mobile.
Would love all of your feedback! Check it out in action here:
Note: I can't win this contest, only entering for fun =)
You could try wrapping the image in a div and use a
::beforetag on that with some dynamic css
contentmight have to play around with
z-indexto get keep the text under the image. Not tested, just an idea...
Just a quick reminder that today is the last day to enter this email design contest. If you have any last minute submissions be sure to get them in! We can't wait to see what you all have cooked up =)
Pizza Express emails must win
Join Stop and Shop Survey at TalktoStopandShop and get a chance to win $ 500 Gift Card.
I want the swag so much!
Sorry, hoodies are staff-only...
You have no idea how many I tried to pinch from their office.
They better not have given you one!