Tag Archives: alignment

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!

Responsive Design in Email, Part 4: Tales From the Front

Fighting for better email

[Note: Unlike most of our blog posts, this one comes from our Marketing Communications Specialist Jim Morton personally, recounting his adventures in the exploration of responsive design. Like many of you, much of Jim’s HTML work these days is confined to email design, which, as you know, plays by different rules from web design. We think that what Jim experienced in studying the subject is good information for anyone interested in trying their hand at responsive email design for the first time.]

In the previous three articles, I examined the proposition of using responsive design in email. At the beginning of the project, I knew about responsive design and how it worked, but I had never bothered with it. I designed my emails so they could be read on something as small as an iPhone viewed in landscape, but would still look good on a 27″ monitor; that seemed good enough.

But sometimes, “good enough” just isn’t good enough. One morning, while I was reading email on my way to work, I became aware of the fact that I read almost all of my personal email on my iPhone these days. A quick survey of people I know revealed this to be common trend among them as well. Then, on the Email Monday Blog, Jordie van Rijn cited a host of statistics indicating that mobile email can account for up to 65% of email opens depending on the audience. Should I be using responsive design to take advantage of this trend? I wondered.

Geniuses Only

The thing that kept me from taking the plunge into converting our email templates to responsive design was the same thing that has probably stopped a lot of you: namely, its reputation for being difficult. Responsive design, you’ll hear people say, is hard to implement and brings a whole new level of headaches to email design. The problem with this statement is it tends to be self-fulfilling. When I started this project, I carried that same baggage and found it difficult to get traction with my early efforts at it. Looking back at it, I see that a lot of my problems were the direct result of my preconceptions about responsive design’s supposed difficulty.

It was my trepidation over the process that led me to start with Dreamweaver, thinking that this might be an easier way to get responsive features up and running in my mailings. As many of you know, Dreamweaver has a nasty tendency to stick things you don’t need or want into your HTML, but I wasn’t too worried about this—Symphonie’s visual editor does a pretty good job of stripping such garbage out. However, I quickly discovered that Dreamweaver wasn’t going to help. In the first place, Dreamweaver insisted on creating separate CSS files for everything. Media queries weren’t handled directly, and when you chose fluid design, a CSS file and JavaScript file were automatically attached to the project—perfectly acceptable for a website, but not so good for email.

In early October, DreamweaverCC, added the option “Define in page” for media queries. By using this command, you can add the media queries to the top of the HTML document and the CSS information will automatically switch to inline for any formatting choices. This change to Dreamweaver makes it much easier to create responsive email designs within the program. It’s nice to see Adobe finally paying attention to the needs of email designers, but it came too late for my project.

On the Edge

It was with some interest that I read about Adobe’s latest product, Edge Reflow, which was specifically created to help make responsive design easier to facilitate. I’ve been using Adobe products for more years than I care to mention, and I am very comfortable with their programs. If anyone could make responsive design easier, it was going to be Adobe (full disclosure: I worked for Adobe as a technical writer and illustrator, but that was a long time ago). Since I was subscribed to Adobe Creative Suite, Edge Reflow was available in its beta test form. Could this be the solution to my problem?

Short answer: No. Perhaps if you are designing websites, Edge Reflow is a useful tool, but when it came to helping me design the email, it was of little value. If anything, it made the whole process more difficult by adding another layer of complexity (and files) to the process. To make matters worse, it required me to start from scratch and, worst of all, had no ability to contend with tables, nor did it offer any inline features. After spinning my wheels with this program for a few weeks, I concluded it wasn’t the answer I was looking for and continued my search (see Responsive Design in Email, Part 2: Edge Reflow for the full report).

BYOHTML

Eventually, I came to the conclusion that the only way I was going to get what I wanted was to go back to basics and write it all in HTML. I fired up my trusty Notepad++ and went to work. I started with the company newsletter. I had already designed it to be scalable, but I thought the images and buttons became too small to be useful in the scaled version. The layout was fairly simple—alternating image and text boxes divided into color coded section. How hard could it be?

Basic newsletter layout

At first, I tried to attach media queries to the previous version of the newsletter, but that proved to be impossible. In the original version the image and the associated text were part of the same table and the same row, so there was no way to get the image and the text to change their relationship to each other. Normally, this is one of the reasons email designers like tables—they keep things where they belong no matter what—but it’s not so good when you want things to move around more freely.

I thought about setting the positioning using divs, but I knew that Outlook.com doesn’t play nice with div floats or margins and I wanted to end up with an email that would look as good in as many email clients as possible. As with images and divs, you can control the appearance—or disappearance, as the case may be—of tables using media queries, but first I had to isolate the elements. For our newsletter, there were three primary elements: The image, its associated text, and the CTA button. By putting each of these in its own discreet table and nesting those three elements inside another table I was able to control the positions of all the elements with very little effort on my part.

The Compatibility Dilemma

Conceptually, the @media query is the heart of responsive design, and is pretty straightforward. You define styles to activate based on the @media query information, so you can move, resize, hide, and show different elements in your email. You may be tempted to try using the “display: none” attribute to control the appearance and disappearance of different sections based on the screen size, but I don’t recommend it. Not all email clients recognize this attribute, and when they don’t things break down terribly. Suddenly, you have a page with all versions of your content displayed stacked on top of each like a garage sale. Some clients, such as Gmail, force you to jump through so many hoops to get it to work that you might as well not bother. You’re still better off making sure that your email is readable under all circumstances than wrestling with multiple hidden versions. This particular issue gets right to the heart of the problem with responsive design.

However the biggest problem I faced in creating a cross-platform compatible design came from one company—Microsoft. While Google’s issues with the “display:none” tag forced me to rethink my design approach, it was Microsoft Outlook that generated the most problems for me. Getting my design to work across versions of Outlook was a study in frustration. My layout would work in Outlook 2003, 2007, and 2013, but not in 2010. Once I got it working in 2010, I’d go back to discover that it no longer looked right in 2007. The biggest problem was getting the tables to line up consistently. A quick search turned up a few articles on the subject of using Microsoft Outlook and responsive email design. Unfortunately, many of the solutions offered in these articles only shifted the problems to other versions of the software. I suspect that many of these people were working off the assumption that once they got the layout to work in their version of Outlook, it would work everywhere. In the end, the insertion of this tiny bit of code proved to be the only answer that actually worked:

style=”mso-table-lspace:0; mso-table-rspace:0;”

And even here I had to adjust the spacing in some of the tables to keep the images from interfering with the text.

Herein lies the biggest problem with responsive design in email. With so many different clients using so many different standards, finding out what works starts as an Easter egg hunt, and turns into a repetitious process of trial and error. While the technology of @media is conceptually simple and gives powerful options, individual vendors adoption of the required supporting elements has made it far more difficult and complicated than it should be. Perhaps when all—or almost all—the CSS commands are accepted across the board in email clients, then we will see some real strides forward in email design. Unfortunately, as we all know only too well, those wheels move very, very slowly.

Picking Your Battles

So was it worth it? I spent at least two weeks worth of studying and two more weeks of coding and layout, trying to get my initial design to work. I chased after a few concepts that led nowhere, and things that worked in some places fell apart in others. There was some satisfaction in seeing my final results in action, but I think I would have had less trouble with it had I not been searching for a shortcut to the coding part of the process. Ironically, the final design that actually worked came about after I threw out the file I had been working on and started over from scratch—that took me a day (of course, I had already done all the groundwork). Clearly, the web designer with a stronger background in responsive design will have a shorter learning curve than I did, but that can also bring with it erroneous assumptions about what will and won’t work. If you are new to responsive design, you’ll need to do some prep work before you can even start to code things. Of the resources I used, Chris Converse’s tutorial on Lynda.com was, by far, the most useful. As I mentioned in the previous post, looking at how others have tackled the problem is invaluable in coming up with good results.

The more complicated your email design is, the more of a hassle it will be to convert it. Goolara’s newsletter format is relatively simple, but it still took me a few weeks to get it where I wanted it. A complex design might prove resistant to a good responsive reworking solution. Whenever possible, designing your email with responsive in mind before you start is preferable, and will keep you from trying to fit a square peg in a round hole. As always, testing is crucial. While rendering services can be very helpful with catching errors, there were a few instances where what I received from the rendering service did not match the results I was getting with the actual email software, so use caution and test with actual mailings whenever possible.

The question you need to ask yourself is whether the effort you put into creating a responsive design is taking time away from segmentation and dynamic content efforts to make your mailings more personal. Larger companies, where the design is separate from the coding, won’t find this to be much of an issue, but if your designer is also the person who codes the file for email purposes, you’ll need to take into account the added time that they may require to get everything to work correctly. If it comes down to a choice between a nice responsive design and the good use of dynamic content, I would always choose the latter.  An email that addresses the specific interests and needs of a recipient is going to have more engagement than one that is merely easier to read on a phone. More and more people use their phones and “phablets” to read their email, but they’re still more likely to respond to an email that is relevant to them over one that merely looks good.

If you would like to see the results of my experiments, you can subscribe to the Goolara newsletter here, or you can write to me at jimm@goolara.com. You’ll also find me on Twitter: @JimAtGoolara. Happy emailing!