Using Text and Images

Designing Email for Maximum Impact

WHITE PAPER

Using Text and Images

Designing Email for Maximum Impact

This white paper is published by:

Goolara, LLC

2150 Mariner Square Drive, Suite 100

Alameda, CA 94501

Telephone: (510) 522-8000

(888) 362-4575

Fax: (510) 522-2457

Copyright © 2013 Goolara, LLC All rights reserved.

No part of the contents of this publication may be reproduced or transmitted in any form or by any means without the written permission of Goolara, LLC.

Goolara and the Goolara logo are registered trademarks in the United States, other countries or both. All Rights Reserved.

www.goolara.com

INTRODUCTION

The other day, I signed up to receive emails from Hugo Boss. I like the company’s clothing, and I thought it might be fun to receive announcements from them. A few weeks into the Christmas season, I realized that I hadn’t seen a single email from them outside of the one notifying me that I had signed up to receive their mailings. Going to my Spam Folder, I saw that all the email from Hugo Boss was getting funneled directly into this folder. It was, in effect, being thrown away before I looked at it. I selected one and clicked “Not Spam,” then opened it. As soon as I looked at it, I saw immediately what the problem was. Aside from the obligatory CAN-SPAM information at the bottom of the email, there was no text. Worse yet, the images had no ALT tags either. For all intents and purposes, this wasn’t email at all—it was a stack of empty boxes.

I wish I could say that Hugo Boss is a unique case of poor email design, but, in fact, it is all too common. Companies big and small make the same mistake every day. That mistake can be summed up this way: bad text-to-image ratio. Every day, hundreds of emails are automatically routed to the Spam Folder. Some are there because of spammy-sounding subject lines, and some are there for suspicious links. But quite a few are there for no better reason than the email designer did not take into consideration how email filters work. These aren’t small companies either. Email from well-known companies such as Hollister, J. Crew, and others regularly wind up in the Junk Folder. In every case, the problem could have been avoided with a few small changes to their email designs.

So why are so many companies—and major ones at that—so susceptible to this particular error? The answer goes all the way back to the development of the WorldWideWeb browser in the earlier 1990s. The idea behind this browser, and all subsequent ones, was to be as compatible with different computer systems as possible. It didn’t matter whether you were using a PC, a Mac, or some Unix-based system, everyone could share and view the same information. This was great for most things, but graphic artists found that their carefully crafted web designs often turned into a jumble when viewed on any computer other than their own. They were use to controlling every aspect of a publications appearance. Now they were faced with a world where the all fonts they carefully chose were virtually useless. The way they solved the problem was by making the text part of the graphics. In this way, the choice of fonts, placement, and other characteristics can be maintained even if the viewer does not have those fonts installed.

Designers were happy with this solution, and many continue to use it, but, in the world of Internet communication—both email and web design—it is a bad practice. Most designers now know that it is a bad practice for web design because it interferes with SEO, but it is also a bad idea for email design for a different set of reasons. This white paper will look at those reasons and offer alternative solutions that should generate superior deliverability and higher clickthrough rates for your mailings.

Some of the advice here may be controversial, but it is all intended with one purpose: to improve your company’s reputation score by improving the text-to-image ratio in your mailings. In some cases, you will have to weigh the trade-off between your corporate aesthetic and your reputation score. We happen to think that the reputation score should trump everything else.

WHY DO I NEED TEXT?

Every email should include some readable text besides that which is required by law. If you are in the habit of converting all your text to images for design reasons, we strongly recommend you rethink this policy. Good design, of course, helps pitch things, but at a certain point practicality has to take precedence. If nothing else, the calls to action should always be part of the text and not part of the images. There are lots of good reasons for using text in your mailings. This white paper will examine those reasons, and demonstrate why converting your text to images is seldom the best course of action.

Text-to-image ratio

ISPs cannot read the text in images. Spammers know this and often use images to get around filters that might shuttle their messages automatically to the bulk folder. As a consequence, many ISPs now look at the text-to-image ratio to identify possible spam. When a marketer puts all the focus on images, the deliverability metrics suffer (as do open and clickthrough rates). Nothing else matters if the message never reaches its intended target. Deliverability parameters vary from ISP to ISP, but all of them examine the text-to-image ratio when deciding where to route an email. Email in which the text has been converted to an image is going to have to have a lower score than the same email where the text is allowed to function as text. This doesn’t mean it automatically ends up in the Spam Folder, but it does increase the likelihood of it happening. This is especially true during the critical pre-holiday season, when many email clients tighten up their restrictions to keep their users from being overloaded with email. Suddenly mailings that a week earlier were landing in the inbox are now shunted to the bulk folder. In this case, using text where you had previously used an image can make all the difference.

Remember that the ISPs are ultimately the ones in control in this process, and a beautifully crafted image with the best marketing message in the world means nothing if recipients never see it.

Defeating the defaults

The default setting for most email clients is to block images. Among smart phones, only the iPhone displays images as a default. Of course, people can always choose to turn on the image display, and 57% of people do,* but this still leaves the other 43% with nothing to look at. When you try and control your textual information’s appearance by converting it to an image, you are eliminating half of your prospective clients. That’s a shame when you consider that the information they are missing started out as perfectly good text, displayable in any email browser regardless of whether images are on or off.

Good ALT tags go a long ways toward helping people understand what they are missing, but not all email browsers display the ALT tags, and Microsoft Outlook 2007 goes one step further, adding its own security messages to the empty image boxes. If your mailings are image-based and are relying on the ALT Tags for additional identification, over half of your recipients are receiving it in the blandest form possible, and some aren’t seeing it at all.

If you really want to make sure that your message is reaching your public, you’ll need to offer some text to the recipients beyond what might or might not appear in your ALT tags. This is the only way to be sure that your message is reaching the recipient, regardless of which email client they are using to view the message.

Move to mobile

More and more people every day shift from reading their email on a computer to reading it on their mobile devices. This brings new requirements in terms of text readability and positioning. Keeping text and images separate allows for more options when it comes time to display the email. Text arranged in columns is easily double-tapped to enlarge for easier reading on some phones, such as the iPhone. This is not an option with images. It is also easier to control the text and graphics when using responsive design.

* David Daniels, Consumer Email Behavior: Using Images in Email Marketing; ClickZ website, December 17, 2012

USING TABLES

Tables have became passé for web design. Many of the table attributes, such as background color and alignment, are deprecated in HTML 5, which favors the use of <div> elements for creating different unique areas on a web page. Tables, the modern thinking goes, should be saved for tabular data and nothing else. We disagree. Tables are still an effective way to organize data in an email, especially when dealing with the combination of text and images. More importantly, all email clients support tables, so compatibility is never an issue. If you prefer to use <div> elements, the information here still applies.

Tables let you do some interesting things in terms of imageless design. By assigning colors to the individual cells, you can create effects that rival graphics with one important distinction: your audience will see them automatically. Here’s an example of an email from H&M:

Here’s that same email as it appears in Gmail when the images are turned off:

Fortunately, the original H&M email contained some text below this image to clarify just what the sale is about. This is great, but this is an example of an image that didn’t need to exist at all. It is possible to create virtually the same effect using nothing more than a table cell and some text.

Here’s a text in table version of the same SALE email, still with the images turned off.

As before, the images are turned off in this display, but it no longer matters. The image is now text, so the word “SALE” appears without a problem. Although there are some font differences between the original graphic and the table-based version, few would argue that they are enough to warrant the lost opportunity to attract customers with more visually interesting email.

Now let’s look at a slightly more complex example from Bergdorf Goodman. Here is the original image that they used in their email:

It’s visually interesting and colorful, but, again, there is nothing here that couldn’t be done with text. That may not seem to matter. After all, couldn’t all this information be put in an ALT tag as well? Yes, but ALT tags are really there for backup, and they won’t always solve the problem either. The next image shows how this same image appears as part of an email with the default settings in Hotmail/Outlook.com.

In other words, you might as well be sending a blank email at this point. You are relying completely on the recipient to have either added your email to their address book, or to click on the Display Image link. To make matters worse, Hotmail/Outlook.com’s defaults make all image containing cells appear gray. And yet, it is possible to create this same message, very easily, by using inline styles for the text.

Here is the same email with the main image replaced by text in a table as it appears in Outlook.com, still with the images turned off:

Again, the slight differences in the typeface certainly don’t warrant the lost sales opportunity that occurs with the use of an image instead of text. Everything you need to know is right there already. Better yet, you can now make every line in this table dynamic, so that things like the store location at the bottom, or the departments listed, can change based on the demographics of the recipient, a trick that is a bit more cumbersome when working exclusively with images.

Even if your email requires images to sell products, the sensible use of text throughout the message will help make the email more appealing and make it more likely that the recipient will choose to display the images. Tiger Direct—the popular electronics online store—relies heavily on images to get the point across, but the designer has taken a few pains to make their email visual interesting and useful to anyone viewing the message. The most important points of the email (free shipping, see the deals, and buy now) are all presented as text, so that even without the images we have a reason to investigate things further and a way to do it. The cells of the table use colors based on Tiger Direct’s standard web palette, so that even without the image, there is a subconscious recognition that the email is from Tiger Direct.

Of course, the value of these colored tables still depends on the email client being used. Hotmail and Outlook.com, for instance, display cells that contain images as gray boxes regardless of their assigned color values. The dark blue ALT tags in the black cells are hard to see, and a little more actual information would have been helpful, but Tiger Direct makes up for it by including additional information about individual products later on in their mailing (see Understanding ALT Tags for more information).

When it comes to email design, few companies do a better job of it than Macy’s. They seldom rely entirely on images to get the point across and they follow the rule that if the email doesn’t work without the images it doesn’t work at all. Here’s a good example from one of the holiday emails from Macy’s. First with the images:

Now, here’s the same ad with the images turned off as it appears in Gmail with the images turned off:

As you can see, almost no information is lost. Aside from the Macy’s logo and some other small formatted items along the top, all the information you need is visible without further information. When “Display Images” is chosen, additional visual information is added below the fold, but the main message remains the same.

Text within an image

Tables are especially useful when you are inserting text boxes into the graphics. For example, here is the top part of an email we received from J. Crew:

With the images displayed, it looks fine—but here’s how it looked when it arrived in the inbox with the images blocked (in Live Mail):

Not so interesting anymore. What does this tell us besides the fact that it came from J. Crew? Even a few reasonably commented ALT tags would have helped here, but all we get is the J. Crew website address. What makes this email so frustrating is that the problem could have easily been avoided with some care and forethought.

For the sake of simplicity, we’ll restrict the following demonstration to the email’s hero image. Here’s the original:

The first thing you’ll notice is that the text is separate from the image. Had the text overlapped the image, our job would be more difficult, but this is a good choice for using actual text instead of a graphic. First, we’ll need to divide the image into sections. Removing the red squares containing type. Next we’ll place the images into a table with red squares in the image replaced by red cells in a table that contain text.

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

Now the message of the email is still readable to all recipients, regardless of their email browser settings. Fans of unusual typography may not find this solution entirely satisfying, but the visual dynamics created here by the text, plus the readable information make it far more likely that recipients will respond to this email than one that is entirely made up of images.

An image like the one shown in the J. Crew mailing is an obvious example of an email that should have used text instead of an image. The designer had already segregated the text from image, it would have been easy to take it to the next step and place that text in its own cell. But what about a case where the text overlaps the image? In that case, you’ll need to make a decision about whether improved deliverability should trump design. We happen to think that deliverability should trump everything else. With that in mind here are a few ideas about how to make your mail look good and still achieve a good reputation score.

Ghosting Images

Another popular technique for combining text and images is ghosting. With ghosting, the image is screened back in one area so that the text is more easily readable where it overlaps the image. It is a common technique for magazines, but it is also used in some mailings. At first glance, this may seem impossible to duplicate using text, but it is relatively easy to do with colored cells.

Here is the image from an email for a winter coat sale at Nieman Marcus:

You can see that the coats behind the small text boxes at the bottom of the image are much lighter than the surrounding image. To create this effect, the designer placed the text in the image. The problem with that is the same as before—when opened in an email browser with the images turned off, you only get a box, with minimal ALT tag information at best. But looking at the image, it is apparent that the ghosting effect if not only unnecessary, it actually interferes with the design. Wouldn’t this design work better if the ghosted areas were replaced, instead, with appropriate colors?

Here’s the image divided up with all the text in the image converted to actual text. The coat type and pricing information is placed in cells that match the main color in each of the ghosted areas:

As you can see, the solid color cells not only do not disrupt the appearance of the image, they provide a stronger background for the text. There is no real downside using text here aside from the designer’s inability to maintain exact control over which fonts are used. In terms of deliverability, this is a superior approach.

Here’s this version as it displays in email without the images:

This offers considerably more incentive for the reader to engage with this email than the large empty box of a blocked image that appears in the original. All the relevant information is now readable regardless of whether the images are displayed or not.

If you prefer a higher level or brand individuality, you could keep the top banner, but this will detract slightly from the usefulness of the email.

Here is how it would display with the images turned off using the original Bodoni banner at the top:

This is a relatively simple example from which to extract the text. Here’s a slightly more complicated combination of image and text:

This ad does just about everything it can to defy easy conversion to a text and image format. The text is on a background that varies in color from left to right, it uses a non-standard font, and it includes type in a circle. Short of a complete redesign, the only way to adjust this to include text is to make some compromises. Whether these are compromises you would be willing to make must be decided on a case by case basis.

In this case, the easiest thing to do is to convert the type at the top of the ad back into text. We could also do this for the type in the circle, but that would require either quite a few more steps, or a complete re-jiggering of the circle and its dimensions. We’ll use a background color on the cell that roughly matches the background. It won’t give us the even gradient that the photo provides, but for some this is an acceptable compromise. Here is the end result.

As before, we inevitably lose a little bit of control over the typefaces, and there are some noticeable and inevitable color shifts around the outside of the text box due to the uneven nature of the picture’s background; but this change improves the text-to-image ratio, and equally importantly, it gives us something to read when it is viewed with the images turned off. You might ask if we could set the image as the background and place the text over it. Few email clients allow background images, and the existing techniques for doing so make other features such as text styling and alignment a lot more difficult.

As always, we’re designing this email with the possibility that the images will not display. For this reason, we’ve gone one step further and applied background colors to all the cells. For the cell containing the gray circle, we’ve used the circle’s gray value for the cell color and styled the ALT tag with white text to make it more visible (see styled ALT tags for more information on this). Here is what this email would look like with the images blocked:

While it certainly is not as attractive the full image. It does do the one thing that every email should do: It imparts information, even under the adverse situation of having no images to entice the reader. The use of colors in the cells helps give the email visual interest in spite of the missing images, and a style attribute reverses the ALT tag information out of the dark gray box for easier readability (see the next chapter on Styled ALT Tags for more information on this technique).

But could you add even more visual stimulus and information to the table by creating virtual graphics using cell colors? The answer is, yes you can, although whether it is worth the effort is another question. This technique is called mosaics.

Mosaics

The most extreme use of tables to replace images comes in the form of mosaics. Mosaics take the pixel color information from an image and create small cells that mimic the appearance of the image that should appear in place of the cells. Here, for instance, is a screenshot showing our logo in both versions (the mosaic is on the left):

As you can see, the results are impressive. Suddenly you don’t have to worry about whether or not your images will show up. You can add visual information to any email, and visual information has a better chance of translating into sales. But before you get too excited, there are some caveats, and they are big ones. First and foremost is the fact that most email and web design programs have trouble showing these objects accurately. This makes working with these images within a visual editor extremely difficult if not impossible. Even if you use another application, such as Dreamweaver, to layout your email, mosaics won’t display properly.

But a bigger issue is the size of the email files they create. If it is too large, some email clients, such as Gmail, will end the email’s HTML code at whatever point Gmail reaches its limit, leaving you in a worse situation than if you’d actually used image files. In the case of our logo, the PNG file comes in at 10Kb compared to the HTML table version, which is 93Kb, and that’s before you’ve added a single line of text. The Goolara logo is a relatively small file—168 pixels by 75 pixels—but even here, we found that the email we sent was clipped after the mosaic in Gmail and Yahoo, displaying only the mosaic and none of the text. Both of these clients required me to click a link in the display before they would download the rest of the message, which is much more confusing than the standard message about images being blocked. In the case of Gmail, the mosaic was slightly clipped as well, causing some artifacts at the bottom of the image.

Some marketing pundits predict that it’s just a matter of time before mosaics are blocked. That may be true, but comparing them is a bit like comparing apples and oranges. ISPs block images to protect the privacy of their clients. Images require the browser to fetch files from the sender’s server, alerting them that the person has opened the email. By turning off the image display by default, the ISPs effectively allow each person to decide whether or not they want to notify the sender that they have opened the email.

With mosaics, privacy is not the issue—it’s bandwidth. Suppose, for instance, you send out 500,000 messages every week, and each email, without the images, averages approximately 5Kb. That’s pretty big for an email already, but at that rate you’re sending out 2.5 Gigabytes of data. Now add our little 93 Kb image to that file and the number jumps to 49 Gigabytes! Suddenly you’re taking up almost twenty times the bandwidth to add a tiny image to the email. One way around this is to reduce the resolution of the mosaic drastically, but then you end up with an email that looks like an Atari video game from 1982. Beyond the bandwidth, the ISPs now need to store a message that is 20 times bigger than the previous average. If many companies started to use this technology you could see that the cost to ISPs for storage and bandwidth could become quite significant. We therefore do not recommend using mosaics in emails.

UNDERSTANDING ALT TAGS

ALT Tags are valuable attributes that should be included with any image used in a mailing. When a message is first opened and the images are blocked, it’s the ALT tags that give recipients an idea of what they’re missing. They also improve an email’s deliverability by providing additional readable text for the ISPs when they scan the email. ALT tags can be descriptive (“woman in down jacket”), but they are more useful if they include a call to action (“Click here for 30% savings on select winter jackets”). Ideally, of course, they should be linked to web content. The more text, the more likely they will decide the images are not a threat.

Here’s an example from Fossil watches of how to use ALT tags effectively.

There’s no shortage of information in this email, even though it is virtually all images. Each tag explains in detail what the reader is missing. The tags are descriptive enough to entice the reader into displaying the images. This is an excellent examples of good ALT tag use, but—as previously mentioned—some email viewers will interfere with this information, negating the value of the tags. A few cells of text content in some of the cells would help resolve this problem.

Nonetheless, ALT tags should not be neglected. They are the first salvo of information you can deliver to your subscribers immediately. An image without ALT tags is a missed opportunity. If you are already using images with ALT tags in combination with text, you should make sure that the ALT tags are merely repeating what is available in the text. Here is an example from Tiger Direct:

Tiger Direct has used inline style information to give this section both useful information and to create a variety of text effects. Rather than simply repeat the information that is now readable text in the ALT Tags, they’ve listed the model number of the products instead, which helps give the reader an idea of what they are missing and to make it more likely that the reader will choose to display the images.

Styled ALT Tags

Many people don’t realize that it is also possible to control some of the appearance attributes of the ALT tags. This can be useful in making cells more visually appealing when they are displayed without the images turned on. Since ALT tags default to black type, one place where you will always want to add style attributes to the ALT tags is when the ALT information is on a dark background. In the “Create a Stir” example shown in the previous section, the style attribute “color: rgb(255, 255, 255);” was added to the <img> tag in front of the ALT info to make the text white.

Here is a slightly more complicated use of styles in an ALT tag:

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

In this example, the color is set to purple, the font to Georgia and the size to 30px. Below is how it appears in an email browser. The example on the left is the standard ALT tag information as it appears without formatting. The example on the right is the same tag with the styled information added.

It’s important to keep in mind that just because you add style attributes to an ALT tag (or, technically, to the IMG tag that contains the ALT tag), doesn’t mean that the recipient is going to see them. Some email clients, particularly Hotmail.com and Outlook.com, default to display images as gray boxes. As with table cell colors, ALT tags, styled or otherwise, do not display. The Outlook and Outlook Express desktop applications, also will not display styled ALT tags. Instead, the ALT tag text is displayed prefaced by an explanation as to why the program won’t display the image.

Additionally, each browser has its own idiosyncrasies when it comes to displaying styled ALT tags. Recipients using Internet Explorer as their default browser will see the text in the chosen color, but the size and font information is stripped out. Chrome and Safari keep the size, color, and font information intact, but if the text is too long for the image box’s defined parameters, the box will appear empty (this also applies for non-styled ALT tags in these two browsers). Firefox displays the styled text in Gmail and Yahoo, but without the boxes. Opera displays the styled ALT tags with the correct attributes, but puts all the text on the top line, so long ALT tags run out of the box.

Looking at the chart shown, it becomes apparent that styled ALT tags have some value. Even more interesting, though, is the effect of long ALT tags on display results, regardless of whether they are styled or not. Bottom line: If you want to be sure that your ALT text gets displayed on the largest number of devices and browsers, you need to keep it short. Which brings us back to the original position of this white paper: For your email to achieve maximum impact, it needs some text, and the ALT tags, while helpful, and definitely worth attending to, are of limited value in the long run. They are no substitute for intriguing and attractive text in your mailings.

UNDERSTANDING FONTS

As mentioned earlier, one casualty of using more text in your email is the use of exact fonts. If you’ve got your heart set on Microgramma Extended, Arial is going to look funny in its place. They just aren’t the same. Some fonts, such as Bodoni and Gill Sans have such a distinct looks that nothing really can replace them completely. More than any other aspect of email design, this is the biggest sticking point for most graphic artists. Some designers would rather forgo superior deliverability than give up their favorite fonts. To the non-designer, this can seem irrational, but the designer don’t like seeing their Helvetica Neue headlines reformatted as Arial. It is tantamount to heresy.

While we at Goolara do appreciate the elegant perfection of a well-chosen typeface, we would remind any designer who feels this way that, first and foremost, email is about deliverability. You are jeopardizing your company’s email delivery by creating email that is all images and no text. It’s a bad practice.

So does this mean we have to give up all control over our email design to whims of the email clients? No, not at all, but it does mean that you need to always take into consideration the limitations inherent in image-only email and develop tactics to avoid it. Converting text into image files may seem like a way to get around the limitations of font display in email, but it is a bit like strapping horses to the front of a car—it’s using an old solution for the wrong format. Email must be taken on its own terms and this means you need to understand a little about how typefaces work in email. [NOTE: I am using the terms typeface and font interchangeably here. At one time, “font” referred to a specific size of a typeface (e.g., 12 pt. Helvetica), but with the advent of digital design, the need to identify typefaces by size became unnecessary and the terms “font” and “typeface” became interchangeable.]

Style Sheet Substitutions

Cascading Style Sheets (CSS) are the best way to handle type substitutions. Without style sheets, the browser will use whatever font it wants, and that can be anything from Times New Roman to Courier. A headline that was supposed to look like this:

might wind up looking like this:

Or even this:

CSS solves this problem, in part, by making sure that the substitution font is from the same family (in this case, sans serif). The end result may look different, but it will come closer to the original concept than letting the text default to a serif or monospaced font.

Some fonts are considered “safe,” meaning they are installed on most of the computers that are out there. Here is a list of the most common fonts and some of the alternatives that are normally chosen.

In the end, text is still the best way to deliver your message. You do yourself no favors by converting your content to a graphic. The next example is a good demonstration of what we mean. This image comes from an email sent by J. Crew.

This email has plenty to say, but if “display images” is turned off, you won’t see a word of it. The entire contents of this email (besides the text that is required by law) appears as a big empty block, which is not much use to anyone. They could have placed the text in the cell as ALT text, which might have helped a little, but even this wasn’t done.

Now here’s the same email recreated using text instead of a graphic as it would appear in Gmail:

With the images on, there are some slight differences between the original and this version, but even these are adjustable. More importantly, here is the new version of the email with images turned off:

What a difference! Instead of an empty box, the content of the email is immediately readable, and is enticing enough to inspire the reader to click “Display images below” to see the picture. The text-to-image ratio on the original is poor enough to get J. Crew’s email consigned to the bulk folder. The new version has no such problem.

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

THE KISS PRINCIPLE

“Keep it simple stupid” was an acronym created by Kelly Johnson at Lockheed Skunk Works. It is sometimes reworded as “keep it simple and straightforward” to avoid being insulting. However you prefer to interpret it, the sentiment is the same—the simplest approach is the best approach. This applies to email as well as anything else.

“But wait a minute,” you might say. “Combining text areas with images in an aesthetically pleasing way isn’t simple, it’s hard work!” Maybe, but you’re already doing that work, it’s just that toward the end of the process, you are converting all the text into a bunch of uneditable pixels. If you discover a typo in the copy, you have to go back to the PSD file, fix the typo, create a new PNG or JPEG, then relink the image and resave the email. Then the powers that be decide to change the discount—another new image, another new relinking and save again. Compare this to the same situation as text. You make the change in the email’s text, save it, and your done. Not to mention the fact that you are working on a platform that was designed to edit text, which Photoshop, or whichever image editing program you are using, is not.

Sometimes this dependence on images to provide content comes from the inherently visual nature of design. A designer might simply like the look of certain font better than anything most of the recipients are likely to have on their computers or mobile devices. But the designer should remember that email is, at its root, a form of letter-writing, and that words serve the primary purpose of the email, which is to provide information. Once those words have been turned into an element of the design, they become a potential liability, easily blocked by email clients and the message is lost.

Sometimes, the choice to use an image with text in it instead of separate images and text has nothing to do with the designer, but is a function of the way the marketing department handles its mailings. By hosting the images on its own server, a company can quickly replace the content at any point, even after the email has been sent. There are also some services that offer dynamic image replacement, based on information about the consumer. The images are hosted by that service, and when the image is requested, the service uses data provided by the company, or perhaps web browsing data, to decide which image would be most appropriate to return for that consumer.

This dynamic substitution of images can also be done easily using your email marketing tool, without paying for another service. It is easy to define rules, even complicated multi-conditional rules, that determine which image should be substituted for each consumer based on a myriad of data. And the text can be changed to be appropriate with the images using the same rules, giving a more complete presentation of the message.

Personalization of the message for each recipient almost always leads to higher engagement levels, but it is important that the dynamic sections of the email still have text to display (for all the reasons we have provided so far), so simply substituting different images dynamically is an incomplete solution.

Not all your solutions have to be as complex as the examples shown above. It is possible to create visual striking email and still keep all or nearly all the text visible when the email is viewed with images turned off. The next two images are examples of an email that uses color to create most its visual strength. The first example shows the email as it appears optimally, with the images displayed. In the second example, the images are blocked. A styled ALT tag was used to make the ALT tag information for the banner appear in white and at a larger font size. Since the text handles the bulk of the message, the image ALT tags have the freedom to offer more playful, or intriguing information. Ideally, the ALT tags should pique people’s interest enough to inspire them to turn on the images.

RESPONSIVE EMAIL DESIGN

As more and more people choose to read their email on their smart phones. Forrester Research predicts that 78% of email users will access their emails on a mobile device by 2017.* Presumably, some of these people are reading their email on tablets, which are less of an issue for email design. As a rule, what works on a monitor will work on a tablet. But a substantial portion of these are people checking their email while on the move. This generally means they want to see what it says quickly and legibly. Email that is designed exclusively for a 22” desktop monitor will fail badly under these conditions. This is especially true of email that is exclusively comprised of images.

As long as you’re using text, you can control the flow of the images and the text to create a unique experience regardless of the device on which the email is viewed. It also means that you have complete control over the appearance of the type independent of the images. When everything is converted to an image, you have only two choices: the display the image small enough to fit the phone’s screen, which might be too small to read—or display full size, which means the recipient must scroll around the image to get the gist of the message.

We are likely to see more and more use of responsive email design to control how email appears on mobile devices. With responsive design, your style information contains an @media query which adjusts the image according to the screen width of the device on which it appears. If the width falls below a certain threshold, the email is automatically rearranged to improve its readability on the smaller device. Right now, implementing responsive design in email still requires a bit of work, but as more people become familiar with the techniques and start standardizing their templates, we expect to see more and more responsive design appearing in the inbox. The email designer who is already using text and images as separate items in their work is one step ahead of the crowd on this trend.

If you plan to use responsive design, you should keep in mind that not all email clients recognize the @media query, so you should continue to make sure that your email design is still readable on a mobile device. This means keeping images below 650 pixels, and using a font size that is still readable when the page is displayed on a small screen.

For more information on designing for mobile devices, see Best Practices Vol. 2: Design and Image Management. Available in the Resources section at goolara.com.

* Forrester Research Email Marketing Forecast 2012 – 2017 (2012)

SUMMARY

Email works best when it is a combination of images and text. For an email to be as effective as possible it is usually better to keep any textual information in an email as actual text and not convert it to an image. There are two main reasons for this:

Deliverability – Email clients weigh the reputation score for mailings based on several factors. One of these factors is the text-to-image ratio. Too many images and its reputation score is lowered. For a company with an overall good reputation score this might not matter, but if your emails are close to the limit, the text-to-image ratio can push your mailings into the bulk folder.

Default image blocking – Many email clients and some mobile phones block images by default. Most people don’t bother changing this default, which means the odds of your images getting seen are decreased. If all your text is in the image, you’ve lost a sales opportunity.

Although tables are being phased out of websites in favor of divs, tables have some characteristics that make them better suited to email design and they should be used to their fullest extent. By adding color to cells, you can make an email stand out, even when the images are turned off. It is also possible to create actual images using tables with colored cells. These are called “mosaics,” and, while interesting, greatly increase the size of your mailings, and might interfere with their deliverabliity.

ALT tags can help people identify what the missing images represent. It is also possible to use style attributes within the <img> tag to give an ALT tag a unique appearance. Styled ALT tags do not work in all browsers or all email clients, however.

Some designers prefer to use fonts in image because it allows them to control the typeface better. Often, this choice is at a cost to deliverability. You have some control over type styles with CSS. CSS should be used inline in email.

Some marketers prefer to use images to deliver the messages in their mailings because they can change the image at any point and thus change the message. Much of this, however, can be done more effectively using the dynamic content capabilities in email This may require more preparation work, but the benefits are substantial.

As more and more people use mobile devices such as smart phones and tablets to view their email, it becomes more and more important to make sure your email is designed with the smaller screens in mind. Keeping images below 650 pixels, and using larger font sizes will help. With responsive design, you can create emails that change their appearance according to the size of the screen. Responsive design requires more set-up work than standard HTML, but this may change as the number of people viewing their email on mobile devices continues to grow.

About Goolara

Goolara has been in the email marketing business since 2005. Symphonie, Goolara’s premier email marketing solution is available in on-premise and cloud-based, SaaS deployments. The powerful software features many advanced capabilities, such as full-featured dynamic content, transactional and triggered email, and customizable report generation features. It is easy to use and runs from a browser-based interface using Chrome, Firefox, Internet Explorer, or Safari. Goolara is headquartered in Moraga, California and can be found online at www.goolara.com.

Goolara, LLC

1030 Country Club Drive, Suite D

Moraga, CA 94556

Telephone: (510) 522-8000

(888) 362-4575

Fax: (510) 522-245

Copyright © 2015 Goolara, LLC All rights reserved.

No part of the contents of this publication may be reproduced or transmitted in any form or by any means without the written permission of Goolara, LLC.

Goolara and the Goolara logo are registered trademarks in the United States, other countries or both. All Rights Reserved. All other company and product names and logos may be trademarks of the respective companies with which they are associated.

www.goolara.com