Designing for Outlook

If you've done any amount of email design until now, you are aware of the challenge that Outlook presents. Mail Studio takes great care to work around its various quirks and limitations. In this guide, we'll show you some of the techniques you can use to make your designs work better in Outlook.

What is Outlook

Outlook is a desktop application developed by Microsoft, and is part of their Office suite. It's widely used in large companies, and depending on your audience, might make a sizable percentage of your email subscribers.

The problem with Outlook (and the closely related Mail app that's built into Windows 10) is that it shares its HTML rendering engine with Word. This brings a slew of limitations and gotchas that can catch an email designer unprepared.

Stick to the Appearance Panel

The easiest way to deal with Outlook is to leave it to Mail Studio. When you use the Appearance panel to style your components, Mail Studio applies all the necessary workarounds so that your email design will look the same way in Outlook.

Use the Responsive Grid

The grid in Mail Studio is a powerful tool for building responsive layouts. When Outlook displays an email designed in our app, the grid will be fixed to the desktop size and the mobile breakpoints will be ignored.

Outlook Visibility Options

In the Visibility group, there are two special options that are Outlook-specific.

• Hide in Outlook - The component will be hidden in Outlook and Windows 10 Mail, and visible everywhere else.
• Show only in Outlook - The component will be visible in Outlook and Windows 10 Mail, but will be hidden everywhere else.

These options give you an escape hatch when a certain piece of your design can't be made to look correctly. You can then just design an Outlook specific version and set it to show in place of the regular one.

Limitations and Workarounds

Despite all the work we've done in Mail Studio, some things simply won't work in Outlook. Here are the workarounds:

• Background Images - You will need to use regular images instead. With our Outlook Visibility Options, you can make the image show up only there. For situations where background images are unavoidable, you can keep the design consistent by choosing a complimentary background color that Outlook users will see in place of the graphic.
• Media Queries - No workarounds are possible, Outlook doesn't support media queries. At least this gives you an option to wrap your CSS code in a media query to ensure it won't run in that client.
• Web Fonts - You could use an image with your text in place of the actual font, but its best to just use a serif/sans-serif font as a fallback.
• Padding on paragraphs and headings - You can work around this by using the Box component and placing the paragraph/heading inside it.
• Margins on divs - A workaround is using the Spacer or Box components.