In this article
Outlook can be a 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 product rendering HTML and CSS code. Recall any memories of your Word document not aligning well with text and images or being finicky with margins? Those same struggles can carry over into Outlook email rendering. Knowing a few design tricks can help save the day.
Outlook will render 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.
- Use Word with styles set up to copy/paste text with formatting applied. Learn more.
Outlook is particularly troublesome when rendering side by side content. A 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 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.
Additionally, if you insert several images side by side in a text block, you might need to add a forced line break to display the images on separate lines or Outlook PC might read the images as a single line and then offset the whole design.
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.
Percentages for width and spacing
Outlook has trouble rendering percentages for widths or spacing (margin and padding). Always use pixels in these fields to help Outlook behave.
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.
Outlook sometimes has more trouble rendering grouped blocks. This is usually due to styles set on grouped block, similar to the other issues mentioned in this section (borders, long links, margin or padding settings etc). Try using single blocks instead to achieve the same design.
Extra hidden content in code
Rarely, extra code stays in the email 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 bottom 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 the editor you might be working with an email 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 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.
Outlook PC has a couple issues with rendering animated GIFs. First, in Outlook PC 2007+, animated gifs do not play. A workaround is to make sure your opening frame is static.
Microsoft added support for animated gifs in Outlook 365 (released in 2019)! However ... with the new support there are new problems. Outlook is having trouble scaling the animation to the correct proportion which can make the gif look stretched. Check your Outlook PC width and make sure your image width or your PC width is adjusted to match. For example, if your gif is 800px wide, adjust your Outlook PC width in the Settings tab to 800px width as well. In some cases, only 600px width for the email and gif may work best.
Side Note: Outlook Mac does support animated GIFS
Are you seeing thin horizontal 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.
Outlook PC has trouble rendering some of the design trends we’ve come to admire in modern emails. Here’s a list of design options that Outlook PC can’t render. Keep in mind that most subscribers are reading your emails on webmail email clients and mobile. Design for the most common places and let the fallbacks display where needed.
- Custom fonts can't be rendered. Outlook PC will use web-safe fonts in your Font-family font stack.
- Rounded buttons can’t be rendered. Outlook PC will use square buttons.
- Background images can’t be rendered. Outlook PC can display background colors. Try setting a background color on your container to display instead.
- Background gradients can’t be rendered. Outlook PC can display container backgrounds. Try setting a background color on your container to display instead.