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
Become a better marketer with email marketing content from the Campaign Monitor email marketing team.
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 (firstname.lastname@example.org) 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 (email@example.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
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.
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.
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.
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.
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 firstname.lastname@example.org to email@example.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.
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.
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.
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.
Following on from our recent post on automatically generated inline CSS for email templates, another customer has come forward with a cool OSX widget to achieve the same goal. It’s called TamTam, and it’s very simple to use. You simply paste in your html with CSS rules in the head, hit “Inline” and TamTam updates all your inline classes, tags and ids. Thanks to Gary Levitt from MadMimi for a practical (and funky) designer tool.
Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.Subscribe
With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.Try it for free