What you need to know about email display in Microsoft Outlook
Anyone who has ever dealt with the creation of a complex newsletter, which should also look good in Microsoft Outlook, quickly realizes that this is not so easy.
Instead of the desired font, Times News Roman is displayed, spacing is shifted, shading and rounding are not displayed at all, and modern HTML elements such as DIVs also look somehow "strange". Why is that?
Microsoft Outlook makes life difficult for e-mail marketers. And this has been the case since the introduction of Microsoft Outlook 2002 Service Pack 3 - in other words, for over 20 years!
Why is that?
In the distant past, Outlook used the Internet Explorer engine to display emails. Back then, you had almost complete freedom in the design of your emails - even integrated forms and scripts were possible - and dangerous!
Since Microsoft Outlook 2002 Service Pack 3, Internet Explorer is no longer used for display. Instead, the e-mails are converted into a type of Word document. And a lot is lost during this conversion. In fact, Outlook only supports a small selection of HTML commands that are significantly older than today's HTML5/CSS3 standard.
The last time there was official documentation on the elements supported by Microsoft Outlook was in 2006 (!). There is hope that the new versions based on Outlook.com will give us more freedom. However, as old versions of Microsoft Outlook are often still in use, we will have to live with this problem for a few more years.
CSS3 classes
Microsoft Outlook does not support CSS classes. All styles must be defined as inline styles if they are to be taken into account.
Shading and rounding are generally ignored by Microsoft Outlook and can only be realized as a V-shape.
DIV elements
While most modern websites are based on DIV structures, Microsoft Outlook mainly accepts tables for structuring a newsletter.
Inner spacing in DIVs, for example, is only taken into account if there is a margin with a width of at least 1px on the corresponding page.
Our system uses DIVs when creating emails, but embeds them in so-called shadow tables that are only displayed in Microsoft Outlook.
External distances
Outer spacing is not supported by Microsoft Outlook. For this reason, our software only works with internal spacing and spacers.
Internal spacing in multi-column tables
Another problem arises if you have a multi-column table in which the upper inner spacing varies. In this case, Microsoft Outlook will give the inner spacing of the first column in all columns. The only way to realize different upper inner spacing is to use a spacer element for the spacing.
The border of a table is only taken into account if a border is defined in the corresponding cell.
If no border is to be displayed, this must be explicitly specified with the "none" property, otherwise a thin gray border will be displayed.
Fonts / fallback fonts
Microsoft Outlook only supports fonts that are installed on the recipient's system. If a font is not installed, Times New Roman is always used as the font - regardless of whether a fallback font has been specified or not.
Microsoft Outlook does not support the reloading of fonts - e.g. Google Fonts.
The font sizes and line spacing can also vary. This is due to the conversion of HTML code into a Word document to display the email.
Enumerations
Microsoft Outlook only supports dots for unsorted lists in texts. Custom graphics are ignored or replaced by dots.
Randomly distributed thin lines
Sometimes Outlook displays randomly distributed thin horizontal lines in gray. This is due to a bug in the Outlook graphics engine, sometimes these lines are displayed differently on each computer.
Forms, buttons and scripts
For security reasons, Microsoft Outlook does not support forms, buttons or scripts. And rightly so, because all of these can be gateways for viruses and malware.
Image formats, background graphics & videos
Supported image formats are .bmp, .gif, .jpg, .jpeg, and .png. Other formats such as vector graphics in .svg format are not supported.
Background graphics in DIVs, tables or cells are not displayed in Microsoft Outlook.
Videos are generally not displayed in Microsoft Outlook. This also applies to external videos that are embedded in an email. The only way to display videos is to use an animated GIF file.