Skip to main content

Email Display Issues

Updated
The Symptom: You send an email that looks perfect in Email Designer (or the standard email editor), preview it, and have it proofread by staff — and then members start responding: "Why does this look weird?" "Why are the images so large?" "Why is the formatting off?"
The Root Cause: Every email client — whether a browser-based protocol or a desktop app — uses unique methods to interpret the HTML code behind your emails. This can also be affected by the email client's version or the recipient's underlying operating system. GrowthZone can format emails correctly, but it cannot control how end users' email clients render them. There is no single solution; only best practices that mitigate the problem.

The Fix

Apply these best practices before sending to reduce display issues for recipients:

  1. Resize images prior to insertion. Resize images in an external program before inserting them into your email. This reduces the code needed to render the image, lowers the email's overall size (for faster loading), and eliminates the need for browsers and email programs to interpret additional height/width code — reducing potential rendering errors.
  2. Stick with web-safe fonts. Both the standard email editor and Email Designer intentionally offer a limited selection of fonts. Using web-safe fonts like Arial and Times New Roman ensures all recipients have access to those fonts and your text displays exactly as intended.
  3. Paste as Plain Text. Copying from Word or web pages includes hidden code that can interfere with online text editors. Always paste as plain text when inserting content from outside sources. (Windows: Ctrl + Shift + V, or right-click and select "Paste as plain text")
  4. Use responsive design. Email Designer lets you preview your message in desktop, phone, and tablet modes and automatically adjusts content. In the standard email editor, use a table to restrict content width. For most messaging, 800 pixels is sufficient for content and banner images.
  5. Provide a view-in-browser option. Most modern browsers interpret email code similarly, so giving recipients a browser link is a reliable fallback.
    • In Email Designer, enable the Make available as a webpage option when sending to include a link at the top of the email that opens in a web browser.
    • Many associations create a PDF of the message or newsletter, upload it to Cloud Drive, generate a sharing link, and include it so recipients can view the full content.

A note on Outlook: Outlook is the most common culprit for email display issues. Depending on the version, Outlook may use Internet Explorer or even Word as its HTML decoder — not a proper browser — which can cause consistent rendering errors across its various forms (desktop, Android/iOS apps, etc.). These same issues are reported with Constant Contact, MailChimp, and other HTML-based email editors. Fixing Outlook rendering requires manual HTML code work, which is complex and generally defeats the purpose of a graphical email editor.

Helpful external resources:
Medium.com: 5 Tips to Ensure Your Emails Display Properly
ActiveCampaign.com: Common Email Display Issues with Outlook

Verification: How to know it worked Send a test email to yourself using both a browser-based email client and a desktop client (ideally Outlook) to compare rendering. If the email looks correct in both, it is likely to display well for most recipients.

Related articles