Category Archives: Trends

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