First Things First – What are Preheaders?
A preheader is the short text snippet or summary text that directly follows the subject line when an email is previewed in an email client. Many desktop, web and mobile email clients provide them to give the recipient a little more information, before they open the email.
Below is an example from my Gmail spam folder. (FYI: Most spammers don’t use preheaders)
You’ll notice above, none of these emails have preheaders, although some have additional text showing after the subject line. Normally, this additional text shown after the subject line is the first text found in the email body of the email creative, only if preheaders are not used. When an email creative is primarily images or simply image based with no text, only the subject line will be shown. On mobile or smartphones in particular, the preheader can mean the difference between someone opening your email or trashing it. Adding text that explains a summary of your offering or a brief explanation of what the email is about is a good idea for the preheader. What’s the point of the text after your subject line showing “Not rendering correctly? View this email as a webpage here”? There is no point.
Most mobile users will scan their inbox to see what’s interesting and what emails should be trashed. You basically have about 3-4 seconds to entice a user to read your email. Adding a preheader will increase your chances of getting a recipient to open your email.
Using dynamic preheaders is also another option. This is where the text or preheader is custom tailored to the individual receiving the email. Don’t overload the preheader with too much information. Remember, you’re not selling in the subject line. All you are trying to do is entice a user to open your email and read what it is you’re trying to tell them or sell them.
You should test different scenarios using preheaders in your email marketing campaigns. Not everyone will use preheaders the same way. Strategically designing your preheader to entice opens and give your user a call to action, is the best plan of attack.
The Bottom Line
Preheaders are valuable real estate in a user’s inbox. Use this space wisely and it will have a huge impact on your opens rates and ROI.
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.
“It’s better to be lucky than good,” my grinning grandfather often said — usually after having just cut a piece of wood to precisely the right size, without measuring. What he didn’t say, of course, is that he knew exactly where that piece of wood was going to fit — and that over the decades, his workshop was littered with hundreds of pieces that were cut incorrectly.
Put another way: he was lucky, because he was good. Or, as they’ve been saying in sports since the time of Caesar, you make your own luck. If your team wants the opportunity for a hail-mary pass that wins the game in the last three seconds, they need to have enough “fundamentals” covered to get the score close — for that lucky pass to even matter.
You’ve got to work to get that ball down the field. Think of every step in your email marketing campaign as a journey toward the end zone, and the touchdown in the final seconds is your conversion to a sale — and realize, you’ve got to get within striking distance to have any luck with that “hail mary.”
You start deep in your own end zone. Don’t kid yourself, you’re not starting on the 50-yard line, but your own 20. This is where the fundamentals begin, before you even send a single email. You need to have a quality email list — valid, deliverable email addresses that don’t bounce back, with appropriately interested recipients at the other end. Even getting your message to the right inbox? Give yourself 20 yards.
Now it’s grind time. You need an effective email creative — and you’ve got three seconds to pique their interest. Three seconds — and they’ll either click through, or click “trash.” One of the fundamentals of the email marketing campaign game is to keep that creative just long enough to get them to click through. Don’t overload your reader with data, or potentially bore them with a long list of all the information you think they need to know for you to make a sale; spend too much verbiage trying to sell them on something besides that single mouse click you’re after, and their attention will go elsewhere. You’re not selling your product, you’re getting them to read long enough to click a single link. And if they’re reading, you’re more than halfway there — another 20 yards.
If you’ve been counting, you’re now on the other team’s 40-yard line. It’s time for that effective call to action — the line at the end of your email creative that gets the reader to move their mouse a few inches and click a button. Sounds easy enough, but it’s tricky — and like a world-class pass in the NFL, you need a quality receiver at the other end, or it’s all for nothing.
In the email marketing game, that receiver is your landing page, the place where that click you fought so hard for actually sends your reader. It’s got to be well-designed and carefully constructed to explain to the reader exactly what you’re trying to accomplish — like the great receiver, it’s going to take the ball and run, get people to fill out a lead form, call a phone number, or buy your product or service.
You’re now deep in the other team’s end zone. One more good play and you’ve got a touchdown. Welcome to the luck end of things.
There’s no guarantee the person you sent an email to is interested, at the moment they read it, in what you’ve got to offer. There’s no guarantee they’ve got the time to read your email creative, or your call to action — no guarantee they’ll click through to your landing page when they do, no guarantee that after they get there they’ll convert to a lead or customer.
There’s a bit of luck involved at this point, sure. But you can’t be lucky if you’re not good. If you’ve paid attention to the fundamentals of your email marketing campaigns — and laid the groundwork in advance — you’ve set yourself up to take advantage of that luck when it comes your way.