If you experience both pain and relief when reading the title of this post, you’re in the right place.
As marketers, there’s a story that we know all too well. It starts with a meticulously planned email campaign, a carefully selected group of recipients, and a beloved email template to deliver your content exactly as you intended.
You do seemingly everything in your power to make sure every aspect of the email checks out okay, but when you send it to your boss for approval, you immediately receive a fiery response.
Unbeknownst to you, Outlook has managed to change your entire email. The HTML masterpiece that you slaved over has now been whitewashed -- photos are missing, text-alignment is jumbled, and everything is 11-point Calibri.
What happened? How can you stop your other emails from following the same fate? Will anyone notice if you shed a few tears into an afternoon glass of wine at your desk?
This may be the part in the story when desperation kicks in, but don’t let it. Outlook doesn’t have to be the antagonist in our marketing stories. To help you better prepare your next email for Outlook, we've outlined a list of helpful tips below.
Protect Your Corkboard
Before we dive in, let's start with an analogy ...
Think of your email like a corkboard. Your corkboard has been beautifully crafted to hold all of your compelling photos (content), which are going to attract the eyes of many viewers.
How are you going to adhere those photos to your corkboard? Will you use nice stickers, embellishments, and decorative tacks (CSS & Styling) to keep all of the elements in place?
If you follow this plan, you will only realize that this corkboard won’t look the same on everyone’s wall. On Outlook’s wall, your content is stripped of its pins, tape, or sticky substances used to keep all of your pieces of content in place. You are instead left with a scattered pile of images, text with no styling, and a missed deadline. (For further clarification, Litmus has an extensive guide explaining these rendering differences.)
Alas, there is a solution to the madness. With the guidance of HubSpot’s Support Engineers, here is a list of tips and tricks to help prepare your emails for Outlook so you can “protect your corkboard.”
7 Tips & Tricks to Prepare Your Email for Outlook
1) Use tables.
For all of those familiar with code, you may have cringed as your eyes glazed over this paragraph. Hear me out: In the world of Outlook, tables are single-handedly the most important instrument in your toolbox. Using tables will ensure your email will render across email clients consistently from editor to inbox.
Outlook strips styles, such as positioning. Tables provide order and allow you to be more in control of your email’s layout. Are your pictures floating all over the place? Are they drifting above headers and below paragraphs of text? Putting your images and text in a table will tack those items in place and ensure they don’t float at their own will.
Email without table:
Email with table:
Make sure to specify the width of your table data (<td>), which shouldn’t collectively exceed the max-width of your overall email. An example of this in the source code would read, “<table style="width: 400px;">.”
We suggest avoiding lists and utilizing tables instead, as lists can be interpreted differently across clients. This way, you can achieve a similar visual while maintaining more consistent results.
Tables are also great when you see text pushed up against an image or another line of text. Because Outlook doesn’t always render spacing, inserting empty cells can act similarly to padding. You can utilize these cells and/or rows to achieve spacing vertically or horizontally.
What this looks like in the source code:
The highlighted code below is the empty cell between “Table” and “Test 1.”
The highlighted code below is the empty row between “Table” and “Test 2.”
HubSpot Customers: When inserting a table from the toolbar, simply insert an extra cell or row of cells and specify the width/height to achieve this spacing.
2) Specify line-height, font, font size, and color.
If you do not define line-height, font, font size, and text color, it is safe to assume that Outlook will make this decision for you and apply its default styling.
Define now or forever hold your peace.
Use your automated email service toolbar to define these elements. Once defined, the appropriate styling will be added to the source code and will look something like this:
HubSpot Customers: Highlight text and use the toolbar to specify line-height, font, text size, and color.
3) "Break" your text.
Text doesn’t wrap automatically in Outlook, so you should add styling to your “table” tag: <table style=”word-break: break-all;”>. This will achieve the break in text and prevent any text from extending past the recommended email width of 600px. If you don’t implement word wrapping for your content, it would “break” your email and impact its responsive design.
Text without break:
Text with break:
What this looks like in the source code:
4) Add ALT text to images.
Since Outlook is a known culprit of image blocking for HTML emails, it is important to include ALT text (alternative text), as this renders in place of the image. This is an attribute added to the “image” tag within the source code.
What this looks like in the source code:
All Outlook clients (including 2000 for Mac) display images from trusted senders. If your subscribers add your email address to their address book, images will display automatically. You can also have recipients add your email domain to the safe senders list in Outlook settings.
5) Use center tags.
Since Outlook doesn’t honor alignment that is written as an attribute of a tag (align=””), it will need to be specified in a style=””. To combat this, you will need to utilize “center” tags around the content you want centered or by adding this bit of HTML to the tag you are targeting: style=”text-align: center;”
What this looks like in the source code:
HubSpot Customers: Use the toolbar to “Align left,” “Align center,” or “Align right” for content used in your rich text modules.
6) Beware of background-images, padding, floats, and forms.
Outlook removes background-images, padding, floats, and forms.
Background-image
We suggest avoiding background images for emails. Instead, try utilizing a background color and incorporating your email’s images in other ways.
Padding and Floats
As a workaround for incorporating proper spacing and padding, you can either use the table method above or use vspace (vertical space) and hspace (horizontal space). This styling will serve as an attribute to the “image” tag and will add equal spacing on the sides of your images. Additionally, you can use table cells to define spacing, if preferred.
HubSpot Customers: Click here for detailed instructions from within the tool to apply vspace or hspace.
Forms
It is not a typically best practice to include a form within an email. Instead, a CTA button is helpful for bringing your viewer to a landing page with the correlated form. However, if you know your contacts are predominantly using Outlook and they have not added your email domain to their safe senders list, it is possible that your CTAs are being blocked when opened in Outlook.
Since CTA buttons are, in essence, an image, they would fall victim to Outlook’s notorious legacy of image blocking. To avoid this, you can use styled text that would create the same look and feel of a CTA button.
Below, you will find a snippet of example code that you are free to copy and use in your own emails. You're free to change the font, size, or color of the text. You can also adjust the button color by replacing the background-color hex code. (And don't forget to link it to your landing page!)
<center><table style="height: 33px; background-color: #031b35 transparent;" width="132" cellspacing="0" cellpadding="0"><tbody><tr><td style="border-radius: 15px; text-align: center; background-color: #F89406; color: #ffffff; font-size: 20px; line-height: 30px;">Click Here</td></tr></tbody></table></center><br><center><a style="text-decoration: none; color: #ffffff;" href="http://">Click</a></center>
7) Preview and test emails.
It is vital that before pushing the final send, you preview your email in other inboxes. With whatever email marketing tool you’re using, it would be best to preview your email in the clients and on the devices you know your audience is using. It’s also recommended to do a test send to your own accounts -- just make sure to remove other recipients from the list first.
HubSpot Customers: From within HubSpot you can preview emails from other clients/devices and do a test send.
Ready to Hit Send?
In the world of email marketing, not everything you see is what you get. Pins get pulled loose, text falls out of place, and images can disappear altogether. However, if you take the necessary steps to protect your corkboard, you can build something that can withstand anyone’s wall.
No comments:
Post a Comment