Emails Looking Funny in Outlook? Try These 7 Tricks for Making Them More Presentable

If you‘ve ever meticulously designed a beautiful email only to have it fall apart when you open it in Outlook, you‘re not alone. According to Litmus Email Client Market Share data, Outlook and Outlook.com account for over 13% of all email opens, making it one of the most popular and important email clients to optimize for.

But what is it about Outlook that causes so many headaches for email marketers and designers? To put it simply, Outlook has poor support for modern HTML and CSS compared to other major email clients. Whereas Apple Mail, Gmail and others use Webkit or Blink rendering engines, which can handle more complex coding and layouts, Outlook relies on Microsoft Word‘s rendering engine. Yes, you read that right – Word, as in the document editor that‘s great for typing up reports but not so much for rendering pixel-perfect responsive emails.

Outlook‘s quirky rendering strips out or overrides a lot of the code that makes our emails look good – things like spacing, image alignment, modern web fonts, and responsive design. So what can we do to prevent our beautiful email creations from turning into garbled messes for our Outlook-using subscribers? Read on for 7 essential tips and tricks for coding Outlook-proof emails.

1. Build Your Structure with Tables

In the world of web design, table-based layouts have long fallen out of favor, replaced by cleaner CSS-based designs with semantic HTML. But when it comes to email, tables are still our most reliable tool for structuring the layout and keeping things aligned. Think of tables as the scaffolding that holds your email together.

Why use tables? Quite simply because CSS positioning with

s and floats is inconsistently supported across email clients, especially Outlook. According to Microsoft‘s documentation, "Outlook 2007, Outlook 2010, and Outlook 2013 use Microsoft Word to render HTML email. Word‘s rendering engine does not support the use of the float or position properties."

So instead of wrestling with unreliable positioning in Outlook, stick to tables to build the structure of your email. Nest tables inside of tables to create columns and complex layouts. Set the width of your table cells in pixels or percentages to keep things aligned and spaced out properly, regardless of screen size.

Here‘s a basic example of an email template structured with tables:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td>
      <table class="inner-table" align="center" width="600" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="400">Main content area</td>
          <td width="200">Sidebar</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

In this example, the outer table spans the full width of the email. Inside that is a nested table set to a max width of 600 pixels with two columns – a main content area and a sidebar. Using percentages for the inner table cells makes it flexible and adaptable to different screen sizes.

2. Use Inline Styles for Formatting

CSS support in email is notoriously spotty. While embedded and even linked style sheets can work in some email clients, they are not well supported in many versions of Outlook. Your carefully crafted styles can and will be stripped out or overridden in Outlook, often replaced by Outlook‘s default styling which is…not great.

To work around this, explicitly declare all your formatting using inline CSS styles on each HTML element. This way your styles are directly attached to the elements they apply to and can‘t be separated out and tossed aside by Outlook‘s finicky rendering.

Here‘s an example of how you might declare inline styles on a paragraph of text:

<p style="font-family: Arial, sans-serif; font-size: 16px; color: #333333; line-height: 1.5;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis, risus nec tempor faucibus, est augue porta lectus, auctor pulvinar sapien lorem non metus.
</p>

In this example, we explicitly set the font family, size, color and line height on the paragraph element. By doing this inline rather than in an embedded style sheet, we can ensure this formatting will be preserved when the email is rendered in Outlook.

Some key formatting to set using inline styles:

  • Font family, size and color
  • Text alignment (left, center, right)
  • Line height
  • Background colors
  • Padding and margins (use these sparingly and test thoroughly)

Inline CSS can make your HTML hard to read and more time consuming to edit, but until email client support for style sheets improves, it‘s a necessary evil to ensure consistent rendering across different apps and devices.

3. Specify Image Dimensions and Use ALT Text

Images are one of the trickiest parts of email design. Many email clients block images by default, leaving gaps of missing content in your masterfully designed layout. While there‘s no way to force images to always display, we can take steps to ensure the email still looks good and makes sense even when images are disabled.

First, always include the width and height attributes on your tags. This tells the email client how much space to reserve for the image, even if it‘s not loaded. Without these attributes, the image area will collapse, potentially breaking your layout.

<img src="cute-puppy.jpg" width="500" height="300" alt="Adorable puppy playing with a tennis ball">

In addition to specifying the dimensions, always provide descriptive ALT text for every image. ALT text displays when the image doesn‘t, letting readers know what they‘re missing. It‘s also important for accessibility, as screen readers use ALT text to describe images to visually impaired subscribers.

Good ALT text should concisely convey the content and purpose of the image. For example, "Smiling woman holding a yoga mat" is much more useful than just "Yoga photo".

Additionally, avoid using images for important text content. If you do have text in images, repeat that text in the ALT attribute so it still comes through when images are blocked.

4. Beware Background Images

Background images can be a nice way to add visual interest to your email‘s design – when they work. Unfortunately, most versions of Outlook don‘t support background images at all. If you specify a background image in your code, Outlook will just ignore it entirely, likely leaving an unsightly blank area in your design.

As a general rule, it‘s best to avoid using background images in emails, especially if a large portion of your audience uses Outlook. Stick to the tried-and-true method of using regular tags to include visuals in your message.

If you do decide to use background images, there are a few things you can do to degrade more gracefully in Outlook:

  • Use a suitable background color as a fallback. Choose a color that matches the general tone of your background image.
  • Keep important content in the foreground. Don‘t rely on the background image to convey key information.
  • Consider using VML (Vector Markup Language) as a workaround. Some experts have devised hacks using VML to get background images working in Outlook, but this is advanced territory. Tread cautiously and test extensively!

5. Go Big with Buttons

Call-to-action buttons are some of the most important elements in your email. You want them to stand out and be easy for readers to spot and click. But Outlook‘s rendering quirks can sometimes throw a wrench in your button designs.

One common issue is that Outlook doesn‘t support CSS padding very well on (link) elements. So if you have a linked button that relies on padding to look properly spaced and sized, it can come out looking squished or broken in Outlook.

Instead of relying just on padding, make sure your button HTML has plenty of physical space around the text. Generously size the table cell the button sits in and consider adding extra characters like spaces or   entities on either side of the button text to guarantee a minimum amount of spacing.

For example:

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="padding: 20px;">
      <a href="http://example.com/" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; color: #ffffff; text-decoration: none; background-color: #ff6600; border-top: 15px solid #ff6600; border-bottom: 15px solid #ff6600; border-right: 25px solid #ff6600; border-left: 25px solid #ff6600; display: inline-block;">
             Click Here     
      </a>
    </td>
  </tr>
</table>

In this code example, the button is created by applying styles directly to an tag. Note the use of   entities to add additional space on either side of the button text to ensure it doesn‘t get too close to the edges. The physical border and padding on the

also helps maintain space around the button.

Also consider using a bulletproof button approach, where you nest a background table and use borders and padding to build the button shape. Campaign Monitor has a great tutorial on how to build bulletproof buttons.

6. Test, Test, Test!

Perhaps the most important thing you can do to ensure your emails look good in Outlook is to thoroughly test them before sending. You should have a pre-flight checklist of things to look for and test in each email:

  • Is the email rendering consistently across major email clients and devices? Pay extra attention to Outlook versions as far back as 2007.
  • Are there any alignment or spacing issues, especially around images and buttons?
  • Is the ALT text displaying correctly where images are blocked?
  • Are your links and CTAs working properly?
  • Does the email look good with images turned off?

There are several tools that can help you test and preview your emails across dozens of clients and devices, such as Litmus and Email on Acid. However, there‘s no substitute for testing on real devices and email apps, especially for mission-critical campaigns.

At the very least, you should have a few Outlook accounts set up for testing, spanning different versions (2007, 2010, 2013, 2016, 2019, Office 365) and including desktop and web configurations. Send your email to these accounts and open it up to see how it renders in the wild.

If you catch issues during testing, resist the urge to blast out fixes and retest immediately. Take the time to really understand what went wrong and implement a proper fix. Band-aid solutions will often cause new problems and can be a nightmare to maintain over time.

7. Keep it Simple

At the end of the day, the key to Outlook-proof emails is to keep your designs simple and straightforward. Trying to get too clever or fancy with your code will often backfire in Outlook.

Some general design principles for Outlook-friendly emails:

  • Use a simple, single-column layout. The more complex your layout, the more likely it is to break in Outlook.
  • Stick to standard system fonts like Arial, Verdana, Tahoma and Georgia. Custom web fonts are not supported in Outlook.
  • Limit your color palette and avoid overly-complicated background images and patterns.
  • Use static images in standard formats (JPG, GIF, PNG). Avoid PNGs with transparency as they can cause issues in Outlook 2007-2010.
  • Keep your code clean and concise. Outlook can choke on really complex or deeply-nested HTML.

By sticking to tried-and-true design patterns and avoiding over-complication, you can create emails that look great and perform well in Outlook.

Wrap-up

Designing and coding for email is hard enough without having to worry about how your carefully crafted message will fall apart in Outlook. By understanding Outlook‘s rendering limitations and following the tips outlined above, you can sidestep the most common issues and ensure your campaigns look great for all subscribers.

Remember, when it comes to Outlook, think progressive enhancement. Design for the least capable email client first, then add in bells and whistles for the more modern apps. Always provide fallbacks and alternatives for features that aren‘t universally supported.

Most importantly, look at Outlook optimization as an ongoing process, not a one-off task. Continually test your campaigns, track their performance, and look for opportunities to tweak and improve your email code. With a proactive approach and solid defensive coding practices, Outlook doesn‘t have to be the bane of your email marketing programs.

Similar Posts