Tag Archives: alt tags

2013: The Year in Email

2013 was an interesting year. 2012 ended with Oracle buying Eloqua, and 2013 ended with Oracle buying Responsys. Who will they buy next? 2013 began with Salesforce CEO Marc Beniot telling a crowd at CES that email was dead, and then turning around and buying ExactTarget a few months later. It was also the year that marketers finally got over their infatuation with social media after several reports showed that far-and-away the most effective digital channel for marketing is still email.

We’d like to take a look what landed in our inbox over the year. Here’s a round-up of some of the most interesting examples. Some of it is inspired, some of it is confusing, and some of it is just plain awful. Several of the mistakes shown here are things that can happen to any of us, but they stand as good reminders that email isn’t just about writing content and sending it—it is also about proofing and testing.

Alt Tag Fun

Ya’ got something against “T”s?

Alt tag goof

Lyris gets points for using a colored cells with reversed text, but if you ever needed a reminder to check your alt tags as carefully as you check your content, this is it. In Lyris’ defense, at least they had an alt tag. I can’t say the same for Hugo Boss, whose email always lands in my inbox looking exactly the same:

No alt tags

Slightly better—but only slightly—is J. Crew. Here’s their solution to the alt tag dilemma:

weak alt tags

Last September, for a week or two, someone who knew what they were doing must have taken over J. Crew’s email preparation, because suddenly the email was going out with actual, meaningful alt tags:

Good alt tags

Sadly, it appears to have been a blip on the chart. Within a couple weeks they were back to the generic “jcrew.com” alt tags on all their images.

You’re using an image because…?

It’s always heartening to see someone use alt tags to further their message. That can be anything from a simple “Turn on your images to see what you’re missing,” to fully styled alt tag in a colored cell (see The Finer Points of Styled Alt Tags for more on how to do this). But this alt tag from Generator Research takes the cake:

wordy alt tag

Bizarrely, the missing image is nothing more than this same list as a gif file, which raises the question: Why bother with the image at all?

Delivery Problems

Some problems are beyond the control of the sender. Network slow downs, unexpected glitches, and certain browser extensions can ruin the best email design. Here are a few examples of emails that were probably fine back at the office, but ended up a mess when they arrived in our inbox.

Text still rules

Bad image display

This is a great example of why you should always include text in your mailings. We’re not sure why this email from Fab got screwed up in transmission, but had they included some text it would have mattered less. As it stands, the only visible message is something about Pumpkin Pie Cake. Is it a product, a cookbook, or just a joke? I’ll never know because the only other text in this email were the legal notices, address, and unsubscribes mandated by the CAN-SPAM act.

WOT the heck?

WOT effect on display

There are a lot of sneaky pitfalls that can ruin the best planned email. This one from Slate might have been okay had they not decided to convert everything in their mailing into images. They were careful to include the “display:block” command with each of the image sections, but because I use Web of Trust (WOT) with my browser, each of the image segments is slightly displaced by WOT’s symbol insertion. Admittedly, this wasn’t entirely their fault, but their choice to use an image instead of a combination of text and images certainly exacerbated the problem. Had they used actual text for the message and separated the decorative elements from the images that need links this wouldn’t have happened. [Note: For more information on this topic, see our blog post Using Text to Deliver Your Message.]

Subject Line & Sender Disasters

The single most important pieces of text in your email are your subject line and your ‘From’ address. Before they’ve even opened the message, these things will say something about you, and if that something is not good, then it doesn’t matter if that mailing has the best, most persuasive content in the world, no one will bother to look. Here are a some rookie mistakes from people who should know better.

Call me dyslexic

This piece of email came from Digital Marketing News:

Misspelled name
Digital News Marketing = DNM? If you’re going to misspell something, try not to let it be your From address.

Who is ANSI_X3.4-1968 anyway?

ANSI text issue

You may have seen this subject line structure before. The problem is that the encoding didn’t match the chosen character set. The headline used an em dash (it should read: “EEC 2014—Early Bird Special Ends Tomorrow”) but for that to work, the subject line must be encoded properly. You’ll see this most often when using email-injector programs, such as the Javamail API included in Java, instead of the software from a professional ESP. Any decent email marketing software should be able to avoid this problem. But even a single test email would have exposed this problem, so testing cannot be overlooked.

We care, now go away!

Do Not Reply

In our blog post, Of Senders and Subject Lines, we talked about what a bad idea it is to use “DoNotReply” as a sender address. Somehow, it’s not surprising that it’s a phone company that makes this mistake, but the fact they did it on an email claiming that “your opinion matters” almost pushes this one into satire.

The Linkin’ Logs

There is one simple rule in email design: If you have a picture of a product, the link on that picture should go to that product. Sadly this rule is sometimes ignored. Some marketers cut down on links in hopes of improving their deliverability (there are better ways to achieve this), but it can lead to its own problems. Here a few examples of bad linking choices.

Look at this! Now try to find it!

Inaccurate links

Bed, Bath & Beyond was the first out of the gate with Christmas-based emails. Before the candles had gone out on the Halloween pumpkins, BB&B was sending holiday messages. This email forgets the basic rule that when you show a product, make sure that the link goes to a page that features that product. In this email, clicking on any of these items takes you to the main page as noted in the red tabs below the images. In all these examples, the products shown are not on the first page, and in some cases, don’t show up until the last page. It would have been a far better strategy to either show a picture of the first product in the section, or link to the actual products and have the red sub-tabs go to those main landing pages.

No links

Even worse is this email from H&M. Not only don’t the individual images link to the products shown, they don’t link to anything at all. The only link in this email is at the little “Visit us today” text below the image. Way to miss an opportunity H&M. The same goes for NuForce, whose layout suggest there will be links, and was almost custom designed for image-mapped links, but no links exist.

No links

Alignment Issues

Alignment can be tricky. Forget one “display:block” command and everything falls apart. But some things just don’t need to happen. Here are a few problem emails that came our way last year:

Why did the web designer leave the restaurant?

If you haven’t heard the joke already, the punchline is: Because there were too many tables. Web designers hate tables. A few years back, it was mandated that tables should be for tabular dated only and not for image and text alignment. For that, we were told, you should use divs. The only problem with this advice is that someone forgot to tell the email clients, many of whom have barely entered the 21st century when it comes to HTML compatibility. So what happens when you hire a web designer to create your email? Most of the time, it’s not that big of a problem, but there are tell-tale signs if you know where to look. For instance, here is the right edge of three images in an Andrew Marc email:

aminsider2If you look closely, you’ll see that this is slightly misaligned. It’s a very small issue, and clearly the designer decided it wasn’t worth worrying about, but there is really no reason for these images to be out of alignment at all. The designer is showing his (or her) web design background by stacking these images up in a div. A simple table would have eliminated the misalignment entirely. This particular email also contained a chunk of JavaScript—a big no-no in email design, and the white gaps between the images have a whiff of “I meant to do that!” about them.

Still, in the grand scheme of things, it could be worse:

Misalignment #1

Misalignment #2

Misalignment #3

Some of these suffer from the classic missing “display:block” problem, but not all. The Old Navy/Piperlime email at the top was the result of a 100% width assignment on the first cell, instead of the desired 700px width. This was obviously an oversight, but a test email should have caught it.

Microsoft strikes again

We don’t know what it is about Microsoft, but they certainly do like to make designing email a challenge. Every email browser they offer is different. On one hand, Outlook.com can handle more HTML5 commands than any other email browser out there, while Live Mail seems to ignore almost everything. A recent development with Live Mail that’s worth keeping in mind is the way it handles style information, and, more importantly, the way it handles sizing. Here is the visible portion of an email we received recently:

Oversized empty window

And here is the same email after we chose “Display Images”:

With images displayed

This happens if the image or cell has included width information, but not height information. Had this particular image include both height and width, the text portion of the message would have displayed in the window, improving its odds of being read.

Put Your Money Where Your Mouth is

Practice what you preach.

Nobody says email has to be pretty, but if what you’re trying to promote is “beautiful email newsletters,” then you’d better have something to show for it. This monospaced, bland message does nothing to enforce the idea that the author knows anything about aesthetics.

Ending on a Good Note

Not all email is bad news. Some email marketers are doing an excellent job of making email interesting an exciting. Here are a few examples of above average work from the past year.

Thanks for Subscribing

Thanks for subscribing

Everyone sends out some sort of alert to notify people that they have subscribed to a company’s email, but few make it as much fun as Upworthy. The great thing about this notice is that it makes you look forward to receiving the email instead of immediately regretting signing up for it.

Beyond Mosaics

Last Spring, we did an article here that covered the use of Mosaics. Mosaics are a way to use colored table cells to imitate an image. Most of the time, mosaics aren’t worth the effort because they can needlessly increase your email’s file size if you try to make them too detailed, and end up looking clunky if you make them too coarse. Pizza Express in England has found a better way to deal with it by using mosaics sparingly and making them just detailed enough to get the idea across. Here’s a beautiful example of their work from last Valentine’s Day:

Valentine's Day

Normally, the mailings from Pizza Express don’t get this complex, but they always use colored cells to make their email interesting whether you have images turned on or not. In the example above, for instance, the cells use a palette of blue, red, and black for their background colors.

Pizza Express pulls out all the stops for their birthday email design, which looks like this when the images are turned off:

Happy Birthday!

Not bad, but the design goes further by using an animated gif when the images are displayed:

animated gifNice work Pizza Express.

We hope you’ve enjoyed this look back 2013. Perhaps there is some schadenfreude in seeing the mistakes of others, but here are things to be learned: make your email visually interesting, but not at the expense of text, don’t neglect the subject line, in email, tables still rule, and—most important of all—test before you send.

HAPPY NEW YEAR!

The Finer Points of Styled Alt Tags

Whenever you send a mailing that contains images, there is a good possibility your email will end up being read by someone who has the images turned off. Most email clients default to images off, and many people leave it this way. That’s why it is always a good idea to include an alt tag that tells people what they’re missing. A good alt tag will inspire people to turn on the images. Images without alt tags are wasted opportunities.

A lot of people don’t realize that it is also possible to add style attributes to alt tags just like any other text. Styled alt tags don’t work in every email viewer, but when they do, they increase the visual dynamics of a mailing considerably. Like the alt information itself, the style attributes are included within the <img> tag. As an example, consider the following bit of HTML:

<img style=”color: rgb(133, 10, 238); font-family: Georgia; font-size: 60px;” alt=”30% SALE, Today only!” src=”image.jpg” width=”300″ height=”323″>

[IMPORTANT: For reasons known only to the people at WordPress, straight quotes are automatically converted to curly quotes. If you want to experiment with the HTML code listed in blue on this page, you will need to convert all the quotes in the code block back to straight quotes.]

Here is the same image sent two different ways. The example on the left is an ordinary alt tag, while the image on the right uses the code shown above.

Styled alt tag in Firefox

Not bad, but before you get too excited, there are some important things to consider before you use styled alt tags. Not all email clients and browsers handle styled alt tags the same way. The previous example was sent to a gmx.com email address and viewed in Firefox. Now here are the same two image boxes as they appear in Gmail with Firefox:

Styled alt tags in Gmail

In Firefox, Gmail and Yahoo don’t bother with the box dimensions, displaying the alt tags as lines of text instead. While not as useful as a box, which lets us know that we are missing an image, at least the text appears and is styled. But here’s what happens when we view the same email in Chrome:

Styled alt tags in Chrome

The styled information is missing because it is too long to fit on one line. In Chrome and Safari, if an alt tag is too long to fit on one line, it does not appear at all. This also is true for alt tags without style information, but, as you can see, the alt information fits without a problem as long as it isn’t styled. By increasing the font size, we’ve caused the text to wrap and disappear. The same thing happens on iPhones and Android phones.

By far, the least friendly applications when it comes to styled alt tags are the email viewing options offered by Microsoft. In Hotmail and Outlook.com, for instance, an email with the images turned off displays gray boxes with neither cell colors nor alt tags, styled or otherwise. In Outlook and Outlook Express, all styling is eliminated and every alt tag is prefaced with a statement about the protection of privacy. In Internet Explorer, styled alt tags viewed on non-Microsoft client sites keep the color information, but all other font characteristics are lost.

Opera will display styled alt tags, but, like Safari and Chrome, lines that are longer than the box width do not display properly. Unlike those browsers, however, Opera displays whatever text will fit the width of the box and the rest disappears off the right side of the image box.

To help you decide whether or not you want to use styled alt tags, we’ve constructed the following chart, that shows how the various clients, applications and browsers handle images and alt tags.

Styled Alt Tags chart

Based on the data in the chart, the most useful feature of styled alt tags is the ability to assign a color value to an alt tag, especially if most of your recipients are using Internet Explorer. It is the one style attribute that gets delivered across the most browser platforms. If you have alt information for a cell with a dark background color, adding style=”color: rgb(255, 255, 255);” to the IMG tag will help make the alt information visible. Here are two examples. In the box on the left, the alt tag has no style information. You can see that even though the cell color is slightly lighter than the one used for the styled alt tag, the alt information is difficult to read. The example on the right has the color attribute shown above added and is much easier to read.

Alt tag colors

The appearance of the text changes from browser to browser, so the alt tags should be checked by sending your test emails to one or two people who have access to the various browsers of various email clients. This is the surest way to check that your tags are viewable across various email clients and browsers. If you want to make the text appear larger, or in some other typeface, you’ll need to keep in mind that not everyone will be able to see your handiwork.

Using styled alt tags is a great way to add pizzazz to your email. As long as you are careful about the length and you test the email’s appearance across various browsers, there is really no downside to using them. The set-up is minimal, and you can always copy and paste the HTML information from previous emails once you’ve decided on styling attributes you want to use on a regular basis. If a substantial number of recipients are using Chrome and/or Safari, you’ll need to make sure that your alt tags are kept short and that any styling does cause the text to wrap. Also keep in mind that, as attractive as they are, they are not a substitute for actual text in the email (see Using Text to Deliver Your Message).

Want to learn more about how to use text and images in your email for maximum deliverability and effectiveness? Then check out our new white paper, Using Text and Images. Available in the Resources section of the Goolara website. Click here for a direct link.

Using Text to Deliver Your Message

Email design isn't web design.Email design has its own rules and requirements. In this article we look at ways to improve the effectiveness of your email messaging with the smart use of text.

An important aspect of email is, of course, design. Graphic artists spend a lot of time adjusting images and page layouts to make their work look as perfect as possible. To the lay person, who is not accustomed to the ways of a designer, their endless fussing over which of three nearly identical colors they should use might seem like overkill, but graphic artists understand that good design is important to sales. A company’s website, brochures, business cards and everything else need to reflect their brand and they need to look good.

When the Internet came along, it threw a bit of a curve ball to many graphic artists. They had to learn new skills to get around the limitations of HTML. These are the same skills they need to make good looking email, but the number one mistake made by many graphic artists is to treat email design the same as web design. Email brings with it a host of unique design issues that are completely different from web design. The biggest difference comes in the way email handles images and text, and this is where many designers fall down.

A common technique for controlling the appearance of text on a website is to place the text in a graphic. In this way, the choice of fonts, placement, and other characteristics can be maintained even if the viewer does not have those fonts installed. But using this technique on email is not a good idea, for two reasons.

No Image = No Text

The default setting for most email clients is to block images. Among smart phones, only the iPhone displays images as a default. Of course, some people turn on the images, but most people tend to leave things with the default settings; it’s human nature.

Good Alt Tags will go a long ways toward helping people understand what they are missing, but even here, not all email browsers display the alt tags, and Microsoft Outlook 2007 goes one step further, adding its own security messages to the empty image boxes. Put another way, if you are using graphics-based messages, over half of your recipients are receiving it in the blandest form possible, and some aren’t seeing it at all.

If you really want to make sure that your message is reaching your public, you’ll need to offer some text to the recipients beyond what might or might not appear in your alt tags.

Text-to-Image Ratio

ISPs cannot read the text in images. Spammers know this and sometimes use images to get around filters that might shuttle their content automatically to the bulk folder. As a consequence, many ISPs now look at the text-to-image ratio to identify possible spam. When a marketer puts all the focus on images, the deliverability metrics suffer (as do open and clickthrough rates). Remember that the ISPs are ultimately the ones in control in this process, and a beautifully crafted image with the best marketing message in the world means nothing if the user never sees it.

A Tale of Two Emails

For purposes of this article, I am going restrict my conversation to two emails I recently received. One is from Macy’s and the other is from J. Crew. One is done with a good understanding of email and how it works; the other is designed using the traditional text as image approach and is less effective. I’ve used a few different email browsers here to show how different browsers treat missing images. First, here’s the Macy’s ad with images (only the top is shown here—there are more images below):

Macy's ad with images

Now, here’s the same ad with the images turned off (in Gmail):

Macy's ad with no images

As you can see, almost no information is lost. The ad still gets the point across and aside from the Macy’s logo and some other small formatted items, all the information you need is visible and visually interesting.

Now let’s look at J. Crew. Here is the ad with the images displayed:

J. Crew ad with images

It looks fine, but here’s how it looked when it arrived in my inbox (in Live Mail):

J. Crew ad with no images

Not so interesting anymore. What does this tell me besides the fact that it came from J. Crew? Even a few reasonably commented alt tags would have helped here, but all we get is “JCrew.com.” What makes this email so frustrating is that the problem could have easily been avoided with some care and forethought. Let’s look at the hero image. Here’s the original:

Example from J crew

The first thing you’ll notice is that the text is separate from the image. This makes it a perfect choice for using actual text instead of a graphic. By dividing the image into sections and placing these sections in a table, we can achieve the following:

alternate version of j crew hero image

Aside from a font change, this version delivers the same message, but more importantly, here is this version of the message when the images are blocked (in YahooMail):

J crew alternate without image

Now the message of the email is still rendered and readable to all recipients, regardless of their email browser settings. Graphic designers probably won’t find this solution particularly satisfying, but the visual dynamics created here by the text make it far more likely that recipients will respond to the email.

Everyone wants the best looking email possible. Of course, you want your images to display, and, of course, good design is paramount to better email response rates, but if it’s a choice between looking good and selling your products and services, then the choice becomes obvious. Images are great for making email visually appealing, but remember that text in email, like text on your website, is always more effective when it is left as text and not converted into an image. Plan accordingly.