All Collections
FAQ
My email design looks different in Outlook Windows?
My email design looks different in Outlook Windows?
Rikke Søndergaard avatar
Written by Rikke Søndergaard
Updated over a week ago

APSIS One emails are designed to look beautiful across all email clients. However, certain versions of Outlook can cause problems in showing your design exactly how you created it.

Why does this happen?

Outlook since Outlook 2007 use Microsoft Word to render HTML email, which can cause issues with displaying your email design. Microsoft Word is built for print design and tries to render HTML like it would look in print, making it look different from what you may have designed and tested.

Unfortunately, APSIS One can't do much about the way Outlook or other email clients display HTML email.

Send a test email for the version most of your profiles are using

We recommend you try to identify which version of Outlook most of your email recipients use and create a design that works well for them. Preview mode will give you a fine indication. If possible, send a test email and view your design directly in that version of Outlook.


Common Outlook email design challenges

Lets go through some of the most common design challenges we see with Outlook.

  • Rounded corners for buttons and borders: Outlook has no support for border-radius, so your rounded corners will be straight.

  • Fonts: If Outlook do not recognize the font you chose in your design, it will select a standard font by default.

  • Gif's: Some versions do not support animated gifs at all, later versions of outlook do support a limited time of animation loops.

  • Background Image: Outlook does not support other styling on background images than tile and will therefore be presented with a background color.

  • Buttons: You can not click the full button, just the text in the button.

  • Lines appearing: Is caused by a bug in Outlooks rendering. What you see is actually the color set behind your content.

  • There is no support for SVG or WEBP-files

  • Forwarding the email might break the design.

Other issues

  • No support for background images in divs and table cells

  • No support for CSS float or position

  • No support for text shadow

  • Poor support for padding and margin

  • Poor support for CSS width and height

  • Problems with nested elements background colors

Rounded corners for buttons and borders

Rounded corners, in buttons and in the border around email. Rounded corners are made with the css-proparty border-radius. Outlook have no support for border-radius, so your rounded corners will be straight.

Fonts

Outlook do not handle fallback fonts in the same manner as other email clients.

If Outlook do not recognize the font you chose in your design, it will select a standard font by default.

If you have selected a Google font APSIS One will override the Google font with a web safe font, to at least get a similar font as the one you selected.

Lato, Merriweather Sans, Open Sans, Roboto, Source Sans Pro will show as:

Verdana, Geneva, sans-serif

Arvo, Lora, Merriweather, Noticia Text, Playfair Display will show as:

Times New Roman, Times, serif

Gif's

Some versions do not support animated gifs at all, later versions of outlook do support a limited time of animation loops.

Version support, 2007, 2010, 2013, 2016 will show the image, but not animate it, it will show the first frame. 2019 version will animate the image for 3 loops. The solution is when creating the gif image make sure the first frame is not empty.

Background image

Outlook does not support other styling on background images than tile and will therefore be presented with a background color.

Buttons

You can not click the full button, just the text in the button.

Lines appearing

You see lines in the email? This is caused by a bug in Outlooks rendering. What you see is actually the color set behind your content. If you email background is set to red and the body color is set to white you might see red lines.

You can reduce some of the lines by have even numbers in font size, line height, paddings and margins. Even so they can appear anyway. Unfortunately, there is no perfect solution for every case.

The only real solution is to chose the same background color for email and body.

SVG and WEBP-images

There is no support for SVG WEBP-files, so if you link to an image file in the image element in the APSIS One email editor it wont show in Outlook. Outlook and other email clients do not support SVG or WEBP, so we have blocked SVG and WEBP for upload.

Forwarding the email can break the design.

Make sure to include a web version of the email so recipients will have the option to see the email online instead.


Get more details

There are no official guide lines to working around Outlook but this article from Litmus gives you more details.

Did this answer your question?