What you'll learn
Why emails sent from SiteVibes can render differently in Microsoft Outlook compared to Gmail, Apple Mail, or other inboxes, and what you can do to reduce the gap.
Why Outlook renders emails differently
Most modern email clients use a browser based engine to display HTML, so they interpret CSS in a fairly predictable way. Outlook is the exception.
Desktop versions of Outlook (2007 through the current Microsoft 365 desktop app on Windows) use Microsoft Word's rendering engine to display email content, not a browser engine. Word was built to lay out documents, not web pages, so its support for common email CSS is limited.
Think about it this way: Word is great at formatting a page, but it was never meant to render a webpage. When it's asked to do that anyway, layouts that look clean in a browser preview can shift, collapse, or lose styling entirely once they hit an Outlook desktop inbox.
Note that Outlook on the web, Outlook for Mac, and the Outlook mobile app all use different, more modern rendering engines and generally behave closer to what you see in a browser preview. The rendering issues below are specific to the classic, Word based version of Outlook for Windows.
It's also worth calling out the new Outlook for Windows, which Microsoft has been rolling out as a replacement for the classic desktop app. It drops the Word rendering engine entirely in favor of WebView2, a Chromium based engine, so it handles CSS much closer to Outlook on the web and other modern clients. If a recipient has switched to the new Outlook, most of the rendering quirks in this guide won't apply to them. Microsoft has said it plans to retire the classic Word based Outlook for Windows in October 2026, so this gap should keep closing over time, though plenty of business and enterprise users are likely to stay on the classic version until then.
Common rendering issues in Outlook
When a SiteVibes email lands in Outlook desktop, keep an eye out for:
- Background images inside divs or table cells not displaying
- Images appearing stretched, squished, or oversized
- Rounded corners, box shadows, and text shadows not rendering
- CSS positioning (float, absolute, relative) being ignored
- Padding and margin rendering inconsistently, especially around buttons and images
- Animated GIFs displaying as a single static frame instead of animating
- Background colors on nested elements rendering incorrectly or not at all
Because Word's rendering behavior isn't governed by a published spec the way browser rendering is, there's no definitive checklist that guarantees a perfect match across every Outlook version. The tips below will get you meaningfully closer, but some visual drift between Outlook and other inboxes is normal even for well built templates.
Tips for reducing Outlook rendering issues
Set explicit width and height on every image
Unsized images are one of the most common causes of stretched or oversized graphics in Outlook. In the SiteVibes email editor:
- Select the image block.
- Under the image's layout settings, enter a fixed width in pixels rather than leaving it set to auto or a percentage. For a full width image, this is usually the same as your template's content width (often 600px, but check your template's Styles panel to confirm).
- Save the block and move on to the next image in the template.
Do this for every image in the email, including small icons and logo images, not just hero banners.
Don't rely on GIFs to carry your message
Since Outlook desktop shows only the first frame of a GIF, avoid designs where the animation itself communicates something important (a countdown, a product reveal, a call to action that only appears mid loop). Pick a first frame that still makes sense as a standalone static image, or use a static image for anything business critical.
Avoid background images as the sole source of information
If a background image contains text or a call to action, add a fallback background color and, where possible, keep key text as live HTML text rather than baked into the image. That way Outlook recipients still get the message even if the background image itself doesn't render.
Keep layouts simple where you can
Simpler table based layouts with minimal nested divs tend to hold up better across Outlook versions than complex, deeply nested designs with a lot of absolute positioning. If a template is design heavy, expect to spend more time checking it specifically in Outlook.
How to check how an email will look in Outlook
SiteVibes doesn't currently have a built in inbox preview tool that shows rendering across different email clients. The most reliable way to check Outlook rendering today is to send yourself a live test email and open it directly in Outlook.
- From the email builder, use the send test option to send the email to an address you can open in Outlook desktop.
- If you have access to more than one Outlook version (for example, a Microsoft 365 desktop install and Outlook on the web), send to both so you can compare.
- Open the test email in each inbox and check images, buttons, spacing, and background colors against how the email looks in the SiteVibes preview.
- Make adjustments in the builder, most often to image sizing, and send another test to confirm the fix landed.
Because this is a manual check rather than an automated multi client preview, it's worth building it into your process for any campaign that's design heavy or going to a large list, rather than only checking after you get a complaint.
Understanding how much of your audience uses Outlook
Before investing a lot of time optimizing for Outlook specifically, it's worth checking how many of your recipients are actually opening in it.
- Open the campaign or flow email's performance report in SiteVibes.
- Check the email client or domain breakdown in the engagement metrics.
- Look at what share of opens are coming from Outlook or from corporate domains that are likely to be running Outlook desktop internally (this is common with B2B focused sends or lists with a lot of corporate email addresses).
If Outlook makes up a small slice of your opens, a few small image sizing fixes are usually enough. If it's a large share, it's worth treating Outlook as a primary target when you're building the template rather than an afterthought you check at the end.