Community Contest: Creative Use of ALT Text

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.

With video:

Without video:

Without image (opacity: 0)

Concept

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, white-space: pre, font-size and line-height. I haven't actually used the alt attribute in this example, I wanted to go even further and provide a full html fallback. To do that I'm setting max-height: 0 around the fallback html, which works in everything down to IE7. For Outlook 07-13 I sub in <v:image /> with position: absolute to overlay the image on top of the text. Anything below IE7 is a shambles, so just hide it all with a conditional comment.

Hello,

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::before pseudo-class. So with the following code, you can apply any style you want as if it was an independent element in your HTML.

* img:before {
    display:block;
    line-height:50px;
    font-size:32px;
    transform:rotate(20deg);
}

Chrome generates the following shadow DOM for each image. So you get the following code to play with in CSS then.

<img src="test.jpg" alt="Your alt text here">
    <div id="alttext-container">
        <img id="alttext-image" />
        <div id="alttext">Your alt text here</div>
    </div>
</img>

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 !

img /deep/ #alttext-image {
    display:none !important;
}

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 :before or /deep/ selectors. But unfortunately, Gmail doesn't support the content property, 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 :before or /deep/ selectors. Yahoo mail supports well the :before selector. But it removes the slashes from the /deep/ selector. And it also prefixes the shadow DOM ids used in CSS (so #alttext-image becomes #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.

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 content property, 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 =)

Hey all!

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

http://www.brightfunction.co.uk/wp-content/uploads/2012/04/pizza-express-email-without-images-547x693.jpg

Join Stop and Shop Survey at TalktoStopandShop and get a chance to win $ 500 Gift Card.
https://www.sweepstakesoffers.com/talktostopandshop-com/

I want the swag so much!

Hoodies? ;)