Category Archives: Trends

Responsive Design in Email, Part 3: Handling Media Queries

Responsive design
In our last article on Responsive Design we examined Adobe’s new Edge Reflow program, which is designed to help facilitate the process of responsive website design. Unfortunately, we found that, like Dreamweaver, Edge Reflow is designed almost exclusively for website production, with no tools for creating responsive email files.* There is, of course, an alternative, and that is to code it yourself. Before you tune out completely, keep in mind that as long as you don’t try to get too fancy, creating media queries is not that daunting. This article is designed to help you get past the main stumbling blocks inherent in using responsive design in emails. As always, the K.I.S.S. rule applies. Keep things simple and you shouldn’t have any trouble building an effective responsive design. Once you’ve created your basic template, building new templates becomes a lot easier.

Email is Not a Web Page

The first thing to remember is that email design has certain characteristics that are substantially different from those of a web page. It is this fact that make both Dreamweaver and Reflow frustrating to work with at times. The main points of difference are:

  • Email cannot use JavaScript
  • Email cannot use separate CSS files
  • Tables are still the best way to control positioning
  • Some email clients can use head tag styles, but some cannot
  • Inline styles are always more compatible than styles in the head tag.

With a responsive web page, it is not unusual to have several CSS and JavaScript files connected to a page. Email design has no such luxury. Images are separate files, but everything else better be contained within the email if you want it to work.

The second thing to remember is that every email client plays by its own rules. Some ignore any expressions that appear in the head tags, which means your responsive design won’t work with that email client. As we discussed in the first article in this series, Gmail will use the head tag information if you view the mail on your iPhone with Apple’s Mail app, but not if you view it with Google’s Gmail app. Even with two email clients that both accept head tag styles, there may be display differences, so thorough testing is necessary every step of the way.

Tables Not Divs

Before you begin coding your responsive design media queries, you need to make sure you are starting on the right foot, and that means using tables. If you hang around web designers, or, at least, hang around the forums that web designers hang around, you’ve probably heard the mantra that you should be using divs not tables. “[Y]ou MUST use tables for tabular data!” A web designer on Stack Overflow posted. “Tables exist for that purpose, you MUST avoid tables only for layout purposes by using divs instead.” True enough if you’re designing a web site, but as every email designer knows, divs don’t always work in email. Outlook.com, for instance, ignores floats and margins, two of the primary components necessary for positioning elements on a page. This is especially ironic considering that Outlook.com is just about the only email client that actually uses most of the new HTML5 tags.

As with any other element on a page, tables can be assigned different attributes in the media queries. The main difference with responsive design is that elements with different media query attributes will need to be in separate tables to behave predictably. But before we get to that, let’s look at the basics of a media query.

Start Simple

For your first responsive design, it’s a good idea to start simple. It’s possible to have instructions for a dozen different sizes of screens, but it is not really necessary unless you’ve designed your email with multiple columns, which is generally not recommended. Depending on your design, you will want to switch to a mobile version of the email when the screen size falls somewhere between 500 and 600 pixels. Let’s say you’ve decided to switch to the mobile display at 525 pixels. Your media query would begin like this:

@media screen and (max-width: 525px)

You may want to use a smaller or a larger number, that is up to you. Smaller smart phones and the early iPhones had screen resolutions of 320×480 pixels. This number has increased substantially over the past few years. Newer iPhones have screen resolutions of 640×1,136 pixels, and the Sony Xperia Z Ultra and Samsung Galaxy S4 come in at a whopping 1,080×1,920 pixels, which rivals some desktop monitors.

These numbers may suggest that, at 640 pixels, the iPhone should display the full sized version of the email, but it will not. The number of pixels listed in the media query and the screen resolution are not equivalent. Newer iPhones, for instance, have a resolution of 640 across, but a device width of 320. This is because the width information in CSS does not take into account the iPhone’s retina display which doubles the number of pixels available. Likewise, the Samsung Galaxy Note II’s 720 pixel resolution comes in at 480 pixels in screen width. Of course, you can take pixel densities into account when you define your media queries, but this will only add an unnecessary layer of work to your email design. You may also want to create an intermediate set of rules for tablets and the very large phones (“phablets”), but keep in mind that this will add another media query and another set of instructions to your head tags. Also keep in mind that, if properly designed, your email should be readable on these devices without requiring any responsive adjustments. An email with a max-width of 650 pixels wide with 12 point type should be perfectly readable on any tablet (some people prefer to use the more cautious 600px).

From CSS to Email

With media queries, you can move elements around or hide them to your heart’s content.

If you are using Dreamweaver or a similar program to create your email, you may want to do everything using a CSS file to ensure consistency throughout the email, and to make it easier to change individual elements at a later date. Just remember that you’ll eventually need to convert all that information to inline styles. You could take the CSS file and stick its contents between style tags in the head, but not all email clients use head tag information. For the most compatible results, after you’ve added the CSS information to the style tag, you should next run the whole thing through an inline styler. This will inline everything, but it may also throw out the media queries at the same time. If so, you’ll need to replace these.

When you are finished, the top of your email’s HTML will look something like this:

<style type=”text/css”>

.ReadMsgBody {width: 100%;}

.ExternalClass {width: 100%;}

blockquote .original-only, .WordSection1 .original-only {display: none !important;}

blockquote table.forwarded-only, .WordSection1 table.forwarded-only {display: block !important;}

@media screen and (max-width: 525px) {

td[class=”SecondKitten”]{

display:none !important;}

img[class=”SecondKitten”]{

width: 100px !important;

height: auto !important;

padding-bottom: 20px !important;}

img[class=”FirstKitten”]{

width: 300px !important;

height: auto !important;

padding-bottom: 20px !important;}…

…</style>

<body>…

The expressions at the top that appear before the media query are there to eliminate email formatting issues. The first two expressions are for Hotmail, and the others are there to reset HTML5 elements to display elements as block elements, which helps control formatting things such as tables and lists.

The three style classes shown after the media query affect different parts of the design. The first one (td[class=”SecondKitten”]) causes the table cell (td) to disappear when the email is viewed on any device that is less than 525 pixels across. The second one (img[class=”FirstKitten”]) forces the image (img) to shrink to the width of 100 pixels, regardless of its original width. Likewise, the third class (img[class=”FirstKitten”]) forced the image to expand to 300 pixels.

Down in the body of the email, you’ll see something along these lines:

<img src=”http://placekitten.com/200/200&#8243; alt=”Meow!” height=”200″ width=”200″ border=”0″ style=”display: block; font-family: Arial; color: #ffffff;” class=”FirstKitten”>

The “FirstKitten” class indicates that if the screen’s width is 525 pixels or less, the image’s dimensions shift from 200×200 to 300×300. Normally, you’d want to reduce your image for a smaller screen, but this example demonstrates that you are not limited to only reductions. Just keep in mind that enlarging above an image’s resolution may result in some pixelation of the image.

A little further down in the body of the HTML, you’ll find this table cell information:

<td width=”200″ align=”center” style=”padding: 0;” class=”Second Kitten”><img src=”http://placekitten.com/200/250&#8243; alt=”Meow! Meow!” height=”250″ width=”200″ border=”0″ style=”display: block; font-family: Arial; color: #ffffff; font-size: 18px;” class=”Second Kitten”></td>

Since the media query attribute assigned to the cell (td) has a display value of “none,” the entire cell disappears when viewed on a small screen, even though the img class is active and has its own values. Here’s our sample file as it appears on a monitor (Click here to view full-sized version of the image):

Responsive Design on a Monitor

Images used in this demo are courtesy of placekitten.com.

And here’s the same file when viewed on an iPhone:

Responsive Design on an iPhone

You can see that a few interesting things have happened. The kitten at the top of the page became larger, deteriorating the image slightly, while the kitten at the bottom of the page disappeared entirely. The call-to-action buttons lose their original size attributes and switch to the attributes in the media query, which specify 100%. This causes the buttons to stretch across the width of the display, which works well for small screens, but would look bad on a monitor.

Now, suppose we change the “SecondKitten” td class as follows:

td[class=”SecondKitten”]{

display:100% !important;}

Now the second box in the email appears like this on an iPhone (or similar small-screen device):

100 pixel kitty

You’ll notice that since the cell is allowed to display and given a value of 100%, the image appears, but now the attributes under the img class=”SecondKitten” take effect. The picture is visible, but reduced to 100 pixels across because that was the width indicated it should be when the screen size falls below 525 pixels. **

Design for the Least Compatible Client

As I’m sure you’ve noticed, not all email clients are created equal. Outlook.com, for instance, does a great job of rendering HTML5 code, but it ignores floats and margins in divs. Some email clients can handle head tags, and some can’t. While it is fun to try and create complex responsive designs that adapt to different devices, you’ll still need to design your email so that when all else fails, it is still readable under the widest variety of circumstances. It might be fun, for instance, to swap out entire sections using “display:none” as an inline attribute, but it won’t do you much good if any of your recipients are using Gmail because Gmail strips out the “display:none” attribute from the email. The old adage in email design is that you should “design your email like it’s 1999.” A better approach is to design for Least Compatible Client (LCC). Don’t put anything in your body tags—other than class selectors for the media queries—that won’t work in every situation. That way, you’ll always have an email that will look as good as it can under any circumstances.***

Responsive Writing

A quick survey we did recently indicated that most of the email designers who are actually creating responsive layouts are not using visual editors such as Dreamweaver, but coding by hand using HTML-oriented text editors such as TextWrangler, Sublime Text, or Ultra Edit. Although Dreamweaver does have tools for creating responsive templates, as mentioned in our other posts on the subject, it is aimed primarily at web designers and often adds unwanted code to your files. If this all sounds a bit daunting, it shouldn’t. Remember our initial advice: keep it simple. Besides, remember that others have gone before you and there is no reason to reinvent the wheel.

Learning From Others

A great way to learn more about how to use responsive design is to open the source code for the responsive emails you receive and see what they’re doing. In most cases, you’ll see a lot of expressions under each media query that aren’t used. This is because everyone is working from a template to which they may have added things they’ve needed over time. A particular email may only use four or five instructions, but the media query section may have a dozen or more extra expressions. Those extra expressions add slightly to the size of the email, but only slightly. Web pages can be a great source of ideas for responsive design, but they often rely on JavaScript to implement certain aspects, so approach with caution.

One excellent source of responsive design examples is Media Queries. This web site is a collection of the best responsive design pages on the Internet. It contains hundreds of dazzling examples of responsive web design. This is a great place to go if you are looking for ideas. Odds are there is an example here that matches your concept. All of the examples are web pages, so most include JavaScript. Formatting varies widely, from carefully formatted and commented, to one big, indecipherable, block of code.

Another source for bare bones responsive email design ideas is Code Pen, an online sandbox for testing HTML. While most of the examples given on this site are for web design, a search for “responsive email” will yield several useful examples of emails that were created to be responsive.

There are also some very good online tutorials available on YouTube. These range in quality from professionally-made, “I-can’t-believe-they’re-not-charging-for-this” instructions, to people with indecipherable accents talking into their laptops at the local Starbucks. Lynda.com also features a thorough tutorial on responsive email design by Chris Converse (includes sample files).

Test, Test Test…

However you choose to create your responsive email, you’ll need to test it across as many different platforms and devices as possible. Sometimes things may look perfectly acceptable across nine clients and devices and then the tenth one will send you back to the drawing board. As with all code, a misplaced percentage sign or missing bracket can ruin everything. Due to the nature of responsive design, it can be difficult to tell if your media query is working until you see it in action.

In the next installment of our series on Responsive Design in Email, I’ll discuss the process I went through to come up with a good responsive design, and what I learned along the way.

* The latest release of DreamweaverCC, now includes 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 still inline all the style information. With this change to Dreamweaver, it might be possible now to use it to create responsive email designs within the program. It’s nice to see Adobe finally paying attention to the needs of email designers.

** If you would like a copy of the original HTML file, you can download it as a zip file here, or as a text file here.

*** This advice does not include Styled Alt Tags, which may not work in certain clients, but these are less an aspect of design than a fallback when images are not displayed.

Responsive Design in Email, Part 1: An Overview

How am I supposed to read that?!!

The hottest topic of discussion in the email marketing field right now is that of responsive design. Responsive design means that email changes its appearance if the viewing device falls within certain size ranges. For instance, suppose you have an email that features three columns of information in 12 pt type. It may look perfect on a desktop, but open the same email on a smart phone and suddenly that 12 pt type is reduced to three pt type and is virtually unreadable. Of course, the reader can always double-tap or pinch-out (zoom) to expand the text to a legible size, but asking your readers to do anything is always a dangerous proposition. It’s always best if the reader doesn’t have to do anything to receive your message and you make it as easy as possible for them to respond to the Calls to Action.

There’s no question that responsive design can help with this. It will automatically format your email according to the parameters you’ve set ahead of time and display the email in the optimal format. When used carefully, responsive design can help improve recipient response. So wouldn’t you always want to use it? Well, maybe not. As with most aspects of email marketing, there’s more to the story than meets the eye.

Talk is Cheap

A quick search of the keyphrase “responsive design email” turns up lots of posts that tell you the advantages of using responsive design in your email. Not one of these posts, however, gives us much useful information on how to do it. “Use @media queries” is the standard mantra, without a shred of information on how to do so. It’s probably not a coincidence that several of the emails I’ve received from the companies that are posting about the advantages of responsive are not using it in their own emails.

One recent blog post states that “adopting responsive design to your website and digital communications isn’t difficult.” It may not be difficult compared to building the space shuttle or performing brain surgery, but when it comes to creating email, responsive design adds considerable complexity to the process. For this reason, some ESPs now offer responsive templates. That’s fine as long as you don’t plan to exert much control over the appearance of your mailings. A few are beginning to offer tools for dealing with responsive design, but even here, much of your control over the design is lost to pre-coded sections of their choosing. If you want your email to have completely unique characteristics, you’ll still have to handle the coding yourself.

Media Queries

As I mentioned earlier, the secret behind responsive design is a feature of CSS called media queries. A media query looks something like this:

@media only screen and (max-width: 425px) {

#image2 {

display: none;

}

In the example above, the image designated as “image2” disappears when the width of the display is 425 pixels or less. Media queries let you control virtually every element on a page. You can change the fonts sizes, the positions of the images, whether or not an image will appear at all below a certain size, and much more. As one might imagine, this kind of power comes at a cost, and not without a few caveats.

Design and Design Again

Creating a responsive email means first designing a page, and then designing it again…and again. If you want to optimize your email display for several different platforms, you’ll have to adjust the design for each one accordingly. Sometimes, this means little more than adjusting the font size and moving some images around, but if you’re not careful, you can spend a lot of time trying to get the email to behave in all situations and the next thing you know, you have six different size settings in your styles. Responsive design can be very finicky about things such as position, sizing, and which units of measurement you choose to use. Like all code writing, it is also unforgiving when it comes to spellings and matching up brackets. Multiply this by how many different versions you decide to create and you can see where things can get complicated fast.

Once you’ve created your responsive design, you’ll need to test it across various devices. Here’s where things get tricky. Your design may look great when you view it as a stand-alone file in Chrome, but suddenly all its features fly out the window when you look at the same HTML with the same browser in Gmail. Congratulations! You’ve just discovered the main problem with using responsive design—the issue of head tag information.

What’s in Your Head

The biggest limitation to using media queries in email comes from the fact that media queries cannot be inserted inline. To take advantage of media queries, you need to include head tags in your HTML. All well and good, except that many email clients are going to ignore your head tags and replace them with their own information. Suddenly all those carefully constructed formats are gone, leaving your email looking more generic than ever. To complicate matters further, this will vary depending on the device you are using to view the email, and which app you are using to view it. A mailing sent to Gmail will show none of the style characteristics when viewed in a browser on a desktop. It will look fine when you view it using the Mail application on the iPhone, but it won’t if you view it on the same phone using the Gmail app. Here’s a chart showing which email clients accept head tag styles and which do not.

Head tag compatibility chart

The Scalable Alternative

The alternative to responsive design is scalable design, which has been around for a while. This simply means that you design your email so that it is readable on any device, regardless of its size. If the positioning of images and text is critical, those old email standards, tables, are still the safest way to go. Tables don’t scale down very well, so you’ll want to keep the maximum width low—around 650 pixels or less—to ensure that the type is still readable on a phone. Tables also don’t allow the elements to interact with other elements that are not in the same cell, so you won’t get the type reflowing around an image when the window is resized. On the plus side, they are still the most compatible way to control image positioning, and they can be used with responsive design as well.

Div tags may appear to be an attractive alternative, but they are not. They have the advantage of being more flexible, so you can have type flow around an image when the window gets to small for the type and the image to appear side-by-side. And because they don’t scale down like tables, the type stays readable on small devices. But div tags won’t work everywhere, and when they don’t work, it can be a disaster. There is still no consensus on div support, so some email clients support some aspects of divs while others do not. Outlook.com and Hotmail, do not currently support the float attribute, so everything ends up stacked on top of each other. Other email clients, such as Live Mail, ignore the overflow command, which can cause elements to overlap and ruin the layout.

Responsive design may be advantageous in creating email that is optimized across different platforms, but you can’t rely on it in all circumstances. You’ll still need to make sure that your email looks good when the media queries won’t work. The type must remain readable on smaller screens. In some cases, using divs instead of tables can go a long way toward making your email more compatible with devices such as smart phones and tablets, but, as mentioned above, this can lead to even bigger problems, particularly with older client software.

The Automated Approach

You can create responsive designs the old-fashioned way, by entering the HTML code a line at a time, but there are tools that are intended to help simply the process. Dreamweaver lets you use the media queries with the fluid design layouts. This gives you three choices of screen sizes with which to operate. Unfortunately, Dreamweaver automatically includes a Javascript file, which is a taboo in email design. Another program that has been getting a lot of attention lately is Edge Reflow, Part of Adobe’s new Edge series and available through the Creative Cloud. But is Edge Reflow the answer to the problem, or just another layer of complexity? Tune in next week for Part Two: Working with Edge Reflow.

Go to Goolara website

Using HTML5 in Email: Video

Video in Email

[Note: This is the second of a two-part series on using HTML5 in email. In this article, we look at the audio and video tags.]

In HTML5, the tag that sparks the greatest interest to many marketers is the new video tag. The tag is designed to embed videos in web pages, but wouldn’t it be great if we could do likewise with email? That way, a recipient could see your video without being redirected to a web page. Over the years, marketers have attempted to accomplish this in a variety of ways. Some have tried embedding Base64 encoded versions of video files into email—a technique that bloats email worse than mosaics and is not recommended by any ESP on the planet. Another technique that some have tried is to offer a plug-in that enables video in email, but this means that with every video email you send, you must also send a link to a third-party solution that requires the user to install new software. Right off the bat, you’ve already lost your audience.

The most common and effective way to add video to an email is by inserting a frame grab from the video into the email and then linking it to the page on YouTube, Vimeo, or your own website:

video image

Often, people add a play button to the image—as we have done—to help identify the image as a link to a video, but it still requires people to move away from their email to another site. With the video tag, the recipient stays in your email. This is preferable, but, as with the HTML5 tags we discussed in the previous post, when, how, or even if it works is contingent on several factors.

Compatibility issues

First of all, your email marketing software may not recognize video tags and will eliminate the code from the email. Even if your software allows the code to be included (and Symphonie is one of those that will), there’s still no guarantee that the email clients will display the video. Gmail and Yahoo, for instance, ignore the video sources listed within the tags, but this doesn’t mean video tags are useless. Other standard HTML information such as text and img tags can be inserted between the tags and an email viewer will default to this information if it can’t play the video.

On top of all this, the way the different devices handle video tags also widely varies. iPhones, for instance, provide a play button, while Outlook.com and Thunderbird require you to right-click on the image and choose play, and only Outlook.com is compatible with the “autoplay” attribute. All other email viewers disable this feature. At first, the inability to play the video without first right-clicking to choose play looks as if it might be a problem. After all, what good is a video if no one can figure out how to play it? But another feature of the video tag is the ability to include a display image of your choosing, allowing you to insert the necessary instructions to make the video work:

Rightclick to play iamge

If you are interested in using video tags you’ll need to prepare the email to cover all the possible exigencies. This includes providing the display image for the email clients that can play videos, and alternative links for the ones that can’t. It requires some familiarity with basic HTML, but nothing too difficult. If you want to use videos in email, we recommend reading our white paper, Video in Email, available here.

Sound Advice

Audio works in even fewer places than video. Only Outlook.com allowed the MP3 file to play. In most of the other clients, the audio tag defaulted to the alternative link. In Thunderbird, both the audio controls and the alternative link disappeared, but the program allowed the Ogg file to play if autoplay is on, but provides no way to pause it. If the file is not set to autoplay, there are no visible controls to make it play at all. On the iPhone, the file will play as long as “display images” is turned on (the default on the iPhone). When “display images” is turned off, a message appears that reads “cannot play this audio file.” Outlook.com was the only email viewer in our tests that worked with both the autoplay and loop attributes, making it possible to create an email that begins making noise as soon as you open it. This is definitely not recommended.

audio video compatibility chart

Ready or Not?

In part one of this series, we decided that none of the tags listed were worth using at this time. With the audio and video tags, we found that, while audio is not useful, the video tag provides enough flexibility and compatibility to be a good way to include videos in email for nearly every platform, but may require some file preparation. Click here to download the PDF version of our Video in Email white paper.

Go to Goolara website

Using HTML5 in Email: New Tags

HTML5 tags

Note: This is the first of two articles examining the use of HTML5 tags in email. In this article, we look at <mark>, <progress>, and <canvas>. In the second article, we’ll take a look at the <video> and <audio> tags.

When it comes to email, common wisdom says you should code it “like it’s 1999.” Using the latest HTML tags is considered risky business in email. Email clients throw out using scripting, and the implementation of new tags is spotty at best. Styling is best handled in-line, but visual editors, such as Dreamweaver, don’t always make this easy, preferring instead to place any style information either in a separate CSS file, or between the <head> tags, which can be lost when an email reaches the inbox.

Erring on the side of caution is usually a good idea, but sometimes we email marketers take this advice a little too far, avoiding useful techniques because five years ago they didn’t work. A good example of this is the relatively rare use of image maps in email, in favor of the more problematic and file-swelling sliced images (see Keeping It Together—Image Slicing vs. Image Mapping). So what about HTML5? Is it worth trying? Some of its new features are intriguing, particularly the <video> tag, but can you use them in email. Here’s what we found out.

Meet the New Tags

HTML5 removes (i.e., deprecates) a few old tags from HTML4 and adds thirty new ones. Several of these new tags, such as <article>, <aside>, and <section>, have little use in email; three of the new tags—<details>, <dialog>, and <summary>—will only work in Chrome and Safari at this time; and some tags, such as the <bdi>, <ruby>, <rt>, and <rp> tags, are specifically designed for use with other languages and are beyond the scope of this article.

Some tags may not have much practical value, but could be useful for creating visually interesting email without having to rely on images. Examples of this are the <mark> tag which makes text look as if it has been highlighted with a marker, and the <progress> tag, which creates an animated green bar similar to the ones seen when downloading files:

progressbar

markhilite

[Note: These are screen representations. WordPress.com does not support all the HTML5 either.]

Unfortunately, in our tests, <mark> only worked in Thunderbird and Outlook.com, and <progress> only worked in Outlook.com (by far, the most HTML5 compatible email client available). Given such limited application, these tags are of little use at this time for email marketing purposes.

One new feature that looked as if it might have real value for email is . With , it is possible to create graphics directly on a page without linking to a file. You can already do this, to a certain extent, with

tags, but offers more controls and possibilities. In our tests, however, did not work in any email viewers, stand-alone or browser-based. This isn’t surprising considering that the primary intended use for is to create graphics on-the-fly using scripting. As a rule—primarily for security and virus reasons—email clients strip out any scripting found in an email.

Comparison chart

Coding Like It’s 2011

It’s apparent that, as far as email is concerned, HTML5 still has a long way to go before most of its features become useful to email marketers. As is always the case, the email clients are the last to adopt the latest features in each iteration of HTML; so, while it may not be necessary to code like it’s 1999, you might want to stick to coding like it’s 2011 for now. We will keep testing these features and as soon as any of them are available across multiple email clients, we will report on it here. One new feature of HTML5 that is shaping to have real value to email marketers is its video feature. There a lot to say on this subject, so we’ll be talking about it in a separate article. We’ve also created a white paper on the subject, available here: Video in Email white paper.

Next: Audio and Video in Email with HTML5.

Go to Goolara website

The Secret Side of Email

The Secret Side of Email

Hardly a week goes by when someone isn’t proclaiming that email is dead. “E-mail a thing of past for business, young” [sic] declared a headline in the Boston Globe. Young people, the article goes on to claim, no longer use email, preferring to communicate via text messages and social networks. It brings to mind the Wall Street Journal article from four years ago stating that email is a thing of the past. “Email has had a good run as king of communications,” the article states, “but its reign is over.” If a person went by the news articles, it would seem as if we should have all stopped using email ages ago. Recent events prove otherwise, and suggest that some of these predictions could well have ulterior motives.

In January, 2013, Salesforce.com CEO Marc Benioff was invited to appear on stage at the International CES, one of the largest consumer electronics shows in the world. “How are you connected with your customers, your partners, your employees,” he asked. “Email? Those days are over.” In the aforementioned Boston Globe article a couple months later, Anna Rosenman, the senior product marketing manager at Salesforce concurred with her boss: “Email is one-to-one communication, and that’s not how we need to be communicating.”

On second thought…

Then in May of 2013, Salesforce announced they were buying the email marketing provider, ExactTarget. Acquiring a company is no small task, and any responsible company is going to research their proposed acquisition thoroughly before following through with a purchase of this magnitude. These things take several months; sometimes years. While it’s possible that Mr. Benioff woke up the morning after the CES show and said, “Gee, I think I’ll acquire an email company,” and didn’t bother to tell his senior marketing manager, it seems unlikely. It’s far more probable that his and Ms. Rosenman’s talk about the death of email was a smokescreen to keep the competition off the trail. In that light, all the talk about email no longer being viable starts looking downright Machiavellian.

But Salesforce is, by no means, the only company to incorporate email marketing into their offerings. Oracle did it last December and Deutsche Post (DHL) joined the bandwagon a month after Salesforce. Suddenly it’s looking like a trend. So why all the sudden interest from these major players in email marketing systems?

It probably has something to do with the flood of recent surveys showing that email is not only alive and kicking, but thriving. According to Forrester, 25% of the adults online in the United States value email as a way to learn about products and promotions—up from 17% in 2010. Contrary to the reports that email use is waning, the Pew Research Center found that email is tied with search as the most popular online activity. A lot of press has been given to the idea of marketing via Facebook and Twitter, but according to Merkle’s 2011 View from the Inbox research study, 74% of adults still prefer email when it comes to communicating with brands.

The World Goes Mobile

Another factor in the rise of email’s effectiveness comes in the forms of tablets and smart phones. 72% of the respondents in Adobe’s 2013 Digital Publishing Report on Retail Apps & Buying Habits use their tablets to shop, and 71% of those say their decisions are influenced by company email, second only to recommendations by friends. Among smart phone users, a whopping 78% use their phones to check email, ahead of all other uses including making phones calls!

It should be no surprise, then, that Wired Online this month includes a story headlined, “Email Is Crushing Twitter, Facebook for Selling Stuff Online.” Based on data gathered by Custora, a marketing analytics company in New York, the article says that email far outpaces any of the social media when it comes to sales results. This is no small segment either. Custora’s data came from 72 million customers shopping on 86 different retailer sites—a mighty convincing sample.

The Obama Factor

It’s also probably no coincidence that this sudden rebirth of interest in email marketing software came after the 2012 presidential election. As we discussed in a previous blog post, Team Obama’s use of email was an important factor in Obama’s successful bid to retain the presidency. Obama was on Facebook and Twitter as well, but it was the email that received the most attention. More importantly, it also pulled in the most donations by a long shot—approximately $500 million.

So the next time you read somewhere that some big mucky-muck says that email is dead, give that person six months and ask again. The odds are good they’ll have a change of heart.

Go to Goolara website

Yahoo Recycles Dead Email Addresses

Yahoo recycles email addresses

In a move that has many people in both the email marketing industry and the Internet security field shaking their heads, Yahoo has announced that any Yahoo email addresses that haven’t been logged onto in over twelve months will be made available to other users. In a post on their blog, Jay Rossiter, Yahoo’s senior vice president of platforms, wrote that the reason for doing this was to allow Yahoo users who weren’t online during the initial email address land grab to get the Yahoo addresses they wanted. “If you’re like me,” Rossiter explained, “you want a Yahoo ID that’s short, sweet, and memorable like albert@Yahoo.com instead of albert9330399@Yahoo.com”

Security experts are especially skeptical of this move, saying that the possibilities for identity theft abound. The recently deceased, or long-term hospitalized people could be prime targets, they argue. Elderly people whose kids set up their account and helped them buy a few things on Amazon two years ago are also possible targets. But the Email Marketing community has its own set of potential problem areas that must be dealt with if Yahoo goes through with this program.

30 Day Turnover

According to a Yahoo spokesperson once an old email address is requested, Yahoo will send bounce back emails alerting senders that the deactivated accounts no longer exist, and they will also unsubscribe these accounts from commercial emails such as newsletters, email alerts, etc. But Yahoo’s plan is to allow only thirty days for this process. This quick turnover only adds to the possible problems email marketers are liable to encounter.

Suppose you have a customer who purchased something from your company a year-and-a-half ago. You’ve been sending email offers, but as the person hasn’t been that engaged, you’ve tapered off on the mailings. You send something at the end of June, and then something again at the beginning of September. In between, that address has gone to someone else. How will that new recipient react? As far as they’re concerned, your email unsolicited, which makes it a good candidate for the Spam folder. This is, admittedly, worst case scenario, but a man named Murphy already proved that if something can go wrong, it will.

For an individual, sending to a bad address is no big deal. They will receive some kind of bounce message, but other mail they send will go through. That is not the same for mass marketers who send thousands of emails per day. When a marketer sends a large volume of email, the ISPs keep track of how many bad addresses are attempted and use that as a factor in determining the Reputation Score of the sender. This is explained in greater detail in our guides, but, suffice it to say, you can’t send to bad addresses regularly and maintain good inbox penetration. Good email marketing software looks at failure messages and immediately removes bad addresses from any future distributions to keep the failure rate as low as possible.

Beware of Spam Traps!

If you have removed inactive recipients from your list, you may have already removed some of the accounts that will be reactivated by Yahoo. One idea might be to reactivate all Yahoo users who were previously marked as bad addresses, in case some of them are now valid addresses. However, this would be a bad idea for many reasons. One is that some of those bad addresses have been turned into “spam traps.” This is an anti-spam technique used by all ISPs that takes old, inactive or closed accounts and reactivates them. Before the account is closed, the ISPs return an error message that the user is inactive to anyone trying to send to that address. After a period of time, the ISP will stop returning these message and turn the account into a spam trap. The idea is that good marketers send email to their recipients on a regular basis, so they will know that the account is no longer valid. Those that don’t follow best practices, or buy a list from questionable sources, may get email addresses that have not been sent to in many months. When an ISP receives an attempt to send to an address they have turned into a spam trap it results in an immediate and significant drop in the Reputation Score.

Even if there are no spam traps on your list, if most of those bad addresses remain bad, reactivating them will cause a large spike of unknown user rejections from Yahoo, which will also hurt your Reputation Score.

Re-subscription Issues

The problem isn’t simply limited to old addresses either. If you have a user who gets marked as invalid within the short window Yahoo provides, and, coincidentally, the new owner of that account wants to join your distribution, the new user may or may not get added, depending on how the request comes in. Many marketers re-import their list on a regular basis to add new recipients or change their demographics, so good email marketing software has to look at the import and see if the recipient is already in an unsubscribed or on-hold status. It would be a mistake to re-enable all recipients who are re-imported, as you would be causing another Unknown User request against the mail server, or re-activating a user who had unsubscribed. Therefore, if the new user’s request to be added comes into your website and is added to a bulk import, the request may be ignored.

If the request to add the email address is sent to the email marketing software in a non-batch mode, such as via an API call, it will depend on the implementation of the software as to whether the request is processed or not. Check with your ESP on how this would be handled.

Best Practices

Sending to a person who inherits an email address is probably a bad thing, and if that person marks your email as spam, it will be more difficult for you to get future mail delivered to Yahoo. Therefore, if you do not already have a program in place to remove inactive users, start one, or make sure that you send an email to all your users at least once a month. Above all, you’ll need to be especially vigilant when it comes to any clients using a Yahoo address.

Go to Goolara website

Gmail Insights: Gmail Reinvents Itself

Gmail tabs

Recently Google introduced a new feature to Gmail that has some marketers up in arms. In the past, an email could wind up in one of two places: the inbox or the spam folder. Gmail users could prioritize their mail with labels, but as long your mailing didn’t end up in the spam folder, you were doing alright. Now Gmail users have the option of dividing their email into separate tabbed areas based on the content. These tabs are, as follows:

  • Primary—This is where all personal correspondence or any email that Gmail can’t categorize ends up. It is the first tab and automatically appears whenever the Inbox is opened.
  • Social—As the name suggests, any email from sites such Facebook, Twitter, and LinkedIn will end up here, as well as email from dating sites.
  • Promotions—Most marketing email will end up here, including special offers and company newsletters.
  • Updates—Transactional email, such as order receipts, program updates, and monthly charges should end up in this tab.
  • Forums—Similar to Social, forums, mailing lists, and any special groups to which you belong will appear here.

Gmail tabs

Whenever new email is added to one of these tabs, the tab displays the number of new emails along with the first few “From” names that appear on these mailings. These tabs are also available on the Android and iPhone Gmail apps. For now, the tabs feature is an opt-in setting, but Google has said that in the future it will become a standard feature of Gmail.

For the power email user, these changes do not matter much. These people have already applied filters to their email to categorize things more easily. As a member of some particularly hyperactive discussion groups, I learned long ago about the advantages of assigning certain topics or “From” addresses to their own folders. But for the person who normally doesn’t bother with any email sorting beyond dragging receipt emails to a separate folder, Gmail’s new tabs could be a game changer. How much of a game changer remains to be seen.

What goes where?

How does Google decide under which tab to put a new email? Google won’t say anything about their logic, probably to avoid people trying to game the system. This is similar to their SEO logic, where they will say very little about the algorithms. So here is our take on how they are doing this. The Social tab is probably hard-wired to the main social sites —Facebook, Linked-in, Twitter, etc. This should work pretty well and is fairly foolproof. It does mean that promotions from these companies come in as Social, as we’ve already experienced. For all other email, we suspect they are scanning the content, looking for keywords, and the things that they examine for deliverability already, such as the number and location of links and the text-to-image ratio. Anything that has commercial sounding keywords, or many images, will likely go to the Promotions tab.

If this is true, then ironically, sophisticated marketing email design suddenly become less valuable. A transactional email that includes several images, complex tables, and additional offers, has a strong chance of ending up in the Promotional folder instead of the Updates folder where it belongs. A simpler transactional email containing few if any images or links, and is primarily text has a better shot at the Updates folder in this case.

For some marketers, Gmail’s new interface seems like a direct assault on their businesses, arguing that segregating promotional email into its own tab is tantamount to creating a new Spam folder. Although the actual effect remains to be seen, some people in the industry predict that we will see a drop in response rates.

So is this the end of the world?

First and foremost, it is important to remember that most promotional mailings are going to end up under the Promotions tab at first. The problems you’ll face as a marketer with this new system really aren’t that different than they were before. People can usually recognize promotional email almost immediately, and its success inevitably boils down to the usual factors—intriguing subject lines, compelling content, and how easy you make it to respond to offers. Whenever email lands under the Promotions tab, the client is alerted to new email in the tab bar immediately, but how people respond to these notifications is still unknown.

Some concerns about the potential effect of tabs on customer responsiveness are valid. Extremely time sensitive emails (“25% off afternoon special”) might get overlooked until it is too late. But it is equally possible that when clients discover they have missed short-lived specials, they will be more diligent in the future when it comes to viewing their promotional emails, which could benefit everybody in the long run.

If you are sending transactional emails you are going to want to pay close attention to where your mailings end up. You may find that your transactional emails are being treated as promotional based on the keyword-scanning methods Google appears to be using.

Google’s Rulebook

Google’s stated goal with these recent changes is to make Gmail more relevant to the users. That was the idea behind the addition of the priority feature in email, but it appears that not too many people bothered with that feature, so they are trying a different tack. In the end, the success or failure of tabs will hinge on the public reaction. It is interesting to note that one of the features Google touted for Gmail when they introduced the service was the idea that you did not need to categorize your email, but could, instead, use search to find specific emails. Apparently, they no longer feel this is the case. Google has never been particularly responsive to marketers; just ask anyone who has dealt with SEO issues over the past few years. It is doubtful that any complaining by marketers will yield results.

It is also apparent that the interface is not 100% accurate. I’ve received promotional mail in three different folders without any rhyme or reason. It appears as if Google is resorting to keyword connections to determine the placement of some email. If your mailing is in reference to a specific event, such as a webinar, or contains information that resemble a receipt, there’s a chance it will end up under the Updates tab instead of Promotions. We are also seeing a lot of crossover between Social, Updates, and Forums, depending on the information in the “From” address.

One thing is certain, this will not be the last time that Google fiddles with email, nor is it a marketer’s worst nightmare. Good marketing will prevail because, in spite of any grousing on the part of the general public, people like good marketing. It informs them, entertains them and aids them. As long as your mailings do one of these three things, you’ll be fine.

Go to Goolara website

Keeping It Together—Image Slicing vs. Image Mapping

Note: With the increasing use of a smartphones to read email, some aspects of image mapping that may affect their usability on older phones. Always test!

It is not at all uncommon to see the hero images in mailings sliced into several pieces. Email marketers have been using this technique for many years. If you normally first view your email with the images turned off, it is not uncommon to encounter an email with a table like this:

Blocked image view

Only to have the following appear when you click “Display Images.”

Email image version

There are some good reasons to slice an image into sections. The best ones are:

  • To provide text or barcodes within the image (see Using Text to Deliver your Message)
  • To provide animation without increasing the size requirements for the entire image
  • To reduce the image size for areas with only a few colors
  • To create informative alt tags for an infographic

But in most situations, slicing up an image leads to nothing good. It increases the HTML size and, since browsers only make a few requests at a time, it can slow down the rendering time for the image. When a single large image is requested, the data is sent continuously as fast as the server can send it, and with as much bandwidth as you or the server can provide. When there are multiple images, the browser can simultaneously request several of them at once—between 2 and 8 simultaneous requests are allowed from the browser at once, depending on the browser. But this is for all resources on the page, not just the images, so if you’ve split an image into 4 or more pieces, the browser must receive the first bit of data, then turn around and make another request for more data.  Each request has a round-trip time that mathematically must be longer than the time for a single request.

This process also creates more opportunities for problems to slip into the process. The finished image must be assembled in a table, and if any cell in the table has a problem, it can throw the entire image out of whack. We’ve all received emails with misaligned sections and unwanted gaps in an image where someone forgot to add style=”display: block;” to one of the img tags.

Forget What You’ve Been Told

Some people and even some email blogs recommend slicing up an image to help avoid loading problems in various email programs, but if the image really is big enough to create problems of this sort, it is already bigger than it should be. You would be better advised to reduced the size of the image using an image compression tool such as RIOT, which does a good job of dramatically reducing file sizes without much image deterioration.

The most common reason for sectioning an image is to assign different links to different portions of the image. But this is also the worst reason to section an image. Here’s an example of a hero image from a recent Banana Republic mailing:

Hero image

And this is how they sliced up the image:

Hero image sections

The reason? So that anytime someone clicked on any part of the man it would take them to the Men’s Department, while clicking on the woman takes them to the Women’s Department. They also wanted the text in the upper left to go to various departments and the background to go to the home page. Here is how the image is linked:

Image map areas

Green = Home Page, Pink = Women’s Department, Blue = Men’s Department

So how can you achieve the same thing without slicing your image into dozens of pieces? Try image mapping.

Email Image Mapping Comes of Age

You’ve may have read from past blogs and other sources that image mapping is problematic in email and you shouldn’t use it. “Don’t use image maps,” one website states bluntly. “They are not fully supported across all email clients.” While there may have been some merit to this argument a few years ago (that particular post goes back to 2007), today, image maps work virtually everywhere. Unless you happen to have an unusually large number of customers using Outlook 7, your recipients should have no trouble viewing or clicking image-mapped graphics.

Also, image maps can also cut down on the size of your email. The sliced image shown above required 112 lines of HTML and came in at 13Kb, compared to the image-mapped version, which required only 12 lines of HTML and took 2Kb. Here is the image map as it was applied to this picture using Dreamweaver:

Image Map shown

In this example, the image itself links to the home page, as do the “Bright New Arrivals” text at the top and “shop now.” The man and woman link to their appropriate pages.

There are a few idiosyncrasies in the different browsers, but nothing to warrant a blanket rejection of the technique. In Internet Explorer, the link in the image is disabled after the image is loaded. Only the image map links are clickable. The background image, however, will still respond to right clicks and show its alt tag information when the mouse hovers over it. In some cases, the empty image box of a blocked image is still clickable, but the image maps may not be. In our trials, once the image is loaded the image map is active and clickable in all cases. In Gmail, when viewed with Firefox, image-blocked email displays only the alt text of the image with the appropriate link—no box and no image-mapped links—but the image maps become active as soon as the image is loaded. Our test, done in April of 2013, yielded the following results:

Image map comparison chart

Keeping the caveats listed above in mind, we recommend the following as best practices when working with image maps:

Always assign a link to the base image

Yes, these sometimes disappear after the image is loaded, but they do help provide links in email clients where the image is blocked.

Don’t get carried away

The more complicated your image maps are, the more HTML is needed to render them. It is possible (although highly unlikely) to create an image map that is so complex that you’ll end up with an email file as large as the ones created by sliced images. The image maps shown above are not exactly simple polygons, and yet they still resulted in substantially smaller HTML files than the ones using sliced images.

Provide default link-mapped areas

In the case shown above, two of the image-mapped sections go to the same place as the image’s root link. In this way, if the browser does not respond to the image’s link after the image map is loaded, that page is still accessible. If we wanted to be really thorough, we could have blanketed the image with mapped links, but this is often overkill.

In 2014, it came to our attention that image maps were exhibiting some strange behaviors on smart phones. On iPhones, the image and the image map had to be restrained in a table to function properly, and on Android phones the image map was reducing to half its size, rendering it useless. Our recent tests have shown that these problems have been fixed. People using older phones might experience problems, however, so its a good idea to keep track of your subscriber base to make sure they are seeing your emails the way you intended. For more information on both image slicing and image mapping, download a free copy of our Email Image Linking Guide, which includes detailed instructions for creating images slices in Photoshop and image maps in Dreamweaver. Available here.

So go ahead and use those image maps. Are you using them already? Have you done any deliverability tests with image maps versus sliced images? We’d love to hear your findings. Is there a reason we haven’t addressed here why you do or do not use image maps? Drop us a line and let us know.

Go to Goolara website

The Finer Points of Styled Alt Tags

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

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

30% SALE, Today only!

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

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

Styled alt tag in Firefox

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

Styled alt tags in Gmail

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

Styled alt tags in Chrome

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

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

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

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

Styled Alt Tags chart

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

Alt tag colors

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

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

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

Go to Goolara website

Should You Use Mosaics in Email?

Using tables to create images where none are allowed.

A hot new topic in digital marketing is the use of mosaics to create images in email browsers where displaying images is turned off. Most email browsers, such as Gmail and Outlook, default to leaving images turned off. That means when you receive an email, any images in the email show up as empty boxes with some alternative text in place of the images (a good reason to always make sure your alt tags are always descriptive). A clever solution comes to us from Style Campaign in the form of their BMP to HTML Converter, which they offer as a free download on their website.

Major ISPs are already blocking mosaics, but not in the standard way they block emails. We’ll explain in a minute, but first, here’s a brief explanation of how mosaic software works: A digital image is made up of pixels. Mosaic software takes those pixels and converts them into empty HTML table cells. Each cell is given a background color that matches the color of the corresponding pixel. The end result is nearly indistinguishable from the original image. Here’s a screenshot showing our logo in both versions (the mosaic is on the left):

Mosaic and gif file

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. Here’s what the table version of the Goolara logo looks like in Dreamweaver:

There nothing wrong with the mosaic, it’s just too much information stuffed into too small a space for a visual HTML editor to handle. Even here on this blog, I had to use a screenshot instead of the mosaic because the HTML editor for WordPress simply couldn’t handle the table. Visual HTML editors, such as Dreamweaver, want to show you the boundaries of each table cell and there’s simply not enough room to do so. The end result is a file that, while it may send okay, requires much more caution and testing before approval.

Also keep in mind that stuffing your email with tables this complex makes for a very large email file. So large, in fact, that some services, such as Gmail, may lop off part the file if you’re not careful, 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. Both of these programs 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.

Gmail effect on mosaic

File size is the real problem with mosaics.  The reason ISPs block images is because images require the browser to fetch files from the sender’s server, alerting them that the person has opened the email. To protect the privacy of their clients the ISPs allow each person to decide whether or not they want to see the images in an email. Privacy is not the issue with mosaics; it’s bandwidth. Say you send out 500,000 messages every week and each email, without the images, runs approximately 5Kb. That’s pretty big for an email already, but at that rate your 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 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.

These are all pretty big caveats. Right now, you should approach this technology with caution and use it only on images that are either very small, or are intentionally low resolution. Even so, you should keep track of your file sizes and remember that the bigger the file you are sending, the greater the opportunity for things to go wrong.

Go to Goolara website