It’s a truth, universally acknowledged, that Outlook and email marketers have a love-hate relationship. Outlook loves to make email marketers struggle and sweat, and email marketers hate designing emails for Outlook.
Nevertheless, since Outlook has approximately 400 million users, you can’t ignore this email client when designing your campaigns. If you don’t optimize for Outlook, you could end up alienating a large chunk of your customer base.
Granted, coding emails for Outlook does take some work and perseverance. But armed with the right know-how and an understanding of the most common issues with HTML in Outlook emails, you can overcome these challenges to create stellar emails.
Read on to explore the benefits of using HTML in your emails and also learn how to easily add HTML into Outlook emails.
Why should you use HTML in Outlook emails?
Sadly, if you Google “Issues with HTML in Outlook emails,” you’ll find plenty of questions, queries, and exasperated email marketers. Clearly, Outlook is renowned for email rendering issues.
This means coding emails can be a difficult task, especially since there are so many different versions of Outlook.
Many of these different versions use alternative rendering engines, which creates a huge challenge in itself because you may overcome some HTML issues with one version but this may cause issues within another version.
In turn, this leaves you with distorted text, broken links, missing pictures, and unprofessional-looking emails that’ll have some recipients unsubscribing, and some might even mark the emails as spam.
So why on earth would you want to use HTML in Outlook emails?
Because, as we’ve already seen, if you ignore designing your HTML emails specifically for Outlook, you’re going to wind up with a very disappointed subscriber list.
According to our recent email client usage report, 5.1% of people are using Outlook 2013, 4.7% are using Outlook 2010, and nearly 20% of customers are using various other email clients (which includes many different Outlook versions).
Isolating this number of people from your email campaigns is not good email marketing practice.
Top tips for inserting HTML into Outlook emails
To overcome these common issues, you could just send plain-text emails to Outlook email recipients, or you could make very basic HTML emails that don’t use CSS and follow other basic formats.
Alternatively, to save time, you could make sure there’s a link that allows recipients to view your email in their browser. However, is it fair to ask your customers to jump through hoops to see your emails?
In most cases, probably not.
That’s why we’ve brought you these 7 tips for adding HTML to Outlook emails. Using these tips will enable you to create beautifully presented, outstanding emails for all your recipients.
1. Overcome image issues by adding alt text and removing padding.
A number of email clients block images and Outlook is one of them. That’s why most people recommend using alt text for each image within your email. Alt text is a simple phrase or word inserted in your email’s HTML document that tells the viewer what the image contains.
That way, if an image isn’t displayed correctly (i.e. if it gets blocked by Outlook), your recipient will see a blank box with the alt text instead.
So when creating your alt text, use a few words (you don’t want the text to overrun the image box) to describe what your image is so your recipients feel confident unblocking the image.
For example, you might say “Find us on Facebook” or “Discover more offers online at companyname.com.” These alt tags instill far more confidence than, “abc.jpg” or “new image.”
If you try to improve loading times by slicing your images, you’ll need to ensure there’s no padding between the sliced images (something Outlook has a tendency to add).
To stop this from happening, simply add:div{display:block !important} to your email’s <head> tag.
2. Make sure custom fonts aren’t replaced with Times New Roman.
Outlook supports only an incredibly limited number of fonts, which means if you use a font that isn’t within its scope of capabilities, Outlook will default your email to Times New Roman. And we all know how ugly Times New Roman can look if that’s not what you had in mind.
To avoid Outlook surprising your subscribers with its favorite font, you could use one of these safe fonts instead:
- Courier
- Courier New
- Arial
- Arial Black
- Veranda
- Tahoma
- Georgia
However, if you have a specific font that’s key to your brand’s look and identity, you may need to force Outlook to use one of the aforementioned fonts, using this specific font as your fallback.
Do this by using:
<!--[if mso]> <style> h1 { font-family: Primary font, Fallback font; } </style> <![endif]-->
This is conditional code that will prevent Outlook from ignoring any of these fonts and will stop it from displaying your text in Times New Roman.
3. Use tables to construct your emails.
In emails, tables are used to control the layout of the email by splitting content, setting backgrounds, defining margins and padding, styling text, centering elements, and structuring your template.
Using these tables will help ensure your emails appear exactly how you want them to in your subscribers’ inboxes, regardless of which email client they use.
In many cases, Outlook won’t support divs which are used in HTML coding to divide content. Luckily, using tables will solve common problems like inconsistent spacing, text wrapping, and floating images.
Just remember to keep things fluid and responsive by making sure you’ve added:
align=”left”
This ensures that boxes will appear next to each other on wider screens but will display neatly on top of each other on smaller screens.
Source: Really Good Emails
4. Keep the width of your email in mind.
Ever opened an email to find an error telling you the message is too wide for your screen? Being mindful of email widths will ensure your subscribers avoid seeing this message.
Essentially, working with the lowest width should help you avoid rendering issues with Outlook. This means you’ll want to aim for 550-600 pixels so your email is correctly displayed on smaller screens but you still retain enough scope for beautiful design.
And if you’re using fixed-width layouts, ensure you’re accommodating browsers and mobile devices. So, 580 or 680 pixels for a browser and 480 pixels maximum for a mobile.
Of course, it’s not always that simple with Outlook: Sometimes the email client will ignore the max-width parameter. Some of your images might get stretched, so always make sure your IMG SRC tag clearly defines the width of your image (in pixels).
Also, if you want to go one step further and target specific Outlook versions (and clients), you can apply certain widths to these versions.
For example:
“`html <!–[if gte mso 9]> <table width=”500px”> <![endif]–> “`
This would apply a 500-pixel width to clients using Outlook 2000 or newer. “gte” translates as “greater than or equal to,” and “mso” means “Microsoft Office.”
5. Use inline CSS.
Embedded CSS may be something many email clients have started to support, but Outlook versions remain behind the times.
So, if the head of your document includes CSS or you link to a stylesheet on an external platform, it’s highly likely your styles won’t be rendered correctly. Outlook will just ignore them.
That’s why you need to inline your CSS, writing your styles so they’re in line with HTML. By combining inlined CSS with HTML tables, you’ll be able to craft solid templates that aren’t hampered by Outlook rendering quirks.
(You can also find more helpful tips on CSS here).
6. Hide certain elements from Outlook.
While you want to create emails that all your recipients can enjoy, you won’t want to remove some of the more exciting design elements for users who are using other email clients.
Thankfully, you can hide CSS styles and HTML elements from Outlook with the simple code:
<! — [if !mso]><! — → <! — <![endif] →
And if you want to hide elements from Outlook, do so by using:
<table style=”mso-hide:all;”></table>
However, always use this trick carefully since you might need to use this on multiple tags, depending on the number of elements you use. If in doubt, add the code to each layer so it completely hides all of this from Outlook.
7. Test, test, and test again.
And don’t forget to test your emails, of course. Email marketing is at the heart of any company’s marketing strategy, which is why it’s crucial you get it right.
Testing your emails is a sure-fire way to guarantee you’re providing your subscribers with the email experience they want. And with all email clients displaying HTML differently, not just Outlook, it’s important you test your email campaigns on each and every platform to ensure they render well, just to be sure.
It might sound like more work, but the peace of mind is well worth the extra effort.
Wrap up
While the easy option would be to ignore those Outlook email recipients, this isn’t going to do anything for your email marketing campaigns or your ROI. It certainly won’t bring in revenue or convert leads into lifetime brand ambassadors.
Instead, by becoming an expert—or at the very least, becoming familiar—in HTML formatting for Outlook emails, you can overcome those all-too-common problems to deliver stellar emails to every customer, every time.