It’s that time again! Our annual looks back at email shenanigans. The things that worked and the things that didn’t. We look at the clever, the ill-advised and the sloppy. For our first example, we have one that is both clever and ill-conceived.
Please Read my … Email
As a rule, we don’t like to talk trash about the competition. We all make mistakes, and let he who is without sin, et cetera. Still, just to prove no one is above making mistakes, not even email marketing software providers (ESPs), here’s an example that turned up in our inbox earlier last year:
Look at the text above the blue banner. This has to be the most literal interpretation of the term “preheader text” you can get. At first glance, it might seem like it was intended as a placeholder, or maybe a novice worker was asked to “put the preheader text” at the top of the newsletter so they literally did. What they were trying to do here was a little too clever for its own good. By itself, the “Do’s and Don’ts of” subject line makes no sense, but if you receive the email in a client such as Gmail, which also displays the first text in an email, the message reads: “Do’s and Don’ts of…the preheader text.” If you click on the masthead it takes you to this:
It’s an interesting idea, but unless it’s viewed under exactly the right conditions, the concept falls apart.
This Crazy, Upside-down World
This also may have been intentional, but, like the previous example, there is nothing in the copy to indicate it. The fact that it advertises footwear by the avant-garde fashion designer Bernhard Willhelm might have something to do with it. but from here, it looks like they simply forgot to look at the email before sending it.
A Browser is not an iPhone
One simple way of checking the responsiveness of an email in a browser is to reduce the horizontal size of the browser window and see if the content re-positions itself for the smaller window. While this quick-and-dirty techniques works a lot of time, it can also fail. Witness the case of this mailing from FuncheapSF, a newsletter that lists free or cheap events in the Bay Area. If you check this by resizing your browser window, everything will look fine, but suddenly everything is out of whack on an iPhone.
Getting the dimensions right can be tricky and should be tested before sending. B&H Photo is usually pretty good about this, but here’s one that slipped by them:
If you check this one in a browser, it functions as it should. The problem is between the media query and the max-width. You’ll only encounter it if you look at the email on an actual iPhone, or an email rendering service that can duplicate the iPhone environment accurately. Checking it on an actual phone is safer.
E for Effort
This past Halloween, Microsoft came up with a fun little email that offers a scratch-off panel that lets you use your mouse or finger to reveal a free offer. While it doesn’t work in all email clients, it offers a fall-back that will take you to a website where you can experience it outside of the email environment. Except Firefox, which takes you here: The funny thing is, when we opened the same email in other browsers, it did let us try out the scratch-off feature, but told us we didn’t win anything. At least the Firefox mistake gives us a discount.
Hurry, They’re Going Up Fast!
Whoever put together this email for the sports apparel and footwear store Under Armour wasn’t paying close attention. Normally the strikethrough price would be higher than the one you’re now offering (shown in red). Does anyone ever want to pay more for something that’s advertised at a lower price?
Self-Responding Email
As I’m sure you’ve noticed, emails with the same subject line and content are threaded in Gmail, so that if you and a friend are sending emails back and forth on a specific subject, these messages don’t completely takeover your inbox list. It’s a nice feature and it rarely has anything to do with email marketing since each new mailing is, as a rule, unique. A marketer might resend a message because the links were screwed up (although you don’t have to do this with Symphonie), but even then, they would normally change the subject line to let you know why they are sending you the message again. Here’s a case in point:
The content of these two emails is the same. Only the subject line and preheader have been changed, with the former subject line now appearing as the preheader.
But that’s not what’s happening with the Illyusa emails. The subject lines, and the content for these two emails is identical, and all the links seem to work in both emails. Perhaps they forgot they’d sent the message and sent it again. Or perhaps their email marketing software handles the email addresses in each segment as separate entries (a bad practice—see List Segmentation Landmines for more on this). Whatever the case, we ended up with a threaded promotional mailing.
A more extreme version of sending the same thing twice came from Forever 21, who actually pasted the same content into an email twice:
This could be something as simple as a person trying to paste finished content into their email marketing software and accidentally hitting the paste button twice. On the spectrum of email mistakes, this is minor.
Email as a Predictor of Business Honesty
At first we were confused when we opened this email. We usually read email with the images turned off at first to see how people are handling alt tags. Some email readers will put in default messages about missing images; others, such as Thunderbird, display nothing unless there’s an alt tag. Even so, if all of the images are missing, there’s usually the required fine print at the bottom to give you some idea of what you’re looking at, but not with this particular email. When we opened it, it was completely blank. After assigning it as spam, We checked out the message source and found the content consisted of two image with href links. The top image would have been acceptable, but turning the physical address and the unsub link into a graphic is always taboo. A closer examination of the email revealed that it was phony from top to bottom. A good rule of thumb: If the unsubscribe link is an image, mark it as spam.
We get a lot of spam, but our favorite junk mail of the year came from this knucklehead:
It sounds so self assured. Putting aside, for the moment, the bad grammar, the fact that we don’t have a webcam attached to our computers, and that claiming an email came from our own account is not a good threat to try on someone who works in the email marketing industry, this scam is the king daddy of scam failures, Worried that spam filters would identify this for what it is, the scammer converted the entire message to a base64 encoded image! This means that even if you did want to give this bozo your money, there’s no way to copy and paste the bitcoin address per the instructions. All you’ll do is drag around the image.
Beanie and Switch
Straight to Hell, a company specializing in hipster clothing, sent out an email advertising their new line of beanies. Most of this email was done well, with pictures of each beanie, and each image link going to that particular beanie. The only problem image was the first one, shown here. Which, when clicked, takes you to a page about their leather jackets, the subject of their previous mailing. Whenever an email has lots of links, and you’re working off an existing email there’s always a danger of this. Check every link!
This gets back to a topic we’ve discussed in the past and will, undoubtedly discuss in the future. If you’re going to show a product, make sure the link on that item takes you to the page containing that item. Too often, we click on links to pictures of products, only to discover that the product is buried five pages deep in the display listings, but this next example is even more insidious than that:
Putting aside the fact that boots are not accessories, and ignoring the mysterious “si” that appears between the images at the bottom, clicking on the boots takes you to Forever 21’s sale section. After scrolling through all 15 pages, we never did find these boots. Oh well, they probably wouldn’t fit anyway.
The Curse of the Template
Templates are a great way to get an email designed with a minimum of work. The only problem is that it’s also easier to miss things such as links. That’s what we suspect happened with this email from Screen-o-matic. Most of their social links work, until you get to the Instagram icon, which contains no link.
While we’re on the subject, We received an email the last week of 2019 using this social bar:
See any problems? Google shut down Google+ a year ago. Clicking on this link will get you the Google page explaining that the service no longer exists. Do all the social icons in your mailings work? Are you sure?
The other problem with templates is the danger of overlooking placeholders:
Whoever put this together should have noticed the empty content box at the bottom of their mailing, or, at the very least, got a second pair of eyes to look at it.
Problems of the Past
The other problem with previously-constructed emails is that if you never checked them thoroughly across all browsers and email clients, you might have issues that pop up again and again. Here is a problem that Target has had for at least a year now. In most email viewers, this email looks fine, but in Microsoft Windows’ Mail program, you get the rather confounding problem shown above. The image on the right looks fine, but the image on the left has the words “The picture can’t be displayed” appearing across the top. It seems like a strange thing to say, given that the image is actually there. Fortunately, the buttons that appear on the images make it a lot easier to trace the problem. In this case, it turns out that the folks at Target have inserted the image on the left as a background to a table cell, rather than simply place the image in the cell as was done on the right. An empty image placeholder sits inside the cell, for some reason. Since that image can’t be displayed, it results in the message over the background image. Considering that the audience for this particular type of email is the general public—the very people that are likely to use the Windows Mail program—and that the problem has existed for over a year, someone should have noticed it in the Target marketing department by now.
I Talk Real Good!
Really Good Emails is a website that offers a selection of recent emails that they think are particularly outstanding. It’s a good place to visit if you are looking for creative inspiration. Normally, their emails are well done, but this one came in a couple months ago that reads as if it was written by someone for whom English is a second—or maybe, third—language. RGE responded a couple days later with an apology that also serves as an enticement to explore their site further. Well done.
Color Theory 101
Considering the importance of good color use in every other aspect of marketing, it’s surprising how lackadaisically many marketers treat color in their mailings. The number one mistake comes from marketers who don’t bother to think about how their mailings will appear when people haven’t turned on the images. In the image above, the links are virtually impossible to read. This could have easily been remedy with a color:White (or color:#ffffff) style added to the alt text (for more on this, see The Finer Points of Styled Alt Tags).
While the absence of linked text color formatting is the number cause of unreadable text in emails, sometimes, the problem comes down to bad design:
Gold and pink are great colors for suggesting a certain pampered luxuriousness, but they don’t always go well together.
Oops…Just Kidding!
Petco isn’t exactly a fly-by-night organization, so I’m surprised to see that whoever is in charge of their email marketing thinks it’s okay to use techniques that are normally the providence of spammers. Neither of the emails with “Oops” in the subject line is an apology. They are simply promotional mailings. The email marked ‘CONFIRMED” is just an attempt to get you to use their dog grooming services. The fact that it’s all caps only furthers the suspicion that Petco’s email marketing manager comes from the world of spammers.
Click Here to See This Picture, Again!
If you’re going to add a link to an image, the best thing to do is to add a link that takes you to the page that the image references. Vinegar Syndrome did add a link, but it’s a link to the image in the email. Clicking on it just shows you the image by itself. I’m sure this one is a mistake. Remember to check your links. Fortunately, Vinegar Syndrome has provided other links in this mailing.
Dear Me
Missing names are a common mistake. They’re usually the result of using a mail merge command that requires content in the first name field. The problem is easy to avoid by using dynamic content instead. That way, if the first name field is empty, you can finish the salutation with something meaningful (e.g., “Dear Reader,” Dear Subscriber,” etc.). They also lose points for the white type in the footer on a pale pink background.
Blackboard Bold or Spam Folder Bait?
You may have received an email or two that appears to feature a unique font in the subject line and wondered “How’d they do that?” The answer is, the same way they use emojis in a subject line: by using alternative Unicode characters. Buried in Unicode are a few special characters that are virtually identical the standard alphabet except for their appearance. The most popular ones are those called the mathematical double-struck characters, sometimes referred to as “𝕓𝕝𝕒𝕔𝕜𝕓𝕠𝕒𝕣𝕕 𝕓𝕠𝕝𝕕.” There is also 𝕱𝖗𝖆𝖐𝖙𝖚𝖗 𝕭𝖔𝖑𝖉, ⓑⓤⓑⓑⓛⓔ ⓣⓔⓧⓣ, 𝒸𝓊𝓇𝓈𝒾𝓋ℯ, and many others. As fun as these things are to play with, we can’t recommend using them. They are often used by spammers to try and get their messages across without tripping the keyword searches, so there’s a higher chance that your email will end up in the junk folder with these characters. If you don’t believe it, take a look at your junk folder.
That’s it for this year. Do you have any examples of email marketing fails that you’d like to share with us? If so, let us know in the Reply box below.
Here we are again. Another year has come and gone. As always, there was no shortage of email flubs this years and we’ve collected a few of our favorites. Interestingly, we saw fewer of the “Dear [customer name]” errors that used to plague email marketing. Either people have finally made sure that their name fields contain information, or they’re starting to use dynamic content more. Either way, it’s nice to see that one go away. We’ll start the list with the one thing that doesn’t appear to be going away: the inactive unsubscribe link and CAN-SPAM violations.
Don’t You Dare Unsubscribe
After receiving ten unsolicited emails in just a few days from a company pretending to be Dawgs—a purveyor of ugly sandals—I tried to unsubscribe. This is what I got. How much of this is the sender’s fault and how much is the fault of their ESP, I can’t say, but needless to say, all of their emails went straight to the spam folder.
Unsubscribe? Never heard of it!
How do I count all the things wrong with this email? From the needless word breaks to the disconnect between the offer (car rentals) and the company offering the deal (North Hills Clothing), this email cries “spam” at every level. How it ended up in my inbox is beyond me. I never would have clicked on the unsubscribe link on such a suspicious email, but this one doesn’t even have an unsub link!
See, We’ve Got an Unsub Link. I Think…
East Midlands Trains does a good job of providing their physical address, and it looks like they’ve provided an unsubscribe link, but click on that link and nothing happens. A look at the email’s source code show where the problem lies:
<a href=”<%unsubscribe_link_text%>” target=”_blank” style=”text-decoration:underline; color:#333333;”>How to unsubscribe.</a>
There should be an actual URL listed in this href. Somewhere along the line, the unsub link got screwed up. Whether this was the email’s creator typing it in and accidentally using the wrong number of percentage signs, or HTML that was copied verbatim from a different ESP is hard to say.
Click Here. Go ahead. I dare you.
You can click on that unsubscribe link all day and nothing will happen. This is an odd one. If you look at the email’s source code, you’ll find an unsubscribe link that works and a physical address (Royal Caribbean Cruises), but you won’t find either in the email when it’s opened. There is an unsubscribe, but the one that’s displayed is missing its URL. It’s a sloppy piece of coding that has the body copy closing before the final content. Add to all of this that the email supposedly comes from Amazon but clearly does not. This is either badly designed spam, or phishing or both.
We’re Experts!
The above example is the bottom of the page on an email. Yes, that blank white area below the signup button is part of the email. At first it may look like the information required by CAN-SPAM is missing, but it’s there. The problem is that the sender decided to use a dark orange background image and set the overlaying type (the physical address and links) in white. This email looks fine as long as images are turned on, but not everyone turns the images on. When the images are off, you end up with a seemingly empty white space at the bottom of the email. This error is bad enough on its own, but this particular email came from another email marketing service provider. Out of professionally courtesy, I won’t name them, but the “Friendly From” in their sender line refers to them as an “Email Markeitng” (sic) service. As if all this isn’t enough, the mailing is filled with buttons asking readers to “Read More” or “Check It Out!” but none of these buttons are linked.
We Prefer to Call It…
This runs dangerously close to violating CAN-SPAM, which specifies that mailings must have a clear unsubscribe link. Here they’re trying to be clever. It didn’t help that clicking on the link went to an unsubscribe page that requires one to enter their email address. Guess which email went into the Spam folder?
Readability is So Last Year
Gucci likes to stay fashionable, but sometimes fashionable and readability collide. Pink and gold might be an interesting combination for apparel, but it makes a lousy combination in a text box.
Did You Say & or 0?
This one confuses us. The HTML clearly shows that special characters labeled “&” were inserted between each word in this headline. That’s the HTML code for an ampersand, but there’s no reason for for ampersands to appear between each word in the headline. The most likely cause is the code was copy and pasted from one program to another, leading to the insertion of this character for no good reason.
Button, Button, Who’s Got the Button?
In the grand scheme of things, this is a pretty minor infraction, but it’s if you are going to make a table cell in your email look like a button, it’s better to put the <a> tags around the cell instead of the type. In this example, you’ll only activate the links by clicking directly on the type. Clicking within the boxes has no effect.
We’re a Real Company, Honest!
We can’t tell whether or not the way the words “social media” run down the left side of the image is some misbegotten design idea (we think not), but the CanStock watermark on the image is unforgivable. If you plan to use an image, either pay for it, or create your own version (paying for it is usually cheaper). Sending out email like this makes a company look suspiciously like a fly-by-night affair. Marketing Knowledge Cloud isn’t such a company, but you couldn’t tell it from this email.
Even Alt Tags Can Be Wrong
This one nearly caused my brain to explode. You can see in the text I’ve highlighted in yellow that the HTML codes for the right and left curly quotes are displaying instead of the curly quotes. That might have been okay, except that below it on the right, another article on the same page is displaying curly quotes in the same content. It that weren’t enough, as soon as I choose “display images” the HTML code disappears. A closer examination of the code revealed that this text appears as part of a styled alt tag (for more on stylized alt tags see The Finer Points of Styled Alt Tags). The code for the right curly quote reads: “&#8220;” which will display as ““” which is the correct code for that curly quote. Either somebody really wanted this to look exactly wrong, or they got confused. The right curly quote on the headline to the Page-Turner article has a value of x201C, which works, but it is hexadecimal code instead of the more common HTML code. If I had to guess, I’d say that the two article were written and formatted by different people and then assembled in the newsletter. One of them knows more about HTML than most people, while the other needs to go back to class.
All Tests Are Not Created Equal
This looks pretty bad doesn’t it? The code contains media queries to make sure the content adjusts its size across various devices. The problem is, it’s wrong. This screenshot was taken from an iPhone. The first table is behaving as it should, but then the rest of the email goes all cattywampus. We suspect the person that created this simply tested the responsive results by resizing the window on their browser—a kind of poor man’s test environment. If you do that, this email looks fine, proving that there’s no substitute for the real thing.
I Are An Expert!
Speaking of testing, here’s an email from a company that that specializes in providing testing environments for all the various browsers and phones. Either they missed one, or they decided that the Mail program in Microsoft’s Windows 10 wasn’t worth worrying about. Either way, this isn’t something a company whose raison d’etre is testing email should ever be guilty of (to prevent further embarrassment, we’ve removed the company’s logo).
I Heard You the First Time
Amazon likes to send out notifications about newly available movies and TV shows. We’re not sure what happened here, but suspect that the API call that was suppose to register that the email had been sent wasn’t receiving the proper information and decided to keep sending until it was told to stop.
There’s Always One More Typo
Typos are the bane of every writer’s existence. So what’s worse than a typo in your content? How about a typo on the actual product you’re selling. This glass, offered by Bourbon & Boots, has what should have been a clever quote by Mark Twain, but we’re sure Mr. Clemens knew the difference between “then” and “than.” This error has gone uncorrected for over a year now.
Hey Everybody! We Value Your Privacy!
When the GDPR came into effect, lots of businesses scrambled to make sure they were compliant. Sometimes, these efforts were counterproductive to say the least. One of the worst came from Ghostery, who sent out an email explaining the steps they’d taken to ensure GDPR compliance. Too bad the included everyone’s email addresses in the “To” field.
Did I Say Mail Merge Errors Were Gone?
Perhaps I spoke too soon. Just when I thought I’d see a year without mail merge errors, this one landed in my inbox. It’s such an easy error to avoid with the careful use of dynamic content.
Our Next Speaker: Wyatt Earp
One of the more amusing apologies came from b8ta—a tech gadget store than sponsors meet-ups with inventors and start-up founders. We’re not sure how you’d confuse Ben Holt with Ben Einstein, but we guess it could be worse: They could have announced that Albert Einstein was going to appear at the b8ta store instead.
Don’t Do This. Not Ever.
Apology emails have a higher open rate than other emails, so one can see why a marketer might want to use this to their advantage. But apologies are a serous thing and pretending to apologize for the sake of sales puts you just one step away from being labeled a spammer. Don’t do it.
Okay, that’s it for this year. We hope you enjoyed that. In the end, the lesson to be learned is always the same: Test, test, test.
Another year has come and gone, and although after the events of last year it seemed like the earth was about to spin off its axis, we’re still here and email is as strong as ever. It’s time once again for our annual look back at the best and worst examples of email of the past year. There are a few old favorites and a few surprises. We’ll start with that old chestnut that never seems to go away: The Bad Mail Merge.
Dear your name here,
A few years ago, faulty mail merges, like those in the example above above, were the most common mistakes we saw. Attempts to sound personal suddenly have the opposite effect, pulling back the curtain and showing that the email for what it is: a pre-written script with information inserted as needed. This particular template called for both a first name and a company name, neither of which was available. The use of dynamic content instead of a merge could have avoided this problem by given the mailing other options when information was missing. It’s never good when a company that is trying to sell you on their technological prowess can’t assemble an email correctly.
The example below is even more egregious since it purports to be aimed at a specific person. This, coupled with the formatting errors in the apparently meaningless text below the main message (see UTF-8 discussion below), sent this one on a quick trip to the Spam Folder.
While not as bad as either of the errors, another problem that cropped up in a new mailings was the repeat of my first name. Since I’m sure I never put my name in a field twice, I have to assume that the problem is somewhere in the email’s dynamic content structure.
Aw Gee-Mail
Personalization can be a great way to start an email, but it has its limitations. The example above has my name, and a shout out the weather. The only problem, here’s the weather in Moraga for the day this email was sent:
Not exactly sunny. I’m not sure if the “sunshine” comment was a dynamic insert based on some erroneous weather predictor, or simply an educated guess on the part of the sender. Either way, receiving this message on the coldest, most overcast day of the summer made us chuckle.
Time’s a-Wastin’!
It seems like stores push closer and closer to Halloween when it comes to holiday sales. Kohl’s takes it one step further by announcing that you just have a few hours left for your Black Friday deals three weeks before Black Friday! From the content, it looks like this mailing was intended to be sent out on the 1st, but Black Friday threats simply won’t work in that case.
Musicians Who are Pushing
Gmail and other email clients like to give you a peek at what to expect before you open the mailing. You can use this your advantage with a preheader. Just make sure that when that preheader is abbreviated, you don’t end up with a different message. Musicbed made use of a preheader, but didn’t take into consideration what happened to the preheader when the window wasn’t big enough to fit the whole thing. They ended up with “musicians who are pushing,” instead of “musicians who are pushing the genre to new place.” Perhaps out of paranoia, Patrick James avoids the problem altogether by using a short preheader message followed by a long series of periods.
Amusingly, this particular problem isn’t limited to email. In 1998, a campaign in New York state to provide schools with pencils that featured an anti-drug message had to be pulled when kids started noticing that the more you sharpened the pencils, the more pro-drug the message became.
How you code your email can make the difference between a readable message and gibberish. An email written using 8-bit Unicode characters and then coded for 7-bit ASCII is going to have some problems. Some times you see this immediately in the subject lines:
And sometimes it appears in the body copy. Normally, these snippets of code standout, and do little more than interfere with the design, but if you’ve created an email that relies directly on UTF-8 Unicode to get its idea across, you’re going to be in trouble. That’s what happened with ThinkGeek’s otherwise clever mailing:
The text below the image was supposed to be a humorous paragraph printed upside-down and backwards, as an in-joke to the Stranger Things TV show. If you look at the source code, you’ll find the original message was:
Which, when view right-side up and reversed, reads:
“We’re pretty excited for the next season of Stranger Things. (You may have noticed if you’ve visited us this month.) And we’re getting in all sorts of fun merchandise that’s just making us more excited. If you open our office freezer, you’ll find Eggos.”
Unfortunately, the email was sent without the Unicode specification required to render the sentence, turning the message into gibberish.
Email Tourette Syndrome
Sometimes you can end up with gibberish inserting itself in an email for other reasons. In the example above, it looks like the URL was accidentally and replaced with the ALT tag, leaving only the query string. In the examples below, the problem was a matter of placement of conditional comments. Conditional comments are a way to assign special instructions that only Internet Explorer will read. To everything else, they will appear as comments and won’t display. The problem is that they can sometimes show up as text depending on where they are placed in an email.
While we understand the value of conditional comments, people are beginning to migrate away from IE, in favor of better alternatives. You might want to check your subscriber base and see if you even need them anymore.
A Bad Case of Mono
This image came in an email from the normally exceptional email marketers at Email Monks. For the moment, I’m going to ignore the grammatical error in the ribbon banner at the top and concentrate on the type categories shown. I have no problem with Serif and Sans Serif, but there’s no such type style as “Monogram.” These are monograms:
What they meant was “monospaced.” Their description doesn’t make much (if any) sense either (and one more grammatical error to boot). A monospaced font is a font in which every characters takes the same amount of space, so a lower case “i” will take as much room as an uppercase “M,” even though the two characters clearly require different amounts of space. While the fourth category (Calligraphy) is a legitimate font category, in this case I would have used the more general category of “Decorative” as the final classification (of which Calligraphic fonts are a subset).
Give Me Some Room!
This email from Tanga looks fine on a desktop computer, and even a tablet, but reduce it to iPhone size and it suddenly turns into this scrunched up mess. Looking at the code, we see that whoever designed this is much more comfortable with HTML than CSS. The content is rife with deprecated attributes and the designer has used cells with non-breaking spaces to create margins. Either this was created many years ago, or someone needs to brush up on their CSS.
As bad as this is, at least all the content still appears on the page (albeit in a very squished format). Not so for Vibes’ webinar announcement. While it will appear just fine in most email clients. Something in its code just falls apart when opened in Live Mail. We’ve discussed the problems with Live Mail in previous year-end reviews, but now that Microsoft has abandoned it, maybe the folks at Vibes didn’t think it was worth the effort to fix.
Responsible Responsive
Responsive design was all the rage a few years ago. As we discussed in Part Four of our Responsive Email Design series, if you use a standardized template, then setting up a responsive template has advantages. It will mean a little extra work at the start but will yield dividends later on. Clearly, the folks at BangGoods didn’t read that article, because this is how their mailings appear on an iPhone:
This is a perfect layout for a responsive approach. The three columns across is fine for a desktop monitor, but it is rendered almost unreadable on most phones. Media queries that realigned the three columns and enlarged them according to screen size would do a world of good here.
The British Film Institute (BFI) takes a different approach. They do use responsive design, but they only use one column, so the main purpose of the media query is the adjust the size of the tables based on the screen size. This works well for the iPhone:
But not so well for the iPad:
They had the right idea, but set the size change at the wrong point, leading to an unnecessarily small display on the iPad mini.
Unsubscribe? Fuggedaboutit!
Until this point, most of the mistakes we’ve listed have been embarrassing at worst, but these next two aren’t simply bad mistakes—they’re against the law. CAN-SPAM requires the ability to unsubscribe. That can be accomplished a number of ways, but the most common is with an unsubscribe link. If you put an unsubscribe link in your email, it better work. That’s not the case for Proline Tools and Longchamp. In the case of Proline Tools, clicking unsub takes you to the following page:
This suggests that the problem only was temporary, but a second attempt to click on the unsubscribe link a two weeks later yielded the same result.
Similarly, clicking on the unsub link from Wengtek.com takes you to this page:
On the plus side, clicking on any link in the Wengtek mailing took me to this page, so this might simply be an ESP issue. Since the email purported to be from Longchamp, I would classify this one as Spam and move on.
tl;dr
A related problem occurs when you have too much text in your mailings. Some email clients, such as Gmail, will choose to cut off the message with the following notice:
This particular email is from Kohl’s whose list of caveats and cautions could fill a book. When this happens, the unsubscribe link is not displayed. Does that mean the email is breaking the law? Probably not, but it does mean one more step to get to it. In case you’re interested, here is the entire block of legal notices at the bottom of that email (reduced for the sake of brevity):
At least, in this case, the only thing missing besides the footer is a lot of legalese that no one ever reads anyway. Not so for Touch of Modern, whose email gets clipped like this:
Touch of Modern specializes in expensive products for gadget lovers and technophiles, and their emails are often a solid wall of these products. So much so, that they often get clipped for being too long. So how much is missing? When you click “View entire image,” you not only get the footer, but an additional 132 products are displayed as well. They would have been better off reducing the size of their email, concentrating on a few items each time, and using the website to present additional items.
The Good
This year we also saw some nice use of animated gifs and clever subject lines. The leader this year was EmailMonks, who offered games for Easter and Thanksgiving, an interactive Halloween mailings, and some clever videos and gifs. Where the email clients could interpret the code, the games could be played right there in the message. When that wasn’t possible the viewer was linked to the online version. The also get points for their clever use of poster gifs that do a good job of leading the viewer to the linked video (see Using HTML5 in Email: Video).
Cinemagraphs
One technique we were hoping to see more of this year was the use of cinemagraphs. These are the animated gifs that use animation sparingly to create the effect of a live video image. One company that put the technique to good use is Bourbon and Boots, who used a smoking cigar to draw the eye to the image. Subtle but effective, and it captures the essence of the company’s brand.
One of the cleverest uses of an animated gif came from Netflix, but they didn’t stop there. The design concept started with the subject line:
The blacked out lines and the subject matter make us slightly uneasy, but still curious. Upon opening the email, you are presented with a startling animated gif:
[Note: The original gif only goes through its animation one time, I’ve set it up to repeat to make it easier to view.]
A very clever combination of subject line and content used to create an effect.
Until Next Time
That will do it for this year. As usual, most of the errors could have easily been avoided by a little testing before sending. We were happy to that certain errors that were once very common, now only happen occasionally. Marketers are getting more email savvy and template designs are improving. As an added note, I recently heard from Jordie van Rijn from eMailMonday, who has created this pre-launch checklist you can use to make sure everything in order before you hit the send button.
Another year has come and gone, and with it, another bagful of email catastrophes. Some of these are minor issues that could have been caught with a little more testing or another set of eyes, some are truly catastrophic, and a few problems are unique to that bane of email, Microsoft Live Mail.
Bad Links
It’s always a good idea to test your links before sending out an email, but even the best of us miss one from time to time. Here are a few we noticed this year.
You Know What I Mean!
In this newsletter from last January, MediaPost created a link to the AMA conference without the all important “http://” at the beginning. While that works fine when you are entering a URL in the Address Bar, it won’t work in an href command. It doesn’t help that they’ve used base64 encoding on the message which moves us further from the link and is probably why their emails always end up in my Spam folder.
My Name is [Your Name]
I’ve talked about using placer information in previous year-end reviews. Placers are useful, but only if you don’t forget to remove them from the final mailings. In this case, the placer link “http://your.website.address.here/” was used on the image. Fortunately, there were actual links later in the message, which minimized the damage here.
Spot the Panda
When you have several links in an email, there is always a danger that one won’t get its proper URL. Net-A-Porter does a good job of ensuring that every link goes to the item you click on, saving a lot of useless scrolling and page flipping (See last year’s Year-End Review for examples of this). But with this many unique links and more in every mailing, it was inevitable that they would miss one. In this case, it’s the Stella McCarthy coat on the bottom left, which links instead to Net-A-Porter’s emagazine.
Three Out of Nine is Not Good Odds
Getting one link wrong is forgivable. Getting six out of nine wrong is not. This email from Fab takes you to the same page no matter which of these images you click. The problem here is that six of the images are not even on the page. If you want to find them, you’ll have to search for them (they are on the site). Rule #1: Always make it easy for your customers to purchase things. Either create a landing page specifically for the items you’re showing, or link to each of them individually.
Psst! Wanna See a Picture?
This class sounds interesting, but if you click on the image it will take you to…the image. That’s right. It opens the image location. It doesn’t even take you to Sur La Table’s home page. You can eventually get there by clicking various other links on the page, but it seems like an image that says “Reserve Your Spot” should at least enable you to do just that.
Bad Formatting
Some mistakes are the result of formatting errors. One missing greater-than sign or comment tag and your entire design goes off the rails. Here are a few coding mistakes that we saw this year.
Dear First Name
This one is so common that we’re guaranteed to receive a few of these every year. Usually it is the first name that’s missing, but, as you can see from the third example, it can happen elsewhere in an email. I suspect that most of the time this comes about when someone is using a previous mailing to create a new one, and doesn’t pay attention to the merge fields and dynamic content. This is mostly just laziness. I know that Goolara Symphonie will maintain my merge data when I copy in this fashion, but I always replace it just to be on the safe side. Judging from these examples, I suspect that other ESPs are less forgiving.
MS Word + HTML = Disaster
Most people know better than to try and use Word for their HTML generator. Every once in a while, however, we get an email with the tell-tale “o:p” tag that Microsoft uses to allow you to convert the HTML back into a Word document. This email probably looked just fine in Microsoft Word, and it even looks okay in some visual editors, but it’s a disaster waiting to happen. Ironically, this particular mailing is all text and would have been easier to create directly in any ESP’s visual editor than in Word. This one will always fail in Live Mail (see section below) and often fails elsewhere as well. Here are a couple more examples:
These people would have all been better off typing their content in a plain text editor.
Bad Code Practices
Some problems are not the result of typos or inadequate testing. Some are simply bad practices. These aren’t mistakes in the strictest sense, but that doesn’t mean you shouldn’t watch out for them.
No Alts
Ever since Gmail started caching the images, we’ve seen an increase in the number of mailings that omit the alt tags. Here’s a perfect example of this from Warby Parker:
The only text in this mailing is the company’s address and a few links at the bottom. Now here’s one from Bed, Bath and Beyond where they’ve gone the extra mile to make sure that even with the images off, you know what their email is all about and have some impetus to click through:
Ya’ Got No Style!
Providing alt tags is a good practice, but if you’re using them in cells with dark backgrounds, remember to add style color information to the cell, in particular a color property such as #FFFFFF (white) and “text-decoration:none” to make sure the alt tag is readable. In the top example from the Westfield shopping center, the type is barely legible, but even that is only because it includes a link, which turns the type blue by default. The second example from TradePub.com, also includes a link, but the blue background makes it nearly impossible to read. For more information on how to create styled alt tags, see our white paper, Using Text & Images.
Formatting is for Sissies
I’ve removed the name and address information from the address above because it belongs to the competition. This email came without any formatting. No active links, no nothing. It was clearly a mistake, but there was no follow up apology; just a second mailing with completely different content twenty minutes later. Perhaps they are following that new “never say you’re sorry” attitude that is making the rounds on the Internet, or maybe they hoped no one would notice. Of course, one could point out that this email is, in fact, a violation of the CAN-SPAM act (inactive unsub link), but it’s probably moot.
Don’t Forget to Block
A perennial problem with sliced images in email is the problem of gaps. This is an easy one to prevent. The addition of “display: block” to each of the tags will go a long ways toward preventing this situation. Also watch out for things like padding and margin, which can also wreck a sliced image.
Live Mail Strikes Again
Every email reader has its own idiosyncrasies, but the one that seems to break email the most often is Live Mail. Here are some common problems—and one not so common problem—to look out for in Live Mail.
Watch Out for Links
The problem we see most often is the blue borders on images with links. Most of the time, it’s merely distracting, but in some cases, such as in the example above, it actually screws up the design. With other mail readers, putting an attribute such as “border: 0” (or “none”) in the
tag will eliminate the problem, and many of these mailings contain that instruction, but Live Mail requires this property to be put inside the tag. Put it anywhere else, and Live Mail ignores it.
Black is the New White
As discussed in last year’s email review, Live Mail does not like three-digit hex codes. You’ve assigned a background of #FFF (white)? Live Mail will treat it the same as #000 (black). Even if you have no customers using Live Mail, it’s a good idea to get into the practice of typing out the full six-digit hex codes.
Paragraph Alignment
This mailing from Duct Tape Marketing looks fine everywhere else, but open it in Live Mail and suddenly all the text is centered, including a list that appears later on the page. While this isn’t a complete catastrophe, it does make the text harder to read, which is never good. In this case, the problem comes back to the placing the style information between tags instead of inline.
Email from a Mime
This is particularly weird phenomenon that only seems to happen in Live Mail. I received the email above shortly before Christmas. A big red block. That’s it. No text, no alt tags, and no “Show Images” link to indicate that anything was missing. Not surprisingly, it is an unsolicited email. It comes from a company that offers Santa letters for children. The email does have images (see below), but you couldn’t tell it from what I received in Live Mail. As far as Live Mail was concerned, this mailing was nothing more than a big red block. Here’s how it should have looked:
In a way, it’s probably just as well that nothing showed up. There are typos in nearly every line, they obviously didn’t bother with a test mailing, which would have showed that they used too many snowflakes (it only looks correct in Dreamweaver), and that kid is pretty obviously a stock image. This one would have ended up in this year-end review even if the images did show up.
Cascading Image Sizing
One of the weirdest anomalies We’ve encountered with Live Mail is the following one from Lionsbridge:
As a point of reference, here is the same thing sent to a Gmail address:
Quite a difference! After a bit of testing, we found that simply removing the doctype information at the top of the email’s code fixed the problem. This isn’t the first time we’ve encountered that particular issue. Our more recent tests with Live Mail show that this particular problem has been fixed. Nonetheless, as a rule, if you’re copying your code from an HTML editor, it’s a good idea to exclude the and tags from the process. The email software is going to wrap your information in those tags anyway. This doesn’t always mess things up, HTML is remarkably forgiving, but better safe than sorry. The truth is, the safest procedure for maximum compatibility is to omit everything except content between the body tags and to put inline any styles you have included, with the exceptions of the media queries and the usual boilerplate styles used to improve compatibility with various mailboxes.
Marketing Missteps
This next section is about mailings that use questionable marketing techniques to achieve their goals. Some could argue that these are effective because they get you to pay attention, but so will a car accident; that doesn’t make it a good thing.
It’s Our Special Interface!
CAN-SPAM requires that every promotional mailing includes an unsubscribe link that works, but there is nothing in the law that dictates exactly how you convey this message. This one’s from a questionable company, and would almost certainly have ended up in the spam folder had it been sent to my Gmail account, but my Live Mail account is set to accept a wider range of email. I don’t know about you, but I’d find it preferable to click “This is Spam” rather than click on that suspiciously worded unsubscribe. My advice: Stick to the tried-and-true “Click here to unsubscribe.” The unsubscribe link is no place to get clever.
About Your Account…
One of the most common techniques used by phishers is the one where they send you a notice about the way they are changing their charges on your bank account. The idea is for you to say, “Oh no!” and click the link, which takes you to a fake, but believable login page where you enter your bank login information. So it’s never a good idea when a legitimate company sends out an email that sets off the same alarm bells. Since I’ve never used PayPal with this account, the fact they sent this email to me means one of two things. Either they think I did give them a PayPal account (I did not), or they didn’t bother to segment the mailing. Both are bad, but the latter is unforgivable.
@SneakyMarketer is now following you!
Marketers are always looking for new ways to get you to look at their mailings. Sometimes they cross the line. PRWeek’s take off on Twitter’s following notices might have been okay had it been more obviously fake, and had had some truth to it. In fact, it’s just a come on to sign up for their webinar on social media.
Remember Me? No?
An insidious trend in spamming that showed up in my Inbox this year is the fake follow up. Here’s an example:
Looks legit, but a quick look at my Inbox, spam, and trash folder shows that no such original email was ever sent. This is not the first of these I’ve received, but it’s the first time that they went to the trouble of making it look like something was already sent.
Hello, It’s Me Again
Lately there’s been a lot of press about the advantages of sending more email instead of less. The folks at HubSpot must have taken this to heart, because this is what I found in my email inbox one morning:
Now I’m all for frequent mailings, but this is going a bit far. All kidding aside, I realize that this is more likely the result of their site’s automation, but it probably didn’t help things that most of these were sent during hours when many U.S. companies aren’t sending (I am surprised, however, that I didn’t get something between the eight o’clock and nine o’clock mailings).
Until Next Year
That’s all for this year. I normally like end with a few examples of good and/or clever mailing ideas, but this post is already pushing the limits of acceptable length for an online article. I’d like to thank Justin Khoo at FreshInbox for his help in diagnosing some of Live Mail’s idiosyncrasies. Keep emailing, and if there’s one takeaway from this article it’s this: Always test before sending.
A well-designed typeface is a thing of beauty. It can convey emotion, improve sales, and help define a corporate identity. For years, designers have been trying to figure how to use their favorite fonts in email, sometimes these attempts fail miserably, and other times they lead to other problems that you wouldn’t expect. Using fonts in email takes you into treacherous territory. Is it better to use inline font-family styles or convert everything to images? And what about web fonts? Can you use them in email marketing?
In this overview, we look at all the methods for using fonts in email that are available to marketers and designers. Some of these techniques qualify as best practices, while others should be avoided at all costs. A couple might even qualify as worst practices.
Before we get too deep into the subject, we’d like to point out that we’ll be using font and typeface interchangeably. In the past, “font” referred a specific size of a typeface, so Helvetica 12pt was one font and Helvetica 24pt was another. With the advent of digital publishing, these designations lost their meaning.
Types of Fonts
Fonts come in six basic types:
Serif
Serifs are those little feet that protrude from the edges of a character. Examples of this style of typeface include Century Schoolbook, Garamond, and Palatino. The most famous serif typeface is Times New Roman, which was created for the London Times by Stanley Morison. Serif typefaces are still the preferred choice for blocks of printed text. On the computer screen, they are little harder to read due to the effects of screen resolution of the serifs.
Sans Serif
If a typeface does not have those little feet, it is referred to as “sans serif.” Examples of sans serif typefaces include Franklin Gothic, Gill Sans, and Univers. The most well-known sans serif font is Helvetica, which is even the star of its own movie. The most common variation on Helvetica is Arial, which was specifically designed to match the font metrics of Helvetica. This was Microsoft’s way of getting around the license fees for Helvetica. San serif typefaces are preferred over serif typefaces for text on the computer screen. Some fonts, such as Verdana, were specifically designed for better readability on computer monitors.
Handwriting
A Handwriting font, as the name suggests, is one that resembles handwritten text. These fonts are also referred to as “Cursive” or “Script” fonts. Sometimes these are fancy, such as Park Avenue and Edwardian Script, and sometimes they are more casual, such as Comic Sans and Freestyle Script. Caution should be used with these fonts. As you’ll see when we get to the Web Fonts, cursive fonts usually default to Comic Sans, which is often a poor substitution.
Decorative
Decorative fonts are the ones that favor novelty over readability. They come in both serif and sans serif variations, and are usually restricted to logos and headlines. As a rule, they should never be used for blocks of text. Popular decorative fonts include Ad Lib, Jim Crow, Mesquite, Stencil, and Old English. They are sometimes used for logos, but, even here, are best used sparingly if at all. Because of the high level of variations between them, they should never be used in email.
Monospaced
Monospaced fonts are the ones that assign the same amount of space for each character. In a monospaced font, the ‘m’ takes the same amount of space as an ‘i’. This type of font is often used to display code, or to mimic an old typewriter. The most popular example of this is Courier. Monospaced fonts come in both serif versions, such as Courier, and sans serif versions, such as Consolas.
Dingbats
Dingbats are not fonts in the usual sense of the word, but, instead, have replaced the standard alphanumeric characters with little pictographs. In Webdings, for instance, a capital J renders a picture of an island with a palm tree, while in Wingdings it renders a smiley face. Dingbat fonts should never be used in email. You may like the idea of creating rebuses using Webdings, and it may look right on your PC; but if someone opens it on a Mac or some other system that doesn’t come with Webdings, they’ll only see gibberish.
Several pictographs are built into other typefaces as part of the Unicode (UTF-8). These are safer to use and sometimes are even used in subject lines (with ✈ and ❤ being particular favorites). Just make sure that you’ve encoded your mailing as UTF-8 and not 7-bit ASCII. Otherwise, you may end up with little squares or questions marks where the pictographs should be. It’s also important to remember that although there is some overlap in appearance between dingbat font characters and the pictographs that are available as part of the standard Unicode font set, they are not interchangeable. For example, the picture of the airplane in the middle on the left in the picture above is a capital Q in Wingdings. This one will not work in email. You need to use the airplane character as it is indicated in Unicode (you can find a handy chart of the Unicode dingbats and other special characters here).
Using a font directly
You can assign any typeface you want to your email content. Here, is an example of an inline style assigned to display in Helvetica:
Hello World
Of course, this doesn’t mean that your recipients are going to see the same thing on their computers that you see on yours. If the recipient does not have Helvetica installed in their system, they are going to see another font. As a rule, this will be Arial, but don’t count of the substitution to be automatic. By only listing one typeface in font-family style, you leave it up to the ISP, email client, or particular software to choose the alternative. This could end up being anything from Myriad Pro to Courier.
For this reason, it is always a good idea to provide a list of acceptable alternatives to the font-family style, starting with the preferred font, with the rest of the fonts following in order of preference:
Hello World
We’ve ended the list with the generic “sans-serif” as a safety measure to ensure that if none of the fonts listed are available, the text will still appear as a sans-serif font.
But what if your type absolutely has to be in a specific typeface? If it is part of your logo or associated with a specific branding campaign, you might not want the type replaced with anything else. In that case, your best bet is to convert the type to an image, but be careful—this is an overused technique that comes with some definite downsides.
Using Images for Type
At first, it seems like converting all your text to an image seems like a way to go. If you wanted to use Ad Lib for your headlines with Broadway for your text, an image would make sure that this (admittedly terrible) combination would look the same to everybody, regardless of their operating system, email client, or computer. But before you go converting all your mailings to images, there are a few important caveats to take into account.
No Text, No Inbox
First and foremost, you shouldn’t do it because it can affect deliverability. Shady email senders sometimes try and outsmart the spam filters by converting their text to an image in an attempt to elude the spam filters that check for certain words. As a consequence, many ISPs deduct points from a reputation score when they find only images in a message. This can be just enough of a negative to redirect your mailing from the Inbox to the Spam folder.
Not Text, No See
The second downside to using only images is that not all mailbox providers display images as a default. The Mail app on the iPhone does and Gmail does, but most others still default to image display off. If all your text has been converted into an image, you run the risk of missing potential sales for no better reason than that the recipient never saw your actual message.
Remember the Alt Tag
If you do plan to use an image to display text, the safest thing to do is to include the text in the image as an alt tag. That way if the recipient has image display turned off, he can still get an idea of what the picture contains. In the case of logos, you can also add styles to the alt tag to improve the email’s appearance. For more on this subject, see our white paper, Using Text and Images.
What About Web Fonts?
From time to time, people ask about using Google Web Fonts in email. If you are new to Google Web Fonts, these are fonts that you can use without having to have them installed either on your computer, or the computers of your recipients. There are other sources for web fonts, such as Adobe and Font Squirrel, but these usually require scripts, which do not work in email. Web fonts require you to add two pieces of information to your mailings—a tag with the URL for the font you want to use, and a font-family style attribute.
Web Fonts will only work when the email client recognizes the tag and can use it to download remote content (in this case, the fonts). Here’s an example of an email that was set using two Google Web Fonts—Luckiest Guy for the headline and Josefin Slab for the text. In this first example we’ve taken the HTML code provided by Google and stuck it in the mailing without further modification. Here is how the HTML it appears in a browser (in this case, Chrome) before it is sent as an email:
Now here’s the same email as it appears in various email clients and platforms:
As you can see, only the iPhone and Thunderbird rendered it correctly. Even here the fonts are only displayed when “Load Remote Images” is turned on (the default setting for the iPhone, but not for Thunderbird). Because Web Fonts require a link to work, these fonts are treated the same as images. If an email client defaults to “Images Off,” it’s not going to display Web Fonts either, even if it can. No images, no fonts.
The fact that cursive is listed as the font category for Luckiest Guy doesn’t help. It means that on PCs the headline defaults to various weights of Comic Sans, a font so detested that Weird Al Yankovic uses it as a gag in his song, “Tacky”. On Macs and iPhones, cursive defaults to Snell Roundhand which is better than Comic Sans, but is still a far cry the intended result. In the case of Live Mail, the fact that “serif” was listed as the fallback didn’t seem to matter. It still converted the text to Arial.
Of course, there’s nothing that says you have to use the HTML exactly as Google provides it. In the case of the Luckiest Guy font (and, I suspect, many others), you’d be better off ignoring their recommended category and choose one of your own. You’ll also want to add a few logical alternatives to the list. Here are the inline style settings for the headline after we’ve modified it:
There’s really nothing like Luckiest Guy that is common on computers, so I’ve chosen an assortment of bold display faces that you’ll find on many devices and platforms. Likewise, Josefin Slab is a hard one to match since slab-serifs (i.e., serifs that are squared off instead of pointed) are not that popular either. Here are the inline style settings for the body copy:
Rockwell and Clarendon are popular fonts, and although Georgia is not a slab-serif font, it is a common font and shares many characteristics with Clarendon. Here are the results:
As you can see, the results are still far from perfect, but they are better. If this level of discrepancy between fonts is acceptable to you, then you might find web fonts worth experimenting with. If your audience is made up primarily of iPhone and Mac users, it might be worthwhile. If your audience is primarily on PCs and Android phones, then it probably isn’t worth the effort.
Text Still Wins
When all is said and done, the advice we gave in Using Text to Deliver Your Message still stands: You’ll get the best results if you remain flexible on the font choices. Converting text to images where the font is important (such as logos and other branding) is acceptable, but even then, limit it as much as possible and make sure you’ve provided alt tags that are either informative or will make people want to display the images.
If the email that lands in our inboxes every day is any indication, people don’t spend enough time thinking about the effects that links have on images and text. Blue linked text on dark backgrounds, problematic borders, and unwanted underlines can all interfere with an email’s design. These are very easy fixes that should be in every email designer’s toolbox, so it’s a little puzzling why so many mailings don’t follow these simple rules.
Links on Images
In a previous article on this blog, we discussed ways to make sure your images link correctly in email. Image maps and image slicing offer ways to let portions of an image link to different pages, but that’s only part of the story. There is one more hidden pitfall in image handling that often goes overlooked. In fact, hardly a day goes by when I don’t see this particular mistake pop up in some email or another. You may think you’ve covered all your bases when it comes to linking images, but if you’re not careful, there’s one more trap waiting to trip you up.
To understand better take a look at this example:
As you can see, the last two sections of the image have links. The email viewing software saw the links and placed highlights around these sections. In this particular case, the link borders also throw off the text in the image, making it harder to read, although the text at the top and the bottom could have been—and should have been—actual text (see Using Text to Deliver Your Message), the blue line certainly makes matters worse.
The blue line doesn’t appear in all email viewers, which is why this is sometimes overlooked. If the email reader you normally use doesn’t do this, you might miss it. Unfortunately, the problem crops up most often in Microsoft email clients and mailboxes, which aren’t exactly low profile products. Sometimes it can interfere with the design in other ways. Here’s a button with rounded corners and a blue border that completely destroys the intended effect:
In this particular case, rather than create the button using the border-radius style in a colored table cell, they generated it as an image instead, so the email reader put a border on it to indicate it has a link.
The fix for this is easy, and should come almost as second nature to email designers. Let’s look at the image tag on the button:
Now here’s what’s missing in red:
border="0" />
It’s that simple. The addition of the border attribute is all it takes to eliminate this particular problem so why do so many emails still show up with blue borders? In all likelihood it’s because the sender is only checking against their default email client.
Lost in the Blue
With text, links default to blue underlined text in email. In one sense, this is usually a good thing. It wouldn’t serve much purpose to leave the text black with no underline. On the other hand, there are times when the blue color and the underscore can interfere with the design. Here’s an example of the button shown above recreated (as near I could) as a table cell instead of an image:
Borders aren’t an issue because it is no longer an image. The styles on the table cell are entered as inline styles, giving it specific text attributes and removing the underline that indicates it is a link. But here’s that same table cell, with the inline styles removed, allowing the text to revert to its default choices:
Not very useful. You can remove the underline by adding the style attribute “text-decoration: none,” but the text would still be blue. Just be careful that you haven’t assigned the text to appear in a color that is close to the default link color (which varies between browsers), email client systems aren’t smart enough to recognize the color of your text, and your links are likely to get lost.
Arranging Attributes
Browsers can be very forgiving when it comes to the order of attributes in your HTML. Email clients are not so generous. For this reason, you’ll sometimes encounter cases where a mailing looks just fine as a stand-alone web page, but then falls apart when it reaches the inbox. When this happens, you should check the order of your tags. Make sure things like yourtags are closed within their appropriate
tags, and thetags are closed within their
The email client that is the worst offender when it comes to creating this sort of havoc is, not surprisingly, Live Mail. The examples shown above come from this particular email client, and were, in some cases, okay in other email clients. As we discussed in our 2014 Year End Review, Live Mail brings its own set of idiosyncrasies to the table. Here’s an example of how a set of social buttons at the bottom of the page in an L.A. Times newsletter appeared in Live Mail:
And here is how it appeared in other email clients:
Those of you that have read the 2014 Year in Review article might guess that the black background is the result of using the three digit color code “#fff” instead of “#ffffff.” But the example above has nothing on this one from Lionbridge:
In this case, the buttons are overlapping each other, with each button appearing slightly smaller than the one to its right. Now here’s what this table looks like in every other email client:
Quite a difference! So what caused this strange cascading effect? We narrowed it down to the tag:
Normally, the tag has no effect on an email. Ironically, even this one wouldn’t have been a problem if the designer had left off the URL at the end. Then it would have worked just fine. Like the browsers, Live Mail has its own methods for dealing with the differences between HTML versions, and without the link, the software figures it out correctly. Of course, there’s really no reason to ever place a tag in an email. We recommend leaving them out. For that matter, the safest approach is to place only the styles you want for responsive purposes (which normally appear between thetags), and the actual content (which falls between thetags). Everything else serves no purpose in an email, and may actually create problems.
A Few Basic Rules
Getting links in email to appear the way you want them to is not difficult. It boils down to a few simple rules:
Always include border=0 in your tags
Use text-decoration: none to eliminate the underline on links
Assign a contrasting color on text links if the main content is blue
Place the style attributes for linked text in the tags
Eliminate superfluous code and tags, such as JavaScript and
These fixes are so easy to implement, it’s puzzling why many emails are still sent with these problems. In the grand scheme, these are relatively minor issues, but, as we have shown, little things can make a big difference.
Look at the text above the blue banner. This has to be the most literal interpretation of the term “preheader text” you can get. At first glance, it might seem like it was intended as a placeholder, or maybe a novice worker was asked to “put the preheader text” at the top of the newsletter so they literally did. What they were trying to do here was a little too clever for its own good. By itself, the “Do’s and Don’ts of” subject line makes no sense, but if you receive the email in a client such as Gmail, which also displays the first text in an email, the message reads: “Do’s and Don’ts of…the preheader text.” If you click on the masthead it takes you to this:
It’s an interesting idea, but unless it’s viewed under exactly the right conditions, the concept falls apart.
This also may have been intentional, but, like the previous example, there is nothing in the copy to indicate it. The fact that it advertises footwear by the avant-garde fashion designer Bernhard Willhelm might have something to do with it. but from here, it looks like they simply forgot to look at the email before sending it.
One simple way of checking the responsiveness of an email in a browser is to reduce the horizontal size of the browser window and see if the content re-positions itself for the smaller window. While this quick-and-dirty techniques works a lot of time, it can also fail. Witness the case of this mailing from FuncheapSF, a newsletter that lists free or cheap events in the Bay Area. If you check this by resizing your browser window, everything will look fine, but suddenly everything is out of whack on an iPhone.
If you check this one in a browser, it functions as it should. The problem is between the media query and the max-width. You’ll only encounter it if you look at the email on an actual iPhone, or an email rendering service that can duplicate the iPhone environment accurately. Checking it on an actual phone is safer.
This past Halloween, Microsoft came up with a fun little email that offers a scratch-off panel that lets you use your mouse or finger to reveal a free offer. While it doesn’t work in all email clients, it offers a fall-back that will take you to a website where you can experience it outside of the email environment. Except Firefox, which takes you here:
The funny thing is, when we opened the same email in other browsers, it did let us try out the scratch-off feature, but told us we didn’t win anything. At least the Firefox mistake gives us a discount.
Whoever put together this email for the sports apparel and footwear store Under Armour wasn’t paying close attention. Normally the strikethrough price would be higher than the one you’re now offering (shown in red). Does anyone ever want to pay more for something that’s advertised at a lower price?
As I’m sure you’ve noticed, emails with the same subject line and content are threaded in Gmail, so that if you and a friend are sending emails back and forth on a specific subject, these messages don’t completely takeover your inbox list. It’s a nice feature and it rarely has anything to do with email marketing since each new mailing is, as a rule, unique. A marketer might resend a message because the links were screwed up (although you don’t have to do this with Symphonie), but even then, they would normally change the subject line to let you know why they are sending you the message again. Here’s a case in point:
The content of these two emails is the same. Only the subject line and preheader have been changed, with the former subject line now appearing as the preheader.
This could be something as simple as a person trying to paste finished content into their email marketing software and accidentally hitting the paste button twice. On the spectrum of email mistakes, this is minor.
It sounds so self assured. Putting aside, for the moment, the bad grammar, the fact that we don’t have a webcam attached to our computers, and that claiming an email came from our own account is not a good threat to try on someone who works in the email marketing industry, this scam is the king daddy of scam failures, Worried that spam filters would identify this for what it is, the scammer converted the entire message to a base64 encoded image! This means that even if you did want to give this bozo your money, there’s no way to copy and paste the bitcoin address per the instructions. All you’ll do is drag around the image.
Straight to Hell, a company specializing in hipster clothing, sent out an email advertising their new line of beanies. Most of this email was done well, with pictures of each beanie, and each image link going to that particular beanie. The only problem image was the first one, shown here. Which, when clicked, takes you to a page about their leather jackets, the subject of their previous mailing. Whenever an email has lots of links, and you’re working off an existing email there’s always a danger of this. Check every link!
Putting aside the fact that boots are not accessories, and ignoring the mysterious “si” that appears between the images at the bottom, clicking on the boots takes you to Forever 21’s sale section. After scrolling through all 15 pages, we never did find these boots. Oh well, they probably wouldn’t fit anyway.
Templates are a great way to get an email designed with a minimum of work. The only problem is that it’s also easier to miss things such as links. That’s what we suspect happened with this email from Screen-o-matic. Most of their social links work, until you get to the Instagram icon, which contains no link.
See any problems? Google shut down Google+ a year ago. Clicking on this link will get you the Google page explaining that the service no longer exists. Do all the social icons in your mailings work? Are you sure?
Whoever put this together should have noticed the empty content box at the bottom of their mailing, or, at the very least, got a second pair of eyes to look at it.
The other problem with previously-constructed emails is that if you never checked them thoroughly across all browsers and email clients, you might have issues that pop up again and again. Here is a problem that Target has had for at least a year now. In most email viewers, this email looks fine, but in Microsoft Windows’ Mail program, you get the rather confounding problem shown above. The image on the right looks fine, but the image on the left has the words “The picture can’t be displayed” appearing across the top. It seems like a strange thing to say, given that the image is actually there. Fortunately, the buttons that appear on the images make it a lot easier to trace the problem. In this case, it turns out that the folks at Target have inserted the image on the left as a background to a table cell, rather than simply place the image in the cell as was done on the right. An empty image placeholder sits inside the cell, for some reason. Since that image can’t be displayed, it results in the message over the background image. Considering that the audience for this particular type of email is the general public—the very people that are likely to use the Windows Mail program—and that the problem has existed for over a year, someone should have noticed it in the Target marketing department by now.
RGE responded a couple days later with an apology that also serves as an enticement to explore their site further.
Well done.
Considering the importance of good color use in every other aspect of marketing, it’s surprising how lackadaisically many marketers treat color in their mailings. The number one mistake comes from marketers who don’t bother to think about how their mailings will appear when people haven’t turned on the images. In the image above, the links are virtually impossible to read. This could have easily been remedy with a color:White (or color:#ffffff) style added to the alt text (for more on this, see The Finer Points of Styled Alt Tags).
Gold and pink are great colors for suggesting a certain pampered luxuriousness, but they don’t always go well together.
Petco isn’t exactly a fly-by-night organization, so I’m surprised to see that whoever is in charge of their email marketing thinks it’s okay to use techniques that are normally the providence of spammers. Neither of the emails with “Oops” in the subject line is an apology. They are simply promotional mailings. The email marked ‘CONFIRMED” is just an attempt to get you to use their dog grooming services. The fact that it’s all caps only furthers the suspicion that Petco’s email marketing manager comes from the world of spammers.
If you’re going to add a link to an image, the best thing to do is to add a link that takes you to the page that the image references. Vinegar Syndrome did add a link, but it’s a link to the image in the email. Clicking on it just shows you the image by itself. I’m sure this one is a mistake. Remember to check your links. Fortunately, Vinegar Syndrome has provided other links in this mailing.
Missing names are a common mistake. They’re usually the result of using a mail merge command that requires content in the first name field. The problem is easy to avoid by using dynamic content instead. That way, if the first name field is empty, you can finish the salutation with something meaningful (e.g., “Dear Reader,” Dear Subscriber,” etc.). They also lose points for the white type in the footer on a pale pink background.
You may have received an email or two that appears to feature a unique font in the subject line and wondered “How’d they do that?” The answer is, the same way they use emojis in a subject line: by using alternative Unicode characters. Buried in Unicode are a few special characters that are virtually identical the standard alphabet except for their appearance. The most popular ones are those called the mathematical double-struck characters, sometimes referred to as “𝕓𝕝𝕒𝕔𝕜𝕓𝕠𝕒𝕣𝕕 𝕓𝕠𝕝𝕕.” There is also 𝕱𝖗𝖆𝖐𝖙𝖚𝖗 𝕭𝖔𝖑𝖉, ⓑⓤⓑⓑⓛⓔ ⓣⓔⓧⓣ, 𝒸𝓊𝓇𝓈𝒾𝓋ℯ, and many others. As fun as these things are to play with, we can’t recommend using them. They are often used by spammers to try and get their messages across without tripping the keyword searches, so there’s a higher chance that your email will end up in the junk folder with these characters. If you don’t believe it, take a look at your junk folder.
The Goolara Blog 