​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.).

For further information regarding media queries and supported email clients, please visit https://litmus.com/help/email-clients/media-query-support/​.

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:
  1. Keep email layouts as simple as possible.
  2. Rely on table-based layouts instead of using complex CSS
  3. 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.
  4. 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.
  5. 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. 
  • Please check Email Formatting in Microsoft Outlook for details on how to resolve the most common Outlook compatibility issues.
  • http://www.emailology.org/#3 - This contains HTML and CSS code that is universally supported by the most popular email clients so you can compare your existing code against this resource.
  • http://www.emailonacid.com/ - Useful email testing tool that will compare your HTML emails in different email clients and offer code suggestions.

Image does not stay aligned after receiving message

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.

NOTE: 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?