Being one of the most popular email clients, there are many versions of Outlook used today. Outlook 2000-2003 uses Internet Explorer as the rendering engine to display the emails. With the release of Outlook 2007, the rendering engine changed to Microsoft Word which does not support commonly used HTML & CSS properties and it also contains a few bugs.
Both Internet Explorer and MS Word have different limitations which may cause your emails to be displayed incorrectly or blown out completely.
Listed below are some of the common Outlook rendering issues to keep in mind when designing your emails:
Background Images
Some Outlook versions will not display background images. To play it safe, use a coloured background instead and display the intended background image in an image block within your email.
Image Alt-Text
Many email clients including Outlook have the ability to block images. Make sure your images have a descriptive alt-text so if the image is blocked, your recipients can understand what information you were displaying with your images.
Animated GIFs
Some Outlook versions will display only the first frame of an animated GIF. If your GIF has information or a call-to-action, make sure it is clearly displayed in the first frame.
Fonts
Outlook does not support all custom web fonts and will display instead a font that is installed on the recipient’s computer. You may wish to only use email safe fonts such as Arial, Helvetica, Times New Roman or Verdana.
Lists
Outlook does not support any styling of list bullets. Do not use any custom styles or images for your bullets.
Buttons
Button border radius settings may not be recognized, so your rounded buttons will be displayed as square buttons.
Page Breaks
For Outlook versions that use MS Word as the rendering engine, emails are treated like text documents and sometimes page breaks will be added to longer emails. This results in blank white gaps around images or text blocks. If possible, try to keep your email length to less than 1,800 pixels.
Listed below are some of the common Outlook rendering issues to keep in mind when designing your emails:
Background Images
Some Outlook versions will not display background images. To play it safe, use a coloured background instead and display the intended background image in an image block within your email.
Image Alt-Text
Many email clients including Outlook have the ability to block images. Make sure your images have a descriptive alt-text so if the image is blocked, your recipients can understand what information you were displaying with your images.
Animated GIFs
Some Outlook versions will display only the first frame of an animated GIF. If your GIF has information or a call-to-action, make sure it is clearly displayed in the first frame.
Fonts
Outlook does not support all custom web fonts and will display instead a font that is installed on the recipient’s computer. You may wish to only use email safe fonts such as Arial, Helvetica, Times New Roman or Verdana.
Lists
Outlook does not support any styling of list bullets. Do not use any custom styles or images for your bullets.
Buttons
Button border radius settings may not be recognized, so your rounded buttons will be displayed as square buttons.
Page Breaks
For Outlook versions that use MS Word as the rendering engine, emails are treated like text documents and sometimes page breaks will be added to longer emails. This results in blank white gaps around images or text blocks. If possible, try to keep your email length to less than 1,800 pixels.