Content in email displays differently when using different email clients

Different email clients, for example Microsoft Outlook, Gmail, Yahoo! Mail, may not display email messages in the same. You want to know why the content shows differently and if there's anything you can do to make it look the same.

Article
Number:52033

Products:

Blackbaud_CRM

Blackbaud_Internet_Solutions

Blackbaud_NetCommunity_BBNC

Blackbaud_Online_Express

Blackbaud_Sphere

Luminate_Online

​Each email client renders HTML and CSS differently, which causes the email to look differently in certain providers. HTML emails can appear incorrectly when viewed in some email clients. For example, an email that's designed in the NetCommunity WYSIWYG editor may look completely different when it's viewed in Outlook. This is not due to an issue with Blackbaud NetCommunity or the Editor. It is a symptom of the variety of email clients' inability to agree on how individual style and design elements should be rendered. Even the best designed email message/template may not appear identical in all email clients, online (Yahoo!, Gmail, Hotmail) or offline (Outlook, Thunderbird, Lotus Notes). Much of this is due to the email client developer's decisions related to security within the client program, so each email client has its own way of interpreting what is safe to display and what is not.

The instructions coded into emails that inform devices and email clients (apps / programs) about how an email should look/behave rely on a CSS feature called media queries. If the email program being used by an email recipient doesn't support media queries, then that email program won't respect any instructions coded into the email about email formatting/responsiveness.

Support for media queries varies by email apps/programs. In some cases, even though an email client doesn't support media queries, it might still have its own proprietary mechanism for trying to render an email in the "best looking way" that it can (including things like increasing font size to a readable size, etc.).

Another example, background images may not appear in Gmail, Outlook, or Live Hotmail. A common practice for email designs which include background images is to layer a regular image on top of the background image wherever possible. Another common example revolves around text wrapping around images.

The following best practices are proactive ways to manage email design compatibility across different email clients. To maximize compatibility, the following best practices are encouraged:

Keep email layouts as simple as possible.

Rely on table-based layouts instead of using complex CSS

Take measures to allow "failing gracefully". For example, if you are using white text against a dark background image, if an email program fails to show the background image, the white text will likely be shown against a white background. To prevent this, set a background color for the HTML element that contains the text that is similar in color to the background image.

If you choose to use CSS layouts and style, make sure to apply inline styles (i.e. the style attribute is applied inside the opening and closing < > for the opening HTML element tag). Many email readers will ignore any CSS that's not presented inline.

Once you have a base email design/layout that works consistently across most email readers, use that email design as a template from which to build other emails.

There are many HTML tags and CSS attributes that Outlook simply doesn't support.The process of fine-tuning emails to look perfect in MS Outlook can be tedious, and it may be worth referencing stats on how many recipients actually open emails in Outlook. This is certainly something to consider before investing large sums of time troubleshooting Outlook formatting issues. That being said, here are some additional resources that might be helpful in designing HTML email messages.

Note: We provide links to third-party websites in an effort to help you resolve your issue. We are not responsible for the information on third-party websites and we cannot assist with implementing resolutions from these websites.

Blackbaud support cannot troubleshoot email design. If your organization does not have a user who can assist with editing the html of an email message, you may contact your account manager to discuss arranging a billable service with our Professional Services team. How do I contact my account manager?

Was this article helpful?

Thanks for your feedback! Did this solve your issue?

Comments (optional):

Thanks for your feedback!

We're glad it was helpful but sorry it didn’t solve your issue. If you need assistance, click Chat with Support below.

We’re sorry to hear that. Please tell us why.

I don't like how this works.

The answer is confusing.

The answer didn't match what I was searching for.

Additional Comments (optional):

Thanks for your feedback! If you need assistance, click Chat with Support below.