5 tips for designing emails for Outlook recipients

Table of Contents

• How to design emails in Outlook? Our tips
• 1. Use tables
• 2. Be mindful of the width
• 3. Fixed-width layout
• 4. Use ALT text
• 5. CSS
• Limited font support
• Test your emails

Outlook is one of the more popular mail clients for receiving emails however it can be one of the more difficult inboxes in regards to how your email is displayed. Here are some tips on how to design your emails so they render as you expect them to in Outlook inboxes. 

Outlook is known for not displaying HTML properly and this is due to older technology. Since the Outlook 2007 version arrived, the HTML rendering engine is based on Microsoft Word. This older version causes a large number of problems when displaying HTML and CSS content that is normally supported in other email software.

We want to focus on how to improve the look of your emails in the Outlook client as it currently is. As per Lauren Smith of Litmus; recent versions of Outlook - 2007 to 2013 have multiple issues that can affect how your email is displayed. Some of these issues include blocking images display by default, nonfunctional forms, limited font support and ignoring popular HTML/CSS tags like max-width.  Another version, Outlook 2011, known as Outlook for Mac - runs on OS X and uses WebKit to render emails. Outlook 2011 has great support for HTML and CSS, Animated GIFs, background images, HTML5 videos, and web fonts.

For Outlook.com, it renders similar to Windows Live Hotmail. Outlook.com claims to block content form suspicious-looking senders and its not clear how it is determined who is suspicious and who is trusted. Forms are still displayed but not functional just like the earlier version of Outlook.

Since most problems occur on Outlook 2007 - 2013 in this article we will focus on this version of Outlook. We will help you avoid some of these pitfalls when working specifically on emails sent to Outlook addresses.

Table of contents

• How to design emails in Outlook? Our tips
• Limited font support
• Test your emails

How to design emails in Outlook? Our tips

1. Use tables

In an email, tables are used to structure the layout of the template, to center elements, to style the text, to define padding and margins, to set backgrounds, to split the content into columns, and control overall layout. Using a table will save you time and effort and ensure that the content of your emails are delivered as you designed them to all email clients. Most of the time, Outlook doesn’t handle divs (this is the content division normally used with HTML coding) well. Using a table solves common issues such as floating images, lists, text wrapping, and spacing inconsistencies.

2. Be mindful of the width

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.

3. Fixed-width layout

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 fora 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.

4. Use ALT text

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.

5. CSS

We mentioned that Outlook does not accept many CSS tags. We prepared the complete breakdown of accepted CSS tags - feel free to use them to implement the proper style.

Limited font support

The list of fonts supported by Outlook is short. If you try to use a font that is not accepted by Outlook, it will change to Times New Roman. If this keeps happening please use one of the safe fonts: Arial, Arial Black, Courier, Courier New, Georgia, Tahoma or Verdana.

Test your emails

Email marketing is likely a cornerstone to your marketing strategy. That is why it’s imperative to test your emails to ensure that you are giving a quality experience to your subscribers. Email clients and mobile devices display HTML differently because each client renders HTML in its particular way. Email coding can be tricky. The best way to be sure that your email will look great everywhere is to test it. 

We hope that these tips and advice will help you create better emails for your Outlook recipients. In case of any questions or concerns, feel free to contact our friendly Customer Success team members who are available 24/7!

Anna Wybieralska