Remember Internet Explorer and how its lack of support for web standards got so bad that Microsoft had to kill it? That's pretty much where we are with Outlook. In some cases for mobile, Outlook has improved by using the HTML rendering engines from iOS, Android, and macOS instead of their own. It's Windows that's mainly still an issue.
Having recently changed the rendering engine of their Edge browser, does that mean it's time for Microsoft to finally give Outlook an upgrade as well? Current Outlook usage is roughly at nine percent and continues to go down, so maybe it will just go away completely! But for now, there are enough unfortunate email users that use the bad versions of Outlook that we should be supporting as best we can.
Layout for Outlook
First of all, there's no reason why you shouldn't build your email structure based on good, accessible design and code, and make Outlook-specific code secondary. Outlook has kept table-based design alive even though there's no need for it.
The way to account for Outlook requiring tables is by using the ghost tables technique when needed, where tables are added around your div structure, commented to only be output by Outlook. Here's an example:
<!-- Two-column section with image on the left -->
<!--[if true]>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="all: unset; opacity: 0;">
<tr>
<![endif]-->
<div style="display: table; width: 100%;">
<!--[if true]><td width="50%" style="padding-right: 0;"><![endif]-->
<!--[if !true]><!-->
<div class="column" style="display: table-cell; width: 50%; padding-right: 0;">
<!--<![endif]-->
<img height="auto" src="https://via.placeholder.com/600x400/60bcde/ffffff/?text=Content+Image" width="300" alt="" class="fill" style="display: block; width: 300px; height: auto;">
<!--[if !true]><!-->
</div>
<!--<![endif]-->
<!--[if true]>
</td>
<td width="50%" style="padding-left: 14px;">
<![endif]-->
<!--[if !true]><!-->
<div class="column" style="display: table-cell; width: 50%; padding-left: 14px; vertical-align: middle;">
<!--<![endif]-->
<p style="margin: 0; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 24px; color: #333333; font-weight: 300;">Text next to an image, in a two-colum section, split 50/50.</p>
<!--[if !true]><!-->
</div>
<!--<![endif]-->
<!--[if true]></td><![endif]-->
</div>
<!--[if true]>
</tr>
</table>
<![endif]-->
Images for Outlook
Another common issue is how Outlook handles image sizes for images that have more pixels that account for high density/retina displays. Normally, you just need to scale the image down by setting the output width or height of the image in your HTML. For Outlook, you'll need to make sure to include both width and height properties.
So what about background images? That's a whole other thing, requiring VML code. First defining it in the HTML element:
<html lang="en" dir="ltr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
Then adding DPI settings in your head (more info on DPI scaling):
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
And the VML around your code (more info on VML for background images):
<div style="background-image: url(https://via.placeholder.com/1200x600/60bcde/ffffff/?text=Background+Image); background-repeat: no-repeat; background-size: cover; background-position: top center; width: 100%; height: 300px;">
<!--[if mso]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" fillcolor="#333333" style="width: 450pt; height: 300px; text-align: center;"> <v:fill type="frame" size="450pt,300pt" aspect="atleast" alignshape="true" src="https://via.placeholder.com/1200x600/60bcde/ffffff/?text=Background+Image" data-block="feature-bg" color="#ffffff"> <v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text: true;"><![endif]-->
<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="height: 260px; padding: 14px; vertical-align: middle; text-align: center;">
<h2 style="margin: 0; font-family: Georgia, Times New Roman, serif; font-size: 28px; line-height: 32px; color: #333333; font-weight: normal;">Headline/primary title text</h2>
</td>
</tr>
</table>
<!--[if mso]></v:textbox></v:rect><![endif]-->
</div>
Details for Outlook
While writing code for Outlook can be a pain, don't fall into the trap of trying to make your email perfect for Outlook. You don't need to try and support rounded corners or hover effects, for example. As long as it's readable, allow some aspects of your email's design to look a little different in Outlook.
Beyond these main techniques, you may run into issues with certain versions of Outlook. These resources may help you troubleshoot:
Blocks Edit works with your Outlook code to allow you to make your template visually editable. Learn how it works.
