How to design emails for Outlook recipients

Outlook is one of the most popular email clients, but it can also be one of the most challenging when it comes to how your email is displayed. It is known for not displaying HTML properly, primarily due to their specific  technology. This older engine sometimes causes a wide range of issues when displaying HTML and CSS content that would normally render correctly in other email clients.
Recent versions of Outlook have multiple issues such as blocking images display by default, non-functional forms, limited font support and ignoring popular tags like max-width. Also - Outlook.com claims to block content from "suspicious" senders, but it’s unclear how those determinations are made (specifically, what qualifies a sender as suspicious or trusted).

We want to focus on how to improve the look of your emails in the Outlook client as it currently is. Since most problems occur on Outlook 2007-2013 in this article we will focus on this version of the app, although the described issues may also affect later versions as well. Below we present some useful tips on how to design your emails so they render as expected in Outlook inboxes. 

Tables are essential for structuring email layouts. They're commonly used to organize the design of a template-centering elements, styling text, setting padding and margins, adding backgrounds, splitting content into columns, and controlling the overall layout.

Using tables not only saves time and effort, but also helps ensure your emails display consistently across all email clients, including Outlook. That’s because Outlook often struggles with <div> elements, which are commonly used in standard HTML layouts. Tables provide a more reliable alternative and help avoid common rendering issues like floating images, broken lists, inconsistent text wrapping, and spacing problems

Have you experienced getting an error "This message is too wide to fit your screen..." when you open your mail? That is a notification we don't want you to experience. To avoid the wide message warning, your email should be less than 630px if you want your images to be properly displayed. In a program like Outlook, many users with a wide-screen will have their reading panel on the right instead of under the mailbox. Although this space can easily be made larger or smaller by the user, it will often not be much larger than 600 to 700px.

As email marketers, we have to think about how our recipients open their mail and what devices they are using. As generation evolves, it will always benefit us to think about mobile-responsive design.

Fixed width layouts are where the width of the entire page is set to a specific value. If you are to use a fixed width design, make it better to have it at 580px or 680px for a browser and no more than 480px for a mobile device. This will ensure that you are giving the subscriber a quality mail experience.

Since Outlook ignores max-width parameter some of your images may be stretched out - the best way to avoid that is to pass width parameter in your IMG SRC tag and define the width in pixels there.

Outlook is known for blocking images so we strongly recommend you to use ALT texts. ALT text (alternative text) is a word or phrase that can be inserted as an attribute in an HTML (Hypertext Markup Language) document to tell website viewers the nature or contents of an image. The ALT text appears in a blank box that would normally contain the image. When using alt text, it important to use a few words as possible. If the alt text is too long this might take up too much space to fit inside the image area. The best way to overcome this image blocking is to get your email subscribers to add you to their safe senders list in their Outlook settings. Once you're recognized as a trusted sender, your images will render in the email automatically.

We mentioned that Outlook does not accept many CSS tags. We recommend using a tool such as Caniemail - feel free to use it to implement the proper style.

Outlook has a limited list of supported fonts. If you use a font that Outlook doesn't recognize, it will typically default to Times New Roman. To avoid this, it's best to use "web-safe" fonts that are widely supported by email clients, including Outlook. Some safe choices include:

Email marketing is likely a cornerstone of your marketing strategy. That’s why it’s essential to test your emails to ensure you’re delivering a high-quality experience to your subscribers. Email clients and mobile devices display HTML differently, as each client renders HTML in its own way. Email coding can be tricky, and the best way to ensure your message looks great everywhere is to test it.