It’s not you, it’s Outlook: The entire information for e-mail marketers

Marketing Guide to Action

Marketing Guide to Action / Marketing Guide to Action 5 Views 0

Almost each email marketer has been there: your emails display superbly on your iPhone, Android system or Gmail, but blow up when opened in Outlook. How irritating to take a position considerable power into crafting a tremendous e-mail campaign, solely to be flooded with messages reminiscent of “links not working” and “can’t see photographs” as an alternative of an inbox filled with orders!

Installed on hundreds of thousands of units worldwide, Microsoft’s enduring e mail shopper has been a thorn in the sides of entrepreneurs and designers for greater than 20 years – and its modern counterpart Home windows Mail isn’t a lot better. Both render HTML using Microsoft Word (although some older variations of Outlook use Web Explorer), and both ignore code conventions that work perfectly in other e-mail shoppers.

We’ve been there, we’ve discovered learn how to tame the beast that's Outlook, and we’re right here to assist. The next lists a number of the commonest issues with Outlook and how you can remedy them.

NOTE: This text is for intermediate to superior coders who can write and skim HTML with no graphic interface. In case you’re not a coding maven – and you don’t need to pay one – you possibly can take the straightforward route with a set of instruments from VerticalResponse. In addition to our popular email builder, we also supply the Email Test Kit, which exhibits you exactly what your emails will appear to be in almost 60 totally different apps, browsers and units earlier than you hit “ship.” That approach you recognize your emails will display completely on all platforms and units, together with Outlook. You may also use our Advanced Reporting software to realize insights into customer conduct, including which units and browsers they use so you'll be able to be sure you design emails that correctly render on these platforms.

Advanced Reporting Tools

Widespread Outlook issues solved

Right here’s the right way to clear up a few of the commonest e-mail rendering issues in Outlook.

Background pictures do not show

Outlook won't display background pictures applied with traditional HTML. Should you use a repeating background picture, hold it monochromatic and apply a background colour as a backup. Alternatively, you need to use Vector Markup Language (VML) to drive background pictures to show in Outlook.

Background Images Do Not Display

Hyperlinks display in the improper colors

Outlook mechanically makes all links blue (or purple, if they’ve been clicked), which might conflict together with your meant email design. Clear up this drawback by defining your hyperlink font colour in-line.

Photographs do not display appropriately

You'll be able to’t control whether a recipient blocks or permits e mail photographs mechanically, however you'll be able to ensure your photographs are as effective as attainable – even if they do not show. Remember to add descriptive alt textual content to all photographs. Alt text renders even if photographs do not and tells individuals what your pictures are about. It may possibly serve as calls to motion that encourage clicks and even create want that influences recipients to permit your pictures.

You also needs to account for retina shows through the use of photographs twice the meant dimensions. It will help avoid scaling points that may cause your photographs to seem grainy.

Images do not display correctly

The flawed fonts are displayed

Outlook will solely show fonts installed on a consumer’s pc, so it’s greatest to stay to common fonts corresponding to Arial, Occasions, Helvetica, Verdana and Trebuchet. In case you do need to use distinctive fonts, you'll want to specify a fallback font that also works together with your design.

Links aren’t working or displaying appropriately

Once you create hyperlinks, remember to use the complete URL – together with http:// or https:// – to make sure they work and display appropriately in Outlook.

Animated GIFs do not work

Animated GIFs freeze on the primary frame in Outlook. Unfortunately, there’s not much you can do about it, so if your audience is comprised of Outlook users it’s greatest to keep away from using them. Word that trendy variations of Windows Mail do help animated GIFs.

CSS does not render appropriately

Like many e mail shoppers, Outlook struggles to render CSS coded inside the <head> tag. Clear up this by styling your HTML elements in-line.

Rounded corner buttons gained’t show appropriately

CSS can be used to show buttons with rounded corners by way of the border-radius property; nevertheless, Outlook does not acknowledge this property and can display rounded buttons as sq. buttons. Unfortunately, this can be a limitation with no current answer.

Rounded Corner Buttons

Desk padding issues

Padding-top can be utilized to all <td> tags in a row, even for those who only add padding to at least one <td>. The only repair is to avoid using prime padding on a row and as an alternative add margins to parts contained inside desk cells to regulate spacing. Make sure to write the margin shorthand (margin: 0 0 zero 0) fairly than longhand (margin-top: 0px); in any other case, you danger encountering other bugs. One other, less elegant answer is to add a one-cell nested table, then add padding-top to that.

The 1,800-pixel bug

Long emails akin to newsletters can break at round 1,800 pixels in length. This is an Outlook error or bug that stems immediately from its use of Microsoft Word as an HTML rendering engine: long emails are handled as multi-page Word documents and Outlook is trying to add a web page break. The fix? Hold your emails beneath 1,800 pixels lengthy.

The format is out of whack

Should you created your e-mail utilizing divs with CSS properties resembling float and place, you’ll possible find that your format is totally off in Outlook. That’s as a result of Outlook does not recognize those properties, so it’s greatest to use tables to compose your format.

Desk cell bug

For table cells with pictures shorter than 12px, make sure to apply peak to them or face Outlook’s wrath. You need to be specifying table peak anyway.

Table strokes do not show appropriately

In the event you add a stroke to a desk that accommodates different parts, Outlook can add additional area/padding. Keep away from utilizing strokes if attainable.

Line peak disparities

Outlook can have points with line peak, particularly should you specify line heights utilizing a quantity resembling 1.3 or in case you set a line peak lower than one, through which case Outlook will crop your typography in odd methods. Reference this guide to avoid line peak issues.

Find out how to design emails for all platforms

Solving Outlook problems is usually a headache even for seasoned coders. Not only do that you must tackle Outlook’s points, but you also have to be positive any modifications you make don't negatively have an effect on how your emails render in other common e-mail shoppers similar to Gmail, Apple Mail and Yahoo.

The excellent news is you possibly can avoid the complications and shortly design emails that work on all platforms with the Email Test Kit. Merely create a new e-mail within the Vertical Response e-mail builder and click “Run Check” to verify the next for almost 60 totally different e mail platforms:

  • Inbox previews
  • Topic line previews
  • Hyperlinks

Should you discover a problem, you can also make a change with out ever leaving the email editor – and confidently ship emails figuring out they’ll display perfectly on all platforms and units.

Email Test Kit

You can even save time with VerticalResponse’s Advanced Reporting instruments, which show you which of them browsers and units shoppers your clients use so you possibly can guarantee your emails render completely on those platforms.

With instruments like these, what was once a particularly irritating facet of e-mail advertising has turn out to be quick and easy. When you don’t need to problem with tedious testing and leaping back-and-forth between your HTML editor and numerous e mail shoppers, it can save you time, money and complications by creating and testing your emails with VerticalResponse.

Construct, ship and monitor emails that look nice on any system

VerticalResponse provides you the tools to build highly effective campaigns in minutes, leaving you extra time to spend with clients.

Editor’s notice: This guide was initially revealed in 2012 and has been up to date and revised for accuracy and relevance.

© 2019, Brian Morris. All rights reserved.