It's happened to everyone- you send out an email and it looks perfect in Email Designer (or even the standard email editor!), you've sent a preview to yourself, it's been proofed by someone else on staff, and you send it out. Then you start getting hit with emails from your members- "Why does this look weird?" "Why are the images so large?" "Why is the formatting off?"
While GrowthZone does its best to make sure your emails are formatted to your preference, what we can't control is how the end users (your members) view them. Every email client- whether a browser-based protocol or an actual desktop app or program- uses unique methods to interpret the code behind your emails. Sometimes this could even be affected by the version of the email client being used, or the underlying operating system (and/or version of the OS) of the recipient.
There is no one solution to recipient email formatting issues; we can only follow best practices and mitigate them.
- Resize images prior to insertion. Yes, this requires some additional work outside GrowthZone, but the benefits outweigh the effort. It reduces the amount of code needed to "see" the image as well as reducing the size of the email, making your messages load faster. It also eliminates the need to interpret additional height and width coding on the images, reducing possible errors in interpretation by the browser or email program.
- Stick with web-safe fonts. By design, both the standard email editor and the Email Designer have a limited amount of fonts available. While it might not look as fancy as you'd like, using web-safe fonts like Ariel and Times New Roman will ensure that everyone has access to those fonts and your text will display exactly as intended.
- Paste as Plain Text. Copying from Word or web pages always contains "hidden" code behind the text and it can really mess with online text editors in general. Best practice is to always use plain text when copying text into an email message from outside sources. (On Windows: Ctrl + Shift + V or right-click and select "Paste as plain text")
- Use responsive design. Email Designer has the option to preview your message in desktop, phone, or device modes, and will adjust your content automatically. With the standard email editor, you may want to use a table to restrict the width and placement of your content. For most messaging, 800 pixels in width should be sufficient for content and banner images.
- View in a browser. Most modern browsers will interpret email code similarly, so giving recipients the option for browser viewing is a good option.
- In Email Designer, enable the "Make available as a webpage" option when sending out the email to include a link at the top of the email which will open in a web browser.
- Many customers will make a PDF of the message or full newsletter, upload it to their Cloud, create a sharing link, and have recipients use that to view the full content.
Unfortunately, Outlook overall is the general culprit of these issues, whether using the standard GrowthZone email editor or Email Designer. From what we understand, depending on the version of Outlook, it may be using Internet Explorer or even Word as it's HTML decoder, not a proper browser, so there always seem to be consistent viewing errors when Outlook is used in any of its various forms (desktop, Android/iOS app, etc.). We've seen these issues reported in Constant Contact, MailChimp, and other HTML-based email editor forums across the internet. (Run a Google search for "outlook not displaying email content correctly"- the results are very telling.) The option to ensure "perfect" display in Outlook involves working with the HTML code manually, and while possible, if you don't know/are familiar with HTML it's quite a chore and overall defeats the purpose of using a WYSIWYG (graphical) email editor of any kind.
Here are a couple articles for some tips on getting emails to display correctly:
Medium.com: 5 Tips to Ensure Your Emails Display Properly
ActiveCampaign.com: Common Email Display Issues with Outlook