Newsletters That Fall Apart in Outlook

Fine on the phone, broken at the desk

The newsletter looked right in the preview and on the sender's phone.

On an office computer running Outlook, it arrives as a stack of enormous photographs, collapsed columns, and a button reduced to a thin blue link.

Nothing went wrong in sending. Since Outlook 2007, the desktop versions of Outlook for Windows have used Word, the word processor, to lay out HTML email instead of a web browser's engine.

Word understands only part of the code that web pages, and most newsletter templates, are built with.

What Word ignores

• Columns built the way web pages build them.
• CSS that shrinks images, so photos appear at full width.
• Background images behind text, sections and buttons.
• Rounded corners and padding on links styled as buttons.
• Web fonts, which can fall back to Times New Roman.
• Animated GIFs, which show only their first frame.

The second is the one that does the most damage. A photo saved at 1,200 pixels for sharp phone screens, and shrunk with CSS, arrives in Outlook at full width and drags the whole layout sideways.

Why phones are fine and Outlook is not

Mail apps on phones use browser engines, which understand modern layout. A template built and checked on a phone never meets Word until someone opens it at work.

Outlook is also several programs. Outlook on a Mac and Outlook in a web browser display email much as a browser would. The trouble is specific to Outlook 2007, 2010, 2013 and 2016 on Windows.

Those versions are on a great many office computers, and on home computers that came with Office installed.

Who on your list reads in Outlook

Your email service's reports usually break opens down by email program. That figure undercounts desktop Outlook, because opens are recorded by loading an image, and Outlook blocks images until the reader allows them.

Addresses help too. A list full of company domains, rather than personal webmail, is a list read at desks.

Businesses selling to other businesses, professional firms and anyone whose customers read email at work should assume a real share of Outlook readers, whatever the report says.

Simpler layouts survive

The most dependable newsletter is a single column about 600 pixels wide. Fewer elements means fewer places for Word to go wrong.

Where two items sit side by side, build them with a table of fixed widths, the method web pages abandoned years ago and email still needs.

Give every image a width in the HTML itself, at the size it should appear, and save it at that size or at exactly twice that size for sharp phone screens.

Set dates, prices and headings as live text, not inside images, so they survive whatever Outlook does to the pictures.

Buttons built to survive

A link dressed up with padding, a background colour and rounded corners turns into a plain underlined link in Outlook, often lost below the photographs.

A sturdier button is a table cell with a solid background colour and the link inside it. It looks square in Outlook and rounded elsewhere, which nobody minds.

Avoid buttons made from images. When images are blocked, the button disappears entirely, along with the reason for sending.

Fonts and spacing

Put a common font first in the list, such as Arial, Georgia or Verdana. When a web font comes first, desktop Outlook can ignore the rest of the list and fall back to Times New Roman.

Spacing behaves differently too. Space created with margins may vanish or grow, so set it with padding on table cells, which Word respects.

And avoid one large image cut into slices. Word can open thin white lines between the pieces, which look like a crack across the design.

A worked example

An auction house sent a newsletter before each sale: a grid of lot photographs in three columns, the sale date in a decorative web font, and a View the catalogue button.

The template had been built like a web page, and it looked good on phones, where the grid stacked neatly into one column.

Many of its readers were dealers and estate lawyers on office computers. In their Outlook, the photographs arrived at full camera width, the grid became one long column, and the sale date appeared in Times New Roman.

A dealer replied with a screenshot and a question: was there a catalogue?

The rebuilt template uses a single column with lots in pairs, images saved and declared at display width, the date and time as plain text at the top, and a button made from a table cell.

Testing before every send

Send a test to a real desktop Outlook account before each newsletter, not only when the template changes. A wide photograph dropped into a good template breaks it just as surely.

Check the width, the images, the button, the fonts and every link. Then check the phone version, since fixes for Outlook occasionally upset it.

Testing services can also show screenshots of one message in dozens of email programs at once, which is worth it for anyone sending to thousands.

Templates from the email service

The templates supplied by the main email services have generally been tested in Outlook. Trouble usually starts with a custom template built like a web page, or content pasted in from a website or a document.

If someone builds your template, ask to see it in Outlook 2010 and 2016 before approving it. A designer who builds email regularly will expect the question.

The counter-case

A list of parents from a children's swim program, read almost entirely on phones, may include very few Outlook readers, and a plain single-column template probably copes already.

Testing can then be occasional rather than every send. The less a newsletter attempts, the less there is to break.

But a list of business customers needs Outlook treated as a main audience: one column, declared image widths, live text and tested buttons.

Before the next issue

1. Send a test to desktop Outlook.
2. Declare image widths in the HTML.
3. Use one column for the main content.
4. Rebuild buttons as coloured table cells.
5. Put dates and prices in live text.
6. Choose fonts with safe fallbacks.
7. Repeat the test whenever the content changes.

Step two fixes the worst of it in minutes. Full-width photographs are what force readers to scroll sideways, and a width written into the HTML is all it takes to stop them.

Replies to a newsletter need an owner too, as covered in unsubscribe requests sitting in an inbox.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.