Tag Archives: Gmail

Hey Google, Why’d You Do That?

Last week, Google suffered several major outages. Naturally, it made the news. So many people rely on Google for search, Gmail, YouTube, and maps, not to mention Drive, which some companies use to prepare documents and presentations. We don’t fault Google for having an outage. We make software, so we know how difficult it can be, even for a company with Google’s resources, to avoid this situation. However, we do think the way the outage was handled for Gmail was unforgivable and shows a lack of respect for users of Google’s services.

What Happened Was…

On Tuesday, December 15th, 2020, Gmail stopped accepting email sent to Gmail. It lasted from approximately 1:30 to 4:15 PT—the middle of the afternoon on the West Coast, and toward the end of the workday on the East Coast. Bad times for an outage like this when you consider some businesses send their mailings out as soon as they are ready to go and, in the United States anyway, that is exactly when Google went dark.

This shouldn’t have been a problem for sending email. The protocol that defines how email is sent allows for a store-and-forward system where a mail server can hold email until a server is ready to accept it, making multiple retries over time to get the email delivered. If Gmail had gone down such that its servers simply didn’t respond, anyone attempting to send email to a Gmail user would have their email delayed, and that would be the only negative result. After the servers came back up the email would be delivered, and the system would catch up.

However, Google didn’t make the Gmail servers unavailable. Instead, they were left running but answered requests to receive email with a message that the email address was not valid. For a user sending an email to a friend or relative and getting a message back that the address is not valid might be confusing at best. Less sophisticated email recipients might assume that the invalid email message is correct and go ahead and remove that contact from their address book or, worse, assume that their own system was hacked when their messages to friends started returning invalid email notices, leading to a lot of wasted time on hold with their Internet provider’s tech support.

The Effect on ESPs

For the business of email marketing, the results are more serious. It’s common for Email Service Providers (ESPs) to set their software up to remove recipients when the destination email server says the recipient is not valid. We do it, as do many others. This is done to avoid potential future deliverability problems. Sending repeatedly to an invalid email address is a good way to ruin your reputation score.¹ In the Google case, it meant that a large amount of email wasn’t delivered to recipients. Worse than this, it meant that huge numbers of valid Gmail users were needlessly removed from ESP databases all around the world.

Fortunately, we were made aware of the problem early (the only real advantage to it happening in the middle of the workday). We contacted our customers and reversed the on-hold status for the hosted customers and the on-premise customers for whom we manage deliverability; but if you are using a different ESP or managing deliverability issues yourself, you should check to make sure your email lists have been corrected after this problem. We assume most quality ESPs will be proactively resolving this issue, but it would be good to check. If you run your own email marketing program, you’ll need to work with your programmers and database administrators to handle this issue.

Google’s Attitude

Google’s handling of this outage was disappointing. Leaving the Gmail servers up but responding to all email requests with “Unknown User” needlessly caused all kinds of problems and confusion for users. We would go so far as to say that it was a very rude thing to do. If Google had simply turned off the computers, there would be almost no negative impact from the outage beyond delayed delivery. Google employs dozens, if not hundreds, of people in its Gmail division. Was there no one there who could simply pull the plug on the Gmail servers?

Turning off a server is easy, but they were unwilling to take this step, apparently unconcerned about how it would impact their users and anyone who wanted to contact them. Is this a sign of how Google feels about its users? Google removed the “Don’t be evil” motto from their code of conduct several years ago. We now see why.

1. For more on what a Reputation Score is and why it’s important, see the Deliverability Enhanced white paper in the Resources section of the Goolara website.

© Goolara, LLC, 2020. Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to Goolara, LLC and the Goolara Blog with appropriate and specific directions (i.e., links) to the original content.

The Techniques Behind Mail Client Unsubscribe Links

Leave a reply

Of course, we’d all rather have no unsubscribes from our painstakingly crafted newsletters and promotional mailings, but you can’t please everyone, and having a recipient unsubscribe is vastly superior to having them mark your email as spam. In 2014, Google caused some furor in the Email marketing community when they announced the addition of an unsubscribe link that appears at the top of the email content. A few years down the road, we can see that the angst of many marketers was unfounded. Gmail wasn’t even the first email client to offer an automatic unsubscribe link. Microsoft started offering unsubscribe and block features in Outlook as early as 2010. We did some research, looking at a large collection of emails we’ve received to determine what criteria caused the ISP to show the unsubscribe link. There were inconsistent results, but one of the most significant factors is the List-Unsubscribe header.

List-Unsubscribe

One thing that should be included in your mailing—and is automatically inserted by most ESPs—is the List-Unsubscribe header. This provides a web link and/or a mailto address to use for automated unsubscribes. To see if your mailings have this, look at the header information, either by choosing to see the header or, in Gmail by choosing “Show original.” In some cases, you’ll see this line followed by a “List-Unsubscribe-Post” line, which may contain the command: “List-Unsubscribe=One-Click” to further facilitate the unsubscribe.

In our research, most of the cases where the ISP showed the unsubscribe link the email included the List-Unsubscribe header. Since this is the main mechanism to provide an automated unsubscribe ability, it is unclear how Google and the other ISPs are determining the unsubscribe link when the header is missing, but we have seen some cases where this was done.

Using “Via” Sends

When the ISP displays that your domain is “via” some other domain, it generally means that you do not have your SPF records configured correctly. If your email is “via” another domain, there’s a good chance the unsubscribe link won’t appear. Take a look at these two From addresses:

The mailing that was sent from the How-To Geek’s primary domain (howtogeek.com) has the unsubscribe link, while the mailings sent using a different domain (reviewgeek.com via howtogeek.com) does not. In our research, we found that none of the mailings sent via other domain addresses appeared with the unsubscribe links.

The Link’s Reputation Score

You can do everything right and still not have the unsubscribe link appear. In our research we were surprised to find many valid senders that didn’t have the ISP’s unsubscribe link. It wouldn’t make Google or some other ISP look good if the unsubscribe link they offered instead went to a phishing page. Email recipients should have confidence that clicking the link will be safe, but how does the ISP determine if the link provided as the List-Unsubscribe is valid? The answer is by using the same basic algorithms they have already applied to your sending to determine if the recipients want your email (your email Reputation score).

When the link does not appear, it is usually for one of these three reasons:

The sender does not send enough email out to create a usable profile
There is a problem with the sender’s IP information
The sender is a known spammer.

If it’s the first, the problem should disappear as your email sending rates increase. If it’s the second, you may have some erroneous information in your setup. As for the third, it needs no explanation.

The World of Apple

Not surprisingly, Apple has created its own version of the unsubscribe button. On iPhones and iPads, these appear in the Mail program like this:

The Apple unsub link appears to be intended to make it easy to unsubscribe from newsletters and other list-based mailings. The Apple unsub link is not contingent on the sender’s reputation score, so you may get the unsubscribe notice on the iPhone, but not in Gmail on the desktop. As with the Gmail unsubscribe link, figuring out why and when it appears is difficult. The wording of the message suggests that it appears when it recognizes that an email has come from a mailing list, but we see plenty of emails that unquestionably are sent from email lists that don’t include this link.

Email Apps

Email apps handle things slightly differently again. In the Gmail and Yahoo apps, you’ll find unsubscribe as one of the choices in the “more options” menus.¹ It won’t appear if your unsubscribe process uses a preferences menu or requires the subscriber to re-enter their email address.

Conclusion

Determining the conditions which will cause your email to appear in the ISP’s unsubscribe link can appear a bit arbitrary or illogical. The most important thing is to make sure you have the List-Unsubscribe header, and that the link works properly. Beyond that it appears to mostly be an issue of your good email reputation score, which is significant for many other reasons as well. Allowing recipients an easy way to stop receiving email they don’t want will help ensure good deliverability to the remaining engaged recipients.

1. Unlike the hamburger menu, which everyone agrees on, this menu goes by several names. Apple prefers to call it the “more options” menu, while on Android it’s the “overflow” menu. Some sources call it the “meatball” menu, while others refer to it as the “dumpling” menu. Still, others go for the most literal description of the menu, referring to it as the “ellipsis” or “three-dot” menu.

Gmail Insights: Using Quick Action Buttons

Leave a reply

Last year, Google announced that they were rolling out a new feature for Gmail called “Quick Action Buttons.” It took a few months before the feature was actually made active, and a few months after that before it finally started appearing in Gmail, but if you do any online shopping, you may have seen these buttons appearing to the right after the subject line on emails. Quick Action buttons, as their name implies, let you take certain actions immediately, without having to open up the email first. These actions can be anything from tracking a package, to verifying a reservation, to submitting feedback. Quick Action Buttons are limited to transactional emails, and you will have to jump through a few hoops to get them to appear in your email.

Should I Stay or Should I Go?

Google divides these buttons into two basic types: “In-App Actions,” and “Go-To Actions.” The In-App Actions let you perform some task without leaving your Gmail. A confirmation of a subscription, for example, is one possible use. When you click on a button featuring an In-App Action, a small pop-up window appears to either verify that you clicked the button, or ask for additional information. Once you’ve done this, the pop-up window disappears and you are still in your Gmail inbox.

Right now, the most common use of the In-App Action button is to confirm subscriptions using double opt-ins. The appeal of this is obvious. Many email marketers avoid the double opt-in because it requires the potential subscriber to open, read and respond to an email before they are added to their subscriber list. The Confirm Quick Action button certainly speeds up the process. The code for a Confirm Action button may look something like this:

As you can probably deduce from the information above that the key to Google’s buttons is schema.org. Schema.org is a system for structured data markup that has been approved by the three major search engines (Google, Yahoo, and Bing). It is primarily intended as a way to identify information on a web page so that its meaning is less ambiguous, but Google has developed a way to use it to improve their Gmail capabilities.

One feature of the Confirmation Action button is that after it has been clicked, its appearance changes to reflect this.

Besides confirmations, the In-App Action button may also be used to perform coupon saving, playlist queuing, or other actions that don’t require a visit to an external page, or for review purposes, where a rating window pops up that will let you rate something. Google is also planning to add RSVP capabilities to the list, but as of this writing this has not been implemented.

Going Somewhere?

Go-To Actions, on the other hand, take you out of Gmail and send you to a separate web page. You will see these used for things such as tracking packages and reservation retrieval. Go-To buttons are easily identified by the small arrow on their right side. Go-To Actions fall into two types: View Actions and Track Actions. View Actions take the recipient to your site to complete a transaction, and Track Actions, as the name implies, are intended for tracking orders.

Quick Action Buttons are not a simple matter of plugging in data and suddenly they work. First you’ll need to get approval from Google, which isn’t surprising. After all, here’s an action that can immediately direct a recipient to another web site without even opening the email. To be approved, your emails must be authenticated via DKIM or SPF, and the DKIM or SPF signatures must match the domain of your “From” address exactly. Subdomains are not allowed.

As you might expect, the Go-To Action buttons have more restrictions than the In-App Actions. According to Google’s website, they are currently only approving Go-To Actions for “very specific high-value use case with high interaction rate,” which is just another way of saying if you’re not Amazon, or United Airlines, your odds of getting approved dwindle significantly.

Test and Test Again

Also, as with responsive design, you’re Quick Action button may require several test rounds before it’s ready to use. You can test schemas by sending email to yourself, but this won’t help you identify potential issues in your company email. In any case, testing is an absolute requirement. My own tests with the Quick buttons worked well in most cases, but when I tried to develop a complex example, it led to a situation where I found myself receiving the same email every hour on the hour over several days.

The full list of Quick Action requirements along with a link to the registration form can be found here.

Gmail Insights: What’s Behind Google’s Gmail Image Caching?

Leave a reply

Google certainly likes to tinker with Gmail. Last summer, they added tabs to the Gmail inbox, which some people predicted would lead to massive declines in opens and engagement and signal the eventual demise of email marketing, if not the entire western world. On this blog, we predicted that the fear of the Gmail tabs was overblown and that good, engaging subject lines and content would prevail. We’re happy to report that the statistics appear to bear this out. While some ESPs have reported slight drops in open rates, most, Goolara included, have seen little or no impact from the addition of tabs.

Then in December of 2013, Google threw another wrench into the works in the form of image caching. Now, any image in an email is served through Google’s own image proxy servers, and are transcoded before they are sent. So if your image URL in your email is this:

https://BusinessDoman.com/emailName/image.jpg

Gmail will replace it with a cached version of the image using a URL that looks something like this:

https://ci4.googleusercontent.com/proxy/v9mmAKvXPJRqZDvsFQYZvcnnM96a1DadPf3OB9Qmz5c-gNudNHYd8HGIxyTY34HrqZKiw3mLXVi608hMy1Vph5IR1_DNGybsE=s0-d-e1-ft#https://BusinessDoman.com/emailName/image.jpg

In other words, the images in that email are no longer coming from you—they are coming from Google. This isn’t anything new to email clients. Outlook.com and Yandex already cache images and have done so for a while. Given the response in the email marketing community to Google’s announcement, it is curious to see how little attention was paid when Outlook.com started caching images.

So how serious is this change? We’ve been testing emails with it over the past few weeks, and what we found did not make us happy. Here are our findings and conclusions.

Image Requests as a False Metric

At the same time that Google started caching images, they switched from a default of images turned off, to a default that displays images upon opening an email. As a result, the January stats for Gmail showed a marked uptick in the email client’s use. One source reported a 243% increase in Gmail opens. Of course, an email platform that opens images by default is going to return higher open rates than one that defaults to images turned off. The same source reported last summer that nearly two-thirds of all email was being opened on iPhones. It doesn’t take a mathematician to see there’s something wrong with that figure. Figures like this make email marketers happy, but it would be a mistake to put too much stock in them. Your Click Through Rate (CTR) is still a better metric for measuring actual engagement.

We were initially worried that Google’s new caching approach would create a situation where only the first open and the first link address would be recorded, but a test send revealed this not to be the case. If you send out three thousand emails, you’ll receive the correct number of opens. Where the metrics fall down is when it comes to the subsequent opens. These aren’t recorded, but reopens are notoriously misleading numbers when it comes to determining recipient engagement.

A bigger problem with Google’s caching approach is how it affects image replacement. In the past, if you sent an email with a problem image, you could replace that image on your server and any subsequent opens would see the new image. Now that Google is caching the images, this is no longer always true. Emails that were opened more than an hour after an image was replaced on the server fared okay, but emails that were opened within a few minutes after the image was replaced did not reflect the changes. Google does appear to replace modified images, but they do it in their own sweet time, which is bad news for marketers.

Where in World Are You?

One metric that is severely curtailed by Google’s image caching is the ability to geolocate a recipient based on the IP address. Any attempt to do so will return Google’s Mountain View headquarters. This is because it was Google, in fact, that requested the image. Our investigation shows that two separate and unrelated email addresses receive the same cached image and it is only on the first open that the image is requested from the sender’s server.

Information about the location of a user (based on their IP address), as well as information about the devices used to read the email (iPhone, tablet, desktop application, etc.) is rarely useful on an individual basis, but can be quite interesting in aggregate. Knowing that Sam Jones once used an iPhone to open an email while in Boston isn’t terribly useful, but knowing what percentage of users are opening with mobile devices is quite useful, and knowing where the bulk of your users are located around the world can help you determine how regional your content offers should be. Unfortunately, Google has now removed this information. It is still available for clickthroughs, as Google and others have not yet re-written these to go to Google’s proxy servers, but that’s not to say it won’t happen in the future.

Once is Enough

An aspect of Google’s new caching technique that has some email marketers up in arms is the fact that it completely eliminates any data on reopens. Once the image is on Google’s server, if an email is opened a second time, this fact is known only to Google. In truth, the value of the second open is questionable. Deleting adjacent emails and any accidental clicking of the email are treated as additional opens, but have little value in terms of engagement. The clickthrough rate is a more important number and fortunately for marketers everywhere, Google hasn’t found a way to take that away from the ESP metrics.

One interesting side effect we’ve noticed is that email senders with slow servers are getting a boost in content delivery thanks to Google’s Content Delivery Network (CDN). Retail senders such as Anne Taylor and Fab are showing noticeably faster image load times in Gmail than in our other email clients. On the other hand, companies that use third-party CDNs, such as Akami, CacheFly, and Amazon Web Services no longer have the speed advantage here when it comes to displaying images in Gmail. As to whether this is enough of an issue to affect the bottom lines at these CDNs, that remains to be seen, but it is doubtful. There are still plenty of other people out there using email viewing platforms other than Gmail.

All Your Data Are Belong to Us

So why is Google doing this? Google’s official explanation of the reason for this change is that “some senders try to use externally linked images in harmful ways.” They don’t explain exactly what they mean by this. They simply say it and assume we will nod in agreement. “Senders can’t use image loading to get information like your IP address or location,” which is true enough, but exactly why this is bad thing is not explained. They go on to say that this new approach will help avoid unwanted cookies, malware, and viruses.

“We’re just doing it to help you,” Google seems to be saying. “We have no other motive.” But let’s look at what Google had to do to get this up and running. With over 450 million active users, this isn’t a minor undertaking. First they had to set up proxy servers—many terabytes worth—to cache all these images. Then they had to devote time to coding the procedures that rewrite the URLs to send image requests to their servers, which normally means hours of testing, debugging, and retesting. That’s a lot of work. Clearly there has to be a benefit for Google.

It’s true that improving customer service is always good policy, but an important fact omitted from Google’s rationale is that data such as the IP addresses and the geolocations don’t magically disappear when Google caches the image. The sender may no longer get this data, but Google certainly does. What Google plans to do with this information remains to be seen. Google has already shown a tendency to take the long view on things, so we may not find out the reasons right away, but it would be naive to think that Google doesn’t plan to use this data.

Addendum: Perhaps in response to the complaints from ESPs about their new caching policy, Google quietly updated their Gmail system, allowing you to override the caching by including no-cache information in the image header:

Cache-Control: no-cache max-age=0

Some ESPs have already implemented this, and some have not. While this does help the ESPs track the number of opens a mailing will have, it doesn’t address the main downsides to Google’s new policy. The image request still comes from Google, not the recipient, so any information about recipient’s location or the device upon which the email was opened remains unknown to the sender. As far as anyone can tell, Google requested the image and it was sent to their servers in Mountain View. Whether Google will allow this information to be passed on to the ESPs at some future date remains to be seen. For now, that information belongs to Google and they’re not sharing it.

The Complete Preheaders and Snippets Tutorial

Leave a reply

Every email client shows you the sender (usually the “Friendly From”) and the subject line. Some go a step further and display additional text below the subject line. Desktop programs such as Outlook and Thunderbird, browser clients such as Gmail and Yahoo, and devices such as the iPhone and some Android phones, all display this “snippet” of text. The snippet is a potential opportunity to increase the likelihood that your email will be opened, but it is often overlooked. We have already discussed the importance of a good “From” address in Best Practices Enhanced Vol. 1, and good Subject Lines on this blog, but the snippet, while not used everywhere, is used in enough email clients and on enough devices to warrant consideration when you are putting together your mailings.

Here is an example of how snippets display on an iPhone 5:

You can see that the snippets for PBS and Wall Street Journal are not very inspired, while the snippet for Travelocity, at least, includes the most important bit of information from the email (“EXTRA 12% off today”). iPhone users can turn off the snippets or change the number of lines that are displayed, but four is the iPhone’s default setting, and people rarely bother to change default settings.

Here is another example taken from the desktop version of Gmail:

In this case, ThinkGeek, an online store that specializes in science fiction-themed knickknacks, has made sure that the next line of text after the subject line has some useful information, while the other vendors shown are counting on their subject line to do all the work. The worst offender here is Touch of Modern—which is slightly ironic considering that this particular website says in its description that it is dedicated to “extraordinary design.” The subject line (“Something incredibly artful”) is so nondescript it almost seems like a placeholder, and the snippet that follows it only makes matters worse by begging to be added to your contact list. Fab’s first email subject line is long enough to push most of the snippet text out of the line. That works fine in Gmail on the desktop, but the iPhone only displays the first 35 – 40 characters in the subject line and devotes the next lines to snippet text. On the iPhone, most of the visible information, then, would be devoted to the click-to-view message, followed by the first alt tags on the images at the top of the page.

It’s a shame to waste this valuable real estate on things like “Click here to view as Web page,” “Unsubscribe,” and random alt tags when you could be using it to further promote your message. There are some easy ways to do this, and they don’t require major redesigns to your email. In this article we’ll look at some of these ways, including some advanced techniques that will help ensure your email gets noticed.

First Element Solution

The simplest, and most popular solution to the problem is to make sure that the first text in the email is meaningful information. Here’s a typical example:

Old Navy has started their email with the line “Give something special and treat yourself too.” In email browsers that display snippets, the Subject line (“Amazing Gifts for Them…And You!”) is immediately followed by this line. By putting this sentence before the usual “View in Browser” and “Unsubscribe” links, Old Navy ensures that the snippet expands on their sales message. It is probably no coincidence that it rhymes as well.

Here’s a slightly more sophisticated approach from gdgt.com:

In this case, they’ve organized everything so that the first bit of text on the page is their image’s alt tag (“gdgt”), followed by two text-based links (“Reviews” and “Best Gadgets”). The alt tag and the two links all assemble into a meaningful phrase (“gdgt Reviews Best gadgets”) followed by the two lines of text on the left:

Cleverly, they’ve used “text-transform: uppercase” to make the links text appear in uppercase in the email, but still appear upper and lower case in the snippet. Unfortunately, they did all this at the expense of the “View in browser” link, which appears nowhere in this particular email. Knowing that alt tag text is also incorporated into snippets, some marketers takes this technique one step further by making sure that the image is the first element on the page, and that the image’s alt text contains the preheader message. With the technique, the alt text is also the first text on the page if image display is turned off.

The downside to using preheader text as a first element is that it runs the risk of drawing attention away from the primary message. This is especially true if, as with the Old Navy example shown above, the preheader text is also a link. For this reason, email marketers often assign a mid-tone color to the text and use “text-display: none” in its style information if the text also contains a link.

Preheader Div Solution

An alternative to the first element approach is to use a non-displaying div preheader that contains the information you want to appear in the snippet. This method affords greater flexibility because the text that appears in a div preheader does not have to appear anywhere else in the message. With this method you can either expand on the meaning of the subject line, give people the most important piece of information from the email, or paraphrase the text on the page as needed. Here is an example from Direct Marketing News (DMN):

Ignoring, for the moment, the fact that DMN has mixed up their own initials in the From name, the div tag gets the piece of information that will appeal to the most people across immediately (“Register now for a chance to win an AMEX giftcard!”). A look at the actual email shows that this information does not appear in the top part of the message:

By using a preheader div, DMN was able to keep the top of the message on topic while allowing the snippet to act as an enticement to encourage registration. Had DMN not used the preheader div on this email, the text below the subject line would read: “View web version Leads, Channels, and the Ongoing Pursuit of ROI,” which may have worked with some segments of the market, but nothing beats a free gift (as long as it’s genuine).

But preheader divs come with one drawback. As we discussed in the series on Responsive Email Design, not all email clients handle invisible divs well. Some will go ahead and place the text on the page. For this reason, preheader div tags are usually configured something like this:

The color attribute shown in the example is based on an email with a white background. Some marketers prefer to omit this color information since text on a background of the same color is seen by some spam filters as a negative quality and can effect the email’s deliverability. Some marketers set the font size to zero, but that comes with the same caveat as color on color.

Which is better?

So is it better to use a div or a preheader that appears as the first text on the page? Most email marketers use the first text approach. It is simpler to implement and is in less danger of being flagged as spam. It also eliminates the problem of compatibility. A preheader that appears as text on a page will work anywhere, whereas non-displaying divs might not.

On the other hand, if your email design is not conducive to the first text approach, and there is some message further down in the content that makes a better teaser line than the first text on the page, then the div approach is the better choice.

Preheader Best Practices

Whichever method you use, it is a good idea to make sure that the snippet is not misleading. If the snippet reads “Learn how to receive your personalized coffee mug,” there better be a way to do so in the email or you are only going to alienate your audience and come across as dishonest.

You also need to be careful about the wording in your preheader. A preheader sentence such as “All clothing is now 50% off for all platinum club members,” could shorten to “All clothing is now 50% off…,” which might make non-platinum club members angry when they finally see the full sentence. Rewording the sentence (e.g., “Platinum club members now get 50% off on all clothing”) so that the modifying information comes first will help avoid this problem. Also be careful with statements where the second half of the sentence contradicts the first half (e.g., “The Ford Fiesta is a great car, if you like visiting the repair shop”). Unless you are intentionally intending for the message to be cut off for a humorous effect, it’s a good idea to reword the line so that this won’t happen.

Another thing to watch out for is the Title tag, which the iPhone will include as the first text in the snippet, but other email clients, such as Gmail and Yahoo, will not. There may be times when you can take advantage of this idiosyncrasy, but in most cases you’ll want to remove the title tags from your email’s HTML to ensure that your preheader appears the same across all platforms.

Whether you choose to use a first text preheader, or the div version is up to you, but you should be doing one or the other. The various email clients give you a certain amount of text to get your message across, and if you’re not taking advantage of it, you are missing out on a simple and easy method to add to the potential selling power of your email.

Responsive Design in Email, Part 1: An Overview

2 Replies

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.

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.

Gmail Insights: Gmail Reinvents Itself

7 Replies

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.

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.

Using Text to Deliver Your Message

Leave a reply

Email design has its own rules and requirements. In this article we look at ways to improve the effectiveness of your email messaging with the smart use of text.

An important aspect of email is, of course, design. Graphic artists spend a lot of time adjusting images and page layouts to make their work look as perfect as possible. To the lay person, who is not accustomed to the ways of a designer, their endless fussing over which of three nearly identical colors they should use might seem like overkill, but graphic artists understand that good design is important to sales. A company’s website, brochures, business cards and everything else need to reflect their brand and they need to look good.

When the Internet came along, it threw a bit of a curve ball to many graphic artists. They had to learn new skills to get around the limitations of HTML. These are the same skills they need to make good looking email, but the number one mistake made by many graphic artists is to treat email design the same as web design. Email brings with it a host of unique design issues that are completely different from web design. The biggest difference comes in the way email handles images and text, and this is where many designers fall down.

A common technique for controlling the appearance of text on a website is to place the text in a graphic. In this way, the choice of fonts, placement, and other characteristics can be maintained even if the viewer does not have those fonts installed. But using this technique on email is not a good idea, for two reasons.

No Image = No Text

The default setting for most email clients is to block images. Among smart phones, only the iPhone displays images as a default. Of course, some people turn on the images, but most people tend to leave things with the default settings; it’s human nature.

Good Alt Tags will go a long ways toward helping people understand what they are missing, but even here, not all email browsers display the alt tags, and Microsoft Outlook 2007 goes one step further, adding its own security messages to the empty image boxes. Put another way, if you are using graphics-based messages, over half of your recipients are receiving it in the blandest form possible, and some aren’t seeing it at all.

If you really want to make sure that your message is reaching your public, you’ll need to offer some text to the recipients beyond what might or might not appear in your alt tags.

Text-to-Image Ratio

ISPs cannot read the text in images. Spammers know this and sometimes use images to get around filters that might shuttle their content automatically to the bulk folder. As a consequence, many ISPs now look at the text-to-image ratio to identify possible spam. When a marketer puts all the focus on images, the deliverability metrics suffer (as do open and clickthrough rates). Remember that the ISPs are ultimately the ones in control in this process, and a beautifully crafted image with the best marketing message in the world means nothing if the user never sees it.

A Tale of Two Emails

For purposes of this article, I am going restrict my conversation to two emails I recently received. One is from Macy’s and the other is from J. Crew. One is done with a good understanding of email and how it works; the other is designed using the traditional text as image approach and is less effective. I’ve used a few different email browsers here to show how different browsers treat missing images. First, here’s the Macy’s ad with images (only the top is shown here—there are more images below):

Now, here’s the same ad with the images turned off (in Gmail):

As you can see, almost no information is lost. The ad still gets the point across and aside from the Macy’s logo and some other small formatted items, all the information you need is visible and visually interesting.

Now let’s look at J. Crew. Here is the ad with the images displayed:

It looks fine, but here’s how it looked when it arrived in my inbox (in Live Mail):

Not so interesting anymore. What does this tell me besides the fact that it came from J. Crew? Even a few reasonably commented alt tags would have helped here, but all we get is “JCrew.com.” What makes this email so frustrating is that the problem could have easily been avoided with some care and forethought. Let’s look at the hero image. Here’s the original:

The first thing you’ll notice is that the text is separate from the image. This makes it a perfect choice for using actual text instead of a graphic. By dividing the image into sections and placing these sections in a table, we can achieve the following:

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

Now the message of the email is still rendered and readable to all recipients, regardless of their email browser settings. Graphic designers probably won’t find this solution particularly satisfying, but the visual dynamics created here by the text make it far more likely that recipients will respond to the email.

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

The Goolara Blog

Email marketing topics in depth.

Tag Archives: Gmail

Hey Google, Why’d You Do That?

What Happened Was…

The Effect on ESPs

Google’s Attitude

Gmail Insights: Using Quick Action Buttons

Should I Stay or Should I Go?

Going Somewhere?

Test and Test Again

Gmail Insights: What’s Behind Google’s Gmail Image Caching?

Image Requests as a False Metric

Where in World Are You?

Once is Enough

All Your Data Are Belong to Us

The Complete Preheaders and Snippets Tutorial

First Element Solution

Preheader Div Solution

Which is better?

Preheader Best Practices

Responsive Design in Email, Part 1: An Overview

Talk is Cheap

Media Queries

Design and Design Again

What’s in Your Head

The Scalable Alternative

The Automated Approach