According to Google, currently less than 0.05% of valid emails end up in Gmail users spam folders. (I might try and argue this statistic, but I’m only 1 of Gmail’s 900 million users, so I’ll leave that for another day.) Google’s goal is to make Gmail a spam free email client for its users. Currently, Google relies on its users to know when they’ve made a mistake and delivered a legitimate email into the spam folder, via the “Not spam” button or allowed a piece of spam to make it past the filters and end up in a user’s inbox – using the “Report spam” button. Google has now implemented a new machine learning process to detect spam trying to portray itself as legitimate email. While Google has always used machine learning, it now uses this more sophisticated neural networking approach to analyze incoming messages. Google stated that they will use the “same intelligence developed for Google Search and Google Now” to make their spam filtering smarter.
Google is trying to make it easier for companies to avoid having their email messages marked as spam or junk with its new Postmaster Tools for Gmail. The program allows ‘Qualified’ high-volume senders to have a look under the hood of how Gmail processes and filters inbound email messages and provides insight into delivery errors and feedback loops. The new filters will also be customized for each individual user to better understand how an individual Gmail user manages their inbox and the types of emails received.
What is a ‘Qualified’ Sender?
If you’re a spammer, you’re out of luck. Google’s Postmaster Tools will only be available to qualified senders who meet its reputation requirement. Once you are ‘Qualified’, you’ll be given access to a number of dashboards. This will show you how often users report the sender’s emails as spam, additional insight into the sender domain reputation and additional info on how Gmail treats their messages. This will definitely be a double edged sword. If you send emails that generate complaints, you will be downgraded and likely have the majority of email send directly to the spam folder without passing GO or collecting $200. On the other hand, if you send emails that generate very few complaints, you’ll have the ability to send your email messages into that coveted inbox the majority of the time without a problem.
At Email Answers we manage and deploy quite a few email marketing campaigns for our customers on a daily basis. Some of our customers rely on us to design their email ads/creatives and come up with enticing subject lines, while other customers choose to take on the task themselves and depend on us to deploy their campaigns and deliver their messages to the user’s inbox. While some customers understand the importance of a good email marketing subject line, others simply don’t get it or have a clue. It’s more difficult than you would think trying to explain to a customer that using 25 words is not better than using 5 or 6. Using keywords such as; 50% off, SALE, Discounts, Act Now or using ALL CAPS simply won’t cut it. Explaining to a customer that “Not Selling” in a subject line and simply tweaking a user’s interest is the correct way to get a user to open your email and see what it is you’re offering.
Decisions about an email are made in just seconds. Think about how long it takes to decide to open and read an email or just delete it.
The best email subject lines are intriguing, interesting and tempting. They scream “I’ve got an important message for you” and all you have to do is open me to find out what it is. Don’t hide the subject of your subject. (You like that huh?) Keep your subject simple, concise, to the point and direct.
Using a terrible subject line is worse than not sending an email campaign at all. A poorly crafted subject line will only act to get your email deleted faster than it was received. Your objective is not to sell in the subject line, but to peak someone’s interest in your email and get them to open it, which will take them to your website and hopefully lead to a sale.
As with most things in life and email marketing, using common sense and sticking to the rules of rational behavior will take you pretty far. Be smart about your marketing initiative and follow the rules. Remember, everything you do has consequences.
Designing an HTML email creative that displays consistently in all email clients and web browsers is much more difficult than you can imagine. Think about buying one pair of shoes that your entire family would have to share. It wouldn’t work out too well, would it? The problem is that all ISP’s, such as AOL, Hotmail, Yahoo, Gmail and others all manage, interpret and display the HTML code they receive differently. While Microsoft Outlook and Gmail are the most annoying, all of them have inconsistencies and differences in the way they display certain HTML code. This makes it difficult to find a happy medium and ensure that your email marketing creative design looks and displays the same, no matter which ISP you are sending it to.
Below is a boilerplate that should assist you in coding your email creative to be the most consistent across all email clients, web browsers and mobile devices. Think of it as a foundation for good emails. This is not a template, and it doesn’t come with place holders so you can add in your content. Instead, the boilerplate includes basic HTML and CSS suggestions, along with tips and some experienced advice, to help you kick start your email creative design coding efforts. This boilerplate is merely a guideline for writing HTML code that will render correctly across each of the most popular email clients.
Are you ready? Let’s get started.
This is a great DOCTYPE to test with because it is used by Gmail and Outlook.com. It is very important to test with and without a DOCTYPE because many clients strip it entirely – this affects paragraph margins & padding, centering, and box model padding.
Please use these suggestions as a general rule, avoid using comments in your final email campaign or you may get blocked by SPAM filters. Also, including a single quote in your CSS comments will cause your email to appear blank in Entourage 08.
Some of the embedded CSS used in this boilerplate can be adjusted based on your design but others need to be overwritten inline.
You will find those instructions below.
The CSS style block has been placed just above the closing body tag for Yahoo in IE7 & 8. This fix actually requires a DOCTYPE.
This content type tells a web browser how to interpret your special characters. However, every email client will ignore this meta tag. Instead the content-type will be set in the header of your email. The header is created based on the server configuration which is controlled by your email service provider.
Solution: To avoid jumbled characters in your email, always use HTML entities.
When testing, it’s a good idea to try both:
This will help you catch jumbled characters so that you don’t forget to convert them to HTML entities.
Email Client Bug Fixes – Its Best Not to Change These
Forces Outlook.com to display emails at full width.
Forces Outlook.com to display normal line spacing, here is more on that:
Prevents Webkit and Windows Mobile platforms from changing default font sizes.
Resets all body margins and padding to 0 for good measure.
This resolves the Outlook 07, 10, and Gmail td padding issue.
Resetting Defaults – It is Best to Overwrite these Styles Inline
This sets a clean slate for all clients EXCEPT Gmail. From there it forces you to do all of your spacing inline during the development process. Be sure to stick to margins because paragraph padding is not supported by Outlook 2007/2010.
Remember: Outlook.com does not support “margin” nor the “margin-top” properties. Stick to “margin-bottom”, “margin-left”, “margin-right” in order to control spacing. It also doesn’t hurt to set the inline top-margin to “0” for consistency in Gmail for every instance of a paragraph tag (see our paragraph example within the body of this boilerplate)
Another option: Use double BRs instead of paragraphs.
This CSS will overwrite Outlook.com’s default CSS and make your headings appear consistent with Gmail. From there, you can overwrite your styles inline if needed.
This is the embedded CSS link color for Gmail. This will overwrite Outlook.com and Yahoo Beta’s embedded link colors and make it consistent with Gmail. You must overwrite this color inline.
The “body” is defined here for Yahoo Beta because it does not support your body tag. Instead, it will create a wrapper div around your email and that div will inherit your embedded body styles.
The “#body_style” is defined for AOL because it does not support your embedded body definition nor your body tag, we will use this class in our wrapper div.
The “min-height” attribute is used for AOL so that your background does not get cut off if your email is short.We are using universal styles for Outlook 2007, including them in the wrapper will not affect nested tables.
When Yahoo! Beta came out, we thought we could put those days behind us but we might have celebrated a little too soon.
Might get converted to:
Might slip under the radar.
So what’s the fix?
Add this to your embedded CSS:
Another fix is to add a span tag inside each anchor with an inline style:
But this will not resolve the hover issue.
Some other options.
There is no way to set these inline so you have the option of adding pseudo class definitions here. They won’t work for Gmail nor older versions of Lotus Notes but it’s a nice addition for all other clients.
Optimizing for Mobile Devices:
@media only screen and (max-device-width: 480px)
Here you can include rules for the Android and iPhone native email clients.
Device viewport dimensions are as follows:
IPhone: 320px X 480px – portrait, 480px X 320px – landscape
Android: 350px X 480px – portrait, 480 X 350 – landscape
(These are average dimensions, the Android OS runs on several different devices)
You must use attribute selectors in your media queries to prevent Yahoo from rendering these styles. We added a yahoo attribute in the body tag to complete this fix.
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
Here you can include rules for the iPad native email client.
Device view-port dimensions in pixels:
703 x 1024 – portrait
1024 x 703 – landscape
Embedded CSS Notes:
1.) Be aware that Gmail will not read any of your embedded CSS
2.) Although we have seen the important priority used in other examples, it is not necessary. If you use “important” you can no longer overwrite your styles inline which is required for Gmail.
3.) The Android does not support “class” declarations outside of the media query.
4.) You might want to consider duplicating your embedded CSS after the closing body tag for Yahoo! Mail in
IE7 & 8.
You may adjust each of the values above for your email as needed.
We’ve included the style attribute for Gmail because it does not support embedded CSS and it will convert this body tag to a div. Since it gets converted to a div, the other body attributes like bgcolor are ignored.
We included body attributes (alink, link, bgcolor and text) for Lotus Notes 6.5 and 7, as these clients do not offer much support for embedded nor inline CSS.
The “min-height” attribute is set for Gmail and AOL since they will be converting this body tag to a div and we want our background color to reach the bottom of the page.
The “yahoo” attribute is added if you are using media queries for mobile devices. For an explanation, check out the media queries example in the style block below.
This div is working as a wrapper and the body_style is picking up our CSS properties for AOL. The padding has been included for Gmail, you can adjust this to your liking.
If your email exceeds 23 inches in height, you might end up with unwanted horizontal spacing halfway down your email in Outlook 2007 and 2010.
The fix: Just change this wrapper from a div to a span and add style=”display:block” – don’t forget to change the closing tags well. From there, stack your tables within your email so that no table exceeds 23 inches.
Tables are the most common way to format your email consistently. Set your table widths inside cells and in most cases reset cellpadding, cellspacing, and border to zero. Use nested tables as a way to space effectively in your message.
The bgcolor and width attributes are for the Android Gmail application. Gmail converts your body to a div, even on mobile apps. Since there is no width set in your body, the Android sets the width of your converted body tag to that of the device viewport.
To make a long story short, your background color will get cut off as the viewer scrolls horizontally unless you add it to each of your tables as well.
In this example, we are using the align=”center” attribute to center the final email, if you want it left aligned, just remove that. Using align attribute will ensure consistent results in all clients even after your DOCTYPE is stripped.
As stated above, paragraph tags are optional. Do not allow yourself to change the margin-top because it is not supported in Outlook.com. Paragraph padding is hit or miss in Outlook 2007/2010/2013. You will have to stick to margin-left, margin-right, and margin-bottom and avoid the generic “margin” property.
Here we’ve used inline CSS to overwrite Gmail’s default link color.
If you have a client who asks you to include an attachment like a pdf, always recommend linking to an external file. Attachments will often cause an email to be blocked by SPAM filters.
Gmail, Yahoo and Outlook.com add in an extra space below images when using non IE browsers. This is especially noticeable when stacking images on top of each other.
A common fix is to add style=”display: block”.
It’s best to use the “align” attribute vs. a CSS float if you are placing them inline with text – this is for Lotus Notes 6.5 and 7. Image widths and heights need to be explicitly set and actual dimensions must be correct for Outlook 2007 and 2010.
The alt and title tags are equally important because a majority of email clients block images by default and instead display either the title or alt text in the images’ space. Use border=”0″ to avoid unwanted outlines around your images in various clients – especially when wrapping a link around
Last but not least, you must always use absolute references to images in HTML emails:
Ordered and Unordered Lists:
Outlook 2007/2010 converts your list items into paragraphs and spans (particularly if you use inline styles) so although using tables is rather frustrating, it might save you time and hassle when testing lists.
The “background” attribute within the TABLE, TH, or TD tag is the safest way to use background images. This is supported by all clients except Outlook 07, 2010, Lotus Notes 6.5, and 7. For those, we added a “bgcolor” because Notes 6.5 and 7 have limited support for inline CSS. If you want to display a background image in the body of your email, create a wrapper table, width 100%. Again, this is because Gmail does not support embedded css and if it finds a background image in your inline CSS, it will ignore the entire style declaration.
HTML5 video is now possible in email. Since I know everyone has been waiting for this, I’ll give you some basic information on what to consider before loading up a list of 500,000 customers (You Wish), embedding a video and letting it rip. This probably wouldn’t end up being a success.
If you want to take the easy way out, another simpler option would be to use an image with play button in the center and link it to the actual video. This is the usual method for including video for the past 10 years.
Before we get into the technical coding, I think it’s important to understand that support for HTML5 video is still limited, but the clients that do support it, represent over a 60% market share. Email applications, like the native iOS client, Apple Mail and Outlook.com will allow recipients to play a video within the email client itself. Other clients like Gmail and the Android devices will display a fallback image.
The following list of clients will allow you to play an embedded video in an email:
I will follow up with a technical article explaining the difficulties and details embedding and coding video into email next month.
Remember, the most important aspect to ensure your email creative is consistent and looks the same in all email clients and browsers is to test. Don’t be lazy. Test, test and then when your 100% sure everything works, test it again before you pull the trigger and send a non-working video or email marketing creative that will explode upon delivery to 500,000 of your best customers.