Outlook is easily the most troublesome email client. The trouble stems from Outlook (2007+) using Microsoft Word as the rendering engine. Next time you're using Word for a writing project think about this same product rendering HTML and CSS code. Recall any memories of a Word document not aligning well with text and images? Or being finicky with margin? Well those same struggles carry into Outlook email rendering.
Unfortunately Outlook's limited support for web standards results in many frequently asked questions like 'why does my email look broken in Outlook?' Knowing a few design tricks can help save the day. In this article we'll review some common Outlook rendering issues and how to resolve those.
Topics covered in this article:
Outlook will rendering text formats unexpectedly when there is extra code (span tags etc) in the text HTML. Most often bad code is introduced into a text area when copying and pasting the text from an outside source.
Here are some ways to make sure your text HTML avoids bad code:
- Typing text into a text block manually (instead of copy/paste)
- Copy/paste your text and then click 'clean' in the text block to remove all HTML formatting copied over (highly recommended!)
- Use the Base style in the STYLESHEET > ESSENTIAL STYLES > GENERAL STYLES. Learn more about your General Styles > Base style here.
- Use Word with styles set up to easily copy/paste text with formatting applied. Learn more.
Outlook is particularly troublesome when rendering side by side content like two images side by side.
A quick trick is to add a Container to your design and then put other content blocks inside the container. The container will create a table and will help Outlook align images and blocks.
A very common issue in Outlook is when the email is pushing out on the right side. There are several reasons this could be happening.
Are there any long words or email addresses displayed in the email? Long words will push out the boundaries of the HTML because they don't automatically hyphenate or wrap to the next line like shorter words with spaces do.
For example, a long email address like this might cause an issue if it inside a narrow column of text:
Instead of showing the entire address, use shorter words:
Text areas with large images inserted
Are there any text blocks with large images inserted? A text block will always use the exact size of the image uploaded into it. Uploading a wide image that extends beyond the width of the text area will push out the boundaries of the HTML.
Buttons with no-wrap applied
Are your buttons using the no-wrap class? The no-wrap class is designed to keep Outlook from wrapping text in a button. It's a great feature if you like your button text to stay on one line. Long button text though can lead to the button pushing out the right side of the email. Keep button text short to avoid this issue.
Do you have a border around a container, text, or image block? Outlook PC often has trouble with borders, especially if borders are set to 0px or used as spacing (like padding or margin). Try adjusting the border or removing it to see if this helps.
Extra hidden content in code
Rarely, extra code stays in the template causes the side to push. If you've reviewed all the other points above this may be the cause. Email us to help sort it out.
Outlook sometimes adds a white space at the button of the email (below the footer). If this happens the best way to work around the white space is to put all your blocks into one Container and set the STYLESHEET > Email Background > Container to the same color as the Email Background container color.
Outlook renders email at a max width of 600px wide. In Modern Editor you might be working with a template that is 800px wide. Keep in mind this width change as it could be the cause for text and images rendering differently than the preview in Modern Editor suggests it will.
If needed, you can adjust the width of your email in Outlook. Learn more.
Outlook actually has an image height limit of 1728px and crops from the top down. Next time you see an image cropping oddly, check the total height of the image.
Are you seeing thin horizontal white lines in your design? This is actually a bug introduced by Microsoft in Outlook 2016 (PC). Below are some links that describe the issue. This issue has been reported to the Microsoft Outlook team.