We have to host an image somewhere public so any email client can access them. Using absolute paths (instead of relative paths) ensures our images can be downloaded regardless of where the email is opened.There’s a lot going on there, let’s break it down: There are a few kinds of CSS resets: The resetĪdding a few CSS properties in the email ’s tag will reset most of Outlook’s unwanted default styles. Just like when developing for the web, it’s a good idea to provide a reset CSS for emails to help to normalize how code gets rendered and prevent any unwanted styling in email clients. So how do you ensure your email renders properly in Outlook despite all its quirks? Here are some tips… 1. Some support media queries for responsive design, but most don’t. Some display images by default, but some block them. On top of that, they each add their own flavor of rendering, classes, and security policies. And they all use different rendering engines.

To start, consider the sheer number of Outlook products: Outlook 2000, 2002, 2003, 2007, 2010, 2013, 2016, 2019,, Outlook for Office 365, Outlook for Mac, Outlook for iOS, Outlook for Android… and there’ll be more in years to come.

When it comes down to creating beautiful, responsive emails, Outlook will usually take those templates we worked so hard on and render them with broken links, missing pictures, and a misaligned layout.

Coding HTML emails is complicated, especially when it comes to making them look good in Outlook. There are more than 400 million users worldwide using what might be the best corporate email client.

Outlook html formatting issues