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