All Collections
zkipster Communications
How to Design Your Email Content
Invitation Email Rendering in Outlook and Other Email Clients
Invitation Email Rendering in Outlook and Other Email Clients

Find out how HTML email rendering might affect the way your invitation email design is being displayed to your guests

Carolin Gonschorrek avatar
Written by Carolin Gonschorrek
Updated over a week ago

While zkipster's invitation templates are devised with maximum consistency and displayability across all desktop, mobile and web-based email clients (i.e. Apple Mail, Microsoft Outlook, Gmail, Thunderbird, etc.) in mind, your final invitation emails may still appear different from how you intended them to look in the design stage.

How your final sent invitations are going to be displayed to your guests will highly depend on the respective email service provider (ESP), email client (on desktop, mobile or web), browser type, device type, operating system, screen size and type of display they are using to view their emails.

Why Does my Invitation Email Look Different in my own (or my Guest's) Inbox to How it Was Designed in zkipster?

Each desktop, mobile or web-based email client will render HTML emails slightly differently. This is due to them all operating on different rendering engines and thus taking slightly different approaches based on their own unique standards. This can consequently affect the final display of fonts, images, and/ or spacing between different design elements inside the email.

In most cases these differences are subtle, but it is worth testing your invitation emails on a variety of email clients to make sure everything is looking (and working) as intended. Web-based email clients have an extra layer of complexity here as they render differently in different browsers.

Why Does my Invitation Email Look Great in Apple Mail and Gmail, but Not in Outlook?

While Outlook 2000-2003 uses Internet Explorer (IE) as a rendering engine, Outlook 2007, 2010 and 2013 actually use Microsoft Word to render emails.

As Microsoft Word is primarily meant for print design, it tries to render the HTML code of your invitation email like it would in its Print Preview. This ultimately results in the display not coming out the way you may have originally designed and tested it.

Please note: Outlook hyperlinks appear in blue color text and underlined by default.

Some common image-related issues with email rendering in Outlook include:

  • GIFs not being supported Outlook 2007, 2010 and 2013 do not support GIF images in email messages. Instead of showing the animation, these versions will only render the first frame of the GIF, so ensure that the first frame conveys the message you would like to get across to your guests

  • Background images not being displayed Background images may not appear at all, or may be broken when viewed, in the 2007, 2010 and 2013 versions of Outlook. (Please note that background images not showing is not exclusively restricted to Outlook but can also happen in other email clients)

  • Images being blocked Microsoft Outlook is configured to block automatic picture downloads from the Internet by default. However, the email client will still automatically download images from trusted senders. If your guests add your email address or company domain to their Safe Senders List, any images inside your invitation email will display for them automatically

If Guests are Using a Dark Mode Theme on their Device, What Will the Email Look Like?

Emails will render differently in dark mode from one email client to another. Some email clients let you change their UI to Dark Mode, but that does not impact how your HTML email is rendered. Whether the app is set to Light or Dark Mode, your email will look the same (i.e in Apple Mail with emails being opened using either the iPad mail app or the iPhone mail app).

To optimize emails for dark mode, you can follow the below tips:

  • Use PNGs with transparent backgrounds Using transparent PNGs for your images allows the background color change in dark mode to appear seamless. This way, whatever color the background color changes to, it will be reflected in the background of the image.

  • Use white strokes or add a translucent outline to black design elements or logos This is an effective way to ensure your emails are readable in dark mode. The white stroke will not be visible in light mode, but it helps it stand out when viewed in dark mode.

There is also the option to design and code your own Dark Mode theme. However, keep in mind that one design will not fit all email clients, and an email that looks great in one client might look broken in another as there are various ways a Dark Mode email client might deal with your code.

Does zkipster Have any Control over How my Invitation Emails are Being Displayed to my Guests?

Unfortunately, zkipster ultimately has no control over the way that Microsoft Outlook or other email clients render HTML emails. To help you check what your online invitation will look like before it lands in someone’s inbox you can, however, try external email previewing, testing and rendering tools (such as Litmus or Email on Acid, for instance).

Did this answer your question?