Home Resources Blog

Blog Post

The Varying Landscape of Gmail: Versions Galore

The Gmail landscape is changing. But that’s hardly news because we’ve been using a beta version for years now. What is news is that there are four different versions of Gmail to consider when designing/developing an HTML email. If the four versions varied in simply GUI design or experience design there would be little to tell. However, as we discovered each version has its own way of handling HTML and CSS. First we’ll share the skinny on the different versions so you get a sense of what web designers are facing. Then we’ll show you some details about what’s happening under the hood.) Note: no version of Gmail supports proper standards-based markup, so these reports are based on using compromised markup with inline styles and tables. The Versions Defined There are two core ways to use Gmail: As a gmail.com account. This entails signing up for a Gmail address (you@gmail.com) and then accessing the account at gmail.com with their webmail interface. (Alternately POP or IMAP access can be setup in a desktop email-client, but the rendering of emails in such a scenario is solely dependent upon the desktop client’s performance and is thus irrelevant to this post.) As a Google App. This entails setting up Gmail as a hosted webmail application for one’s personal domain. In this scenario, Gmail is used as a webmail interface to one’s own library of addresses (you@yourdomain.com). Gmail.com Account Google offers two different versions of their interface for those using a gmail.com account: “older version,” which is set by default, and “newer version” (these are the actual names). There are a few minor differences in the experiences moving from one to the other, most notably the addition of a chat feature in the Newer Version. Overall they’re practically the same client, except for how they render HTML emails. Following are two screen shots of the same HTML email, one from each version: Newer version Older version Then, whether in “older version” or “newer version” one has the ability to switch to something called “basic HTML” view. Google defines this as follows: Standard view is what you’ll see when you sign in to Gmail from a fully-supported browser…In case you don’t have access to a fully-supported browser, we still want you to have access to Gmail—that’s why we’ve developed a basic HTML view of our service that is compatible with almost any browser. Their fully-supported browser list comprises Safari, Firefox, Mozilla, Netscape and IE on Mac, Linux and Windows, but they mention that you’ll need Firefox 2 or IE 7 to“take advantage of the newest Gmail features.” The features they list as being unavailable in “basic HTML” view are: Filter creation Spell checker Keyboard shortcuts Address auto-complete Custom from addresses But “basic HTML” view offers something more: a different rendering of your HTML email: Google Apps A screen shot of the test email from a Google App version of webmail pasted atop a screen shot of the same email in the “older version” of gmail.com is a pixel-for-pixel replica. At this time there is no way to toggle between “older version” and “newer version” in the Google App, though one can toggle between the standard version and “basic HTML view.” And the latter renders the same way as gmail.com in the same view. Is There a Line of Defense? The core differences (as far as we can tell) moving from one version to the next are how it renders padding, font sizes and bold formatting of headlines (h1–h6). Unfortunately, because of how the “newer version” renders messages there is little we can do to ensure consistent rendering across the various versions of Gmail. Following are some specific details about how each version handles the aforementioned styling. Padding In “newer version” both CSS- and table-padding are destroyed. Neither is supported, so padding is out. This is a fundamental problem in that any text inside of a box with a colored background will appear broken as it connects with the box’s sides. The “older version,” “basic HTML view” and Google App are all consistent with information we have reported in previous posts: padding is only rendered if it is used as an inline style. Font Sizes and Headline Formatting With font sizing, the “newer version” actually offers the closest accuracy. The “older version” and the Google App simply enlarge font sizes which, while has an unsightly result, isn’t nearly as bad as reducing font sizes regarding accessibility. The “basic HTML view” has the oddest rendering of all versions. Body text renders correctly but the headlines are stripped of bold formatting and are reduced to the size of surrounding body text. In Closure I believe the inconsistent rendering across the various versions of this one email client further supports a best practice of using standards-based markup. Doing so will ensure your emails look the same in any version of Gmail, in addition to supporting all the benefits of web standards. Using tables and inline styles will result in some headaches when it seems unlikely that one will achieve consistent rendering anyway. As we recently pointed out in the Email Standards Project blog, it might be time for a Gmail intervention. If supporting web standards is something you think the Gmail team should be aware of, show your support by commenting on the post in the ESP blog, adding your thoughts to this Google Groups thread and sending your feedback directly to the Gmail team. They’re listening, let’s make sure we’re heard. Update: Clarification about Padding As hcabbos pointed out in the first comment below, my reports about “inline padding” are somewhat ambiguous. To clarify, the newer version of Gmail does not support either CSS padding or inline padding via the cellpadding tag. So in the “newer version” padding is not possible at all. The following screen shots will help illustrate this: Newer version Older version

Blog Post

Ensuring Your Emails Look Great and Get Delivered

While a lot of my energy is focused the Email Standards Project and looking to the future of email design, it’s obviously still important to know the best way to approach it for the here and now. If you’re looking for something close to consistency, this means using tables for layout and inline CSS. I’ve just put together an article for Vitamin called “Ensuring your HTML emails look great and get delivered” that looks back at my original recommendations last year, why they don’t make the cut any more and what you need to focus on today. This includes a list of CSS properties that are considered safe across the board, and the best way to use tables for consistent results. On top of my design recommendations, I also dig into advice on getting your emails delivered. This covers a range of topics like how to get permission, reduce spam complaints and monitor your sending reputation. If you’re already a Campaign Monitor customer, you can rest assured that all of the technical recommendations are already covered for you by default. Having said that, the technical side is only a part of your email reputation — the crucial ingredients of permission and relevance are up to you. Check out the article.

Blog Post

Optimizing Your Subscription Process in 7 Steps

Now that our support for HTML confirmation emails is live, I thought it might be a nice time to revisit some recommendations on the best approach to capturing subscribers via a form on your web site. Here are a few guidelines you should consider to ensure a good experience for your new subscribers and make sure they’re primed to receive your first campaign. 1. Make it easy to subscribe Nobody likes filling in forms. While we make it easy to capture all sorts of information about your subscribers, try not to get carried away. Ask for the bare essentials only. If you do need to capture lots of information, check out these tips on good form design. 2. Ask everywhere Don’t rely on a single page on your site to lure subscribers, such as a Newsletter or Contact page. Try and place a subscribe form on every main page of your site. Again, keep it simple and only ask for the bare essentials. Here are some tips on integrating your list with any current form on your site. Don’t forget to also capture permission offline any chance you get, such as events and at the counter. 3. Set expectations It’s extremely important that you align your customers’ expectations with exactly what you plan on sending them. Make sure your subscribe form clearly explains the type of content they’ll be getting and how often they’ll be getting it. Try and do this on the form itself, and then back it up in the confirmation email. 4. Get added to their safe senders/contacts list When sending a confirmation email we let you specify the from email address you’d like to use. Make sure this address is an exact match to the from address you’ll be using when sending your campaigns. This way you can request to be added to their safe sender or contact list in the confirmation email. Once you’re in that list, you’ll often go through less filtering and your images will be displayed by default. 5. Say thanks and give some gold Don’t forget to say thanks to your subscriber. They’ve just taken a leap of faith handing over some personal details to you, show them you appreciate it. You might also consider linking to key content on your site they might be interested in, such as a past issue or some popular articles that might be related to the reason they subscribed in the first place. 6. Track where they subscribe from Follow this little tip on tracking where your subscriber join from. This allows you to do some A/B testing on different pages to see which subscribe offer/design works best. 7. Don’t forget about forwards Be sure to include a forward to a friend and subscribe link in each campaign you send. If you’re sending useful content, some subscribers will pass it on, so try and make it easy for these recipients to join your list if they’re interested. Finally, don’t forget to keep the tone of your email personal, friendly and avoid lots of email jargon. Lots of these suggestions are easy to implement, but they can make a big difference in that all important first impression.

Blog Post

Step in the Right Direction for .Mac

For those of you closely monitoring support for standards-based markup in popular email clients, you’ll be happy to know that we have recently encountered a nice improvement for the .Mac webmail client. And while we’d love to take credit for having instilled fear in the hearts of Apple, we simply can’t compete with the Soprano family. Still, we’re hoping our countless articles and recent announcement about the Email Standards Project is helping to shape the future of HTML emails. In any case, at least one client is indeed shaping up. A while back we reported on the new .Mac webmail client. The old version offered amazing support for CSS. Unfortunately, the arrival of bells and whistles in the new version significantly depressed its support of standards-based markup. What’s more, we discovered a gratuitous DIV in the inbox window that eradicated all styles because of an interruption in the Descendant Selectors. The solution was to use Universal Selectors, which helped .Mac and had no inadvertent effects on other clients. On top of our post, I personally wrote Apple on more than one occasion, asking them to fix this problem. And I asked my partners to do the same. Irrespective of the impact of those emails and our post, they have since remedied this issue by withdrawing the gratuitous DIV. Consequently, our “.Mac fix” is no longer necessary. That’s the good news. The bad news is that .Mac’s support for CSS is still extremely poor. Let’s hope Apple finds it worthwhile to remedy that. We’ll be outlining exactly what changes they’ll need to make in the upcoming ESP site, launching in the next couple of weeks.

Blog Post

Do Image Maps Work in HTML Email?

We’ve revisited these results in a newer blog post on image maps in email clients. Given current conditions in which images are very often blocked in email messages, image maps seem to be an odd technique to pursue. Because when your source image is blocked, your links are no longer functional. That’s a fundamental accessibility issue. However, the Campaign Monitor team receives frequent inquires about image maps so we decided to test them out for people who are curious. Then you, the web designer, can decide how brave you are when you unleash them into the wild. The Results Remarkably, email clients offered good support for image maps. And most surprising is that many clients retain functionality of the links even with images off. Following is a table which exhibits how popular email clients handled the image maps. Client Functions With Images On Functions With Images Off .Mac Yes Yes Yahoo! Mail Yes No Yahoo! Mail Classic Yes No AOL Webmail Yes Yes Gmail No No Windows Live Hotmail Yes No Apple Mail Yes Yes Thunderbird Yes Yes Penelope (Eudora 8) Yes Yes Outlook 2007 Yes Yes Outlook 2003 Yes Yes Outlook Express Yes Yes Windows Live Mail Yes Yes Lotus Notes 8 Yes Yes Entourage Yes No The Recommendation The results indicate that it’s not a good idea to use image maps. Specifically because of the following issues: The frequency in which images are disabled image maps and their respective images don’t marry well and therefore pose accessibility issues for those visually impaired Gmail—a very popular email client—doesn’t support them consistently (they do not work when using Safari) And with that you have the knowledge you need to discourage use of image maps.

Blog Post

Payment Gateway Back Online

Just under 8 hours ago (at around 1am Sydney time) our payment gateway decided to go offline without notice. Because we don’t charge you until you actually send your campaigns, this meant that no campaigns, either scheduled or being sent immediately could be delivered. After working with them for the last few hours, we’ve just received word from the gateway that the issue has been resolved, and can confirm that your campaigns can now be delivered. We realize this situation is completely unacceptable. Please rest assured that we are now accelerating our plans to move to a new payment gateway (it was happening later this month, but will now happen a lot sooner). We are also looking at extending our monitoring system to ensure we’re alerted about a payment processing error and are also looking into adding a layer of redundancy to our payment processing to ensure you’re never bothered by something like this again. Of course, I realize this explanation does nothing to curb the frustrations you and some of your clients must be feeling right now. If you feel you were significantly impacted by this issue, please get in touch with support and we’ll credit you for the cost of the campaign you were delayed in sending.

Blog Post

Do Forms Work in HTML Emails?

Over the years we’ve received loads of inquiries about the use of forms in emails, such as newsletter subscribe forms, event registration and surveys. So we decided to run some tests to get to the bottom of just how well forms are supported in all the major email environments. Is it okay to use forms in emails? It’s not the best idea. But what do you say when your client asks you to put one in an email? You can either tell them “no” for reasons which may not make sense to them, or you can back up your defiance with some hard evidence. The short of it is that email clients consider email forms to be a security risk. While some email clients simply warn you of potential danger, others outright disable the forms. So if your client wants to send out a form, they should know that most of their recipients will never be able to use it. And for those who can, they’ll think twice about submitting data when they see a warning from their email client. Results Summary Common email clients share a propensity to distrust forms in email messages. But they differed greatly in how they handled the intruding forms. Following are some notable oddities. External data submission Upon submitting a form in many webmail clients, a JavaScript alert announces that the form is submitting data to an external page and asks if you want to continue: Scam alerts Thunderbird recognizes that the form may be malicious but doesn’t strip its functionality. Instead, it warns you of potential danger: Odd behavior Windows Live Hotmail shows the form. However, the form functions in an odd way; and certainly not correctly. If the form is submitted by keying the “return” key, the page is refreshed but no data is sent and the process is not completed. If the form is submitted by clicking the submit button, nothing happens. Outlook 2007 also exhibits some unique behavior in that it custom renders the form. Inputs are replaced with brackets and the submit button is replaced with the button’s value enveloped in brackets. So it’s a plain-text version of what the form would look like, even though the HTML is being displayed. Complete Results Client Form is displayed Form is functional .Mac Yes No Yahoo! Mail Yes Yes Yahoo! Mail Classic Yes No AOL Webmail Yes No Gmail Yes Yes Windows Live Hotmail Yes No Apple Mail Yes Yes Thunderbird Yes Yes Penelope (Eudora 8) Yes Yes Outlook 2007 No No Outlook 2003 Yes No Outlook Express Yes Yes Windows Live Mail Yes Yes Lotus Notes 8 Yes Yes Entourage Yes Yes The Recommendation Given the sporadic support for forms in emails, we recommend linking to a form on a website in an email rather than embedding it therein. This is the safest, most reliable solution to pairing an email message with a form. More people will see it and be able to use it, and as a result participation will increase.

Blog Post

Why Don’t I Get My Own Test Messages?

Why is it that sometimes you send a test message from Campaign Monitor to yourself or other team members in your company, and it doesn’t arrive? Well, most of the time the email does arrive, but is filtered into a junk folder, or just takes a few minutes. Sometimes though, it just never seems to get there. It can be incredibly frustrating, and worrying because you may think your own customers won’t get your emails either. Campaign Monitor is sending them out – where are they going? With love, from me to…me The problem occurs when you are sending an email from Campaign Monitor to yourself, but defining the ‘from’ address to be the same domain as the ‘to’ address. So from clarkk@dailyplanet.com to loisl@dailyplanet.com for example. Some mail servers have built in brains that try to stop spam by checking for emails that claim to have been sent from the same domain as they are being sent to. So the Daily Planet’s email server might say: This email for Lois says it is from Clark, but I did not send any emails for Clark, so this must be a dastardly fake. The email is stopped by the mail server, and never delivered or bounced back. Campaign Monitor can’t tell that is what happened, because no bounce message is sent. This problem will not affect your customers at all, because their email addresses are not at the same domain as your ‘from’ address. How to make sure test emails get through To prevent this problem, you just need to get your mail server administrator to specifically let emails from Campaign Monitor come through. Sometimes this is called ‘whitelisting’. They will need to know the IP addresses we send from, and you can find them in our help page. Then you will be able to receive your test emails and make sure everything is perfect before sending out your campaign, always a good idea.

Blog Post

Getting Better Results from Competition Lists

Campaign Monitor is used by people in all kinds of industries and for all kinds of reasons. Some businesses are more naturally suited to email contact, and some types of email contact are more welcomed than others. One type of list that seems to get a disproportionate amount of spam complaints is competition entry lists. These are the lists where you have entered your email address to win some kind of prize, and at the same time agreed to receive email in the future from the company running the competition. This is completely legitimate, assuming it is made very clear to people signing up that are giving that permission. However, even when it is clear we still see a lot more complaints from campaigns to these kinds of lists. It’s reasonably apparent why that should be the case: There can be a significant time lapse between entering the competition and the first email campaign. A big chunk of entrants only signed up for the competition and never wanted extra email anyway. It’s often easier to hit the spam button than the unsubscribe link. The emails often have no apparent connection the original competition. So it’s not hard to see why some subscribers would have forgotten that they signed up, or not understand why they are on the list at all. Fortunately, these issues are all quite simple to combat with small changes. On the competition entry page, make it obvious what people are signing up to receive. Don’t use vague ‘offers from selected partners’ language if you can avoid it. Send the first non-competition email soon after signup. The longer you wait the less likely people are to remember giving permission. Include a clear permission reminder in each email. It should state specifically that the subscriber signed up by entering the competition (link to the site if it is still available), and also let them get off the list easily. Make the competition list double opt-in, so people have a second chance to understand what they are doing, and take a positive action to give permission. If your clients want to run competitions and send to the entrants, you may need to work with them to avoid getting too many spam complaints on your account. These guidelines will help you, and help them only send to people who actually want to get their messages.

Blog Post

Performance Improvement Update

The changes we have put in place since the slowness and disconnections earlier in the week have made a big improvement. We are still progressing on our longer term changes though, to make sure we can maintain a reliable service as more customers come on board. We know that you need to be able to rely on Campaign Monitor to be there when you want to send your campaigns, and that’s our priority too. Thanks again for your patience, and your feedback.

Blog Post

More HTML Email Design Inspiration

There’s a ton of different ways to approach an HTML email design, and we’ve added a few more great examples recently. If you need some inspiration, check them out! See every new entry on the email design gallery’s RSS feed.

Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free