If you came to this article and experienced both a sigh of frustration and relief, you’re in the correct place.
We all know the drill when it comes to marketing emails. It all starts with a detailed plan for an email campaign, an extremely carefully picked group of recipients, and a beautiful email template to deliver the content to your group of recipients.
Everything looks great in the email builder. Everything looks good when you send tests to GMAIL, Yahoo, and other email-clients. Except when you send a test to Outlook…
Unbeknownst to you, Outlook has managed to change the entire email. The masterpiece that you have created now has images missing, text misaligned and everything is in the 11-point Calibri – GROSS!
You’re left with so many questions: What happened? How can you stop it in the future? Will anyone notice if I sit silently and bang my head on the desk?
There’s no need to fear – to help you better prepare your next email for Outlook, we’ve outlined a list of helpful tips below.
6 Tips to Prepare Your Email For Outlook
1. Use Tables.
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.
Make sure to specify the width of your table data (<td>), which shouldn’t exceed the max-width of your overall email. An example of this in the source code would read, <table style=”width: 400px;”>.
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.
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 them now or give up your rights to control your email.
You can define these things on the Styles tab within the email builder as well as on the toolbar when editing a text block.
3. 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.
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.
4. Use Center Tags.
Since Outlook does not honor alignment that is written as an attribute of a tag (align=””), it will need to be specified as a style. To combat this you will need to utilize “center” tags around the content you want to be centered or by adding this bit of HTML to the tag you are targeting: style=”text-align: center;”
5. Beware of background-images, padding, floats and forms.
Point blank, Outlook removes background-images, padding, floats, and forms. It’s unfortunate, but it is what it is.
Background-image
Avoid 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.
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 Outlooks 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: #9c54ff 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>
| Click Here |
6. Preview and Test Emails.
It is imperative 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.