Marketing email templates rendering and apearing different on Outlook Classic and new Outlook format

Question

Marketing email templates rendering and apearing different on Outlook Classic and new Outlook format

Brian Johnstone 20

We have a problem with amarketing email template misalignment when viewed in Outlook Classic, but appears OK in the new Outlook. As not all clients will have moved to the new outlook , we need a solution to suit both, can you help?

0 comments

Answer accepted by question author

Roebe Ta 1,110 Independent Advisor

Hi @Brian Johnstone,

This behavior is expected due to the differences in rendering engines used by Outlook Classic and New Outlook. Outlook Classic uses a legacy rendering engine that supports HTML and CSS differently from the modern rendering experience used by New Outlook. As a result, email templates can appear correctly in New Outlook while displaying alignment or formatting issues in Outlook Classic.

Microsoft documentation notes that email clients interpret HTML differently and that some Outlook Classic rendering limitations cannot be fully resolved. For improved compatibility, Microsoft recommends using simpler table-based layouts, inline CSS, avoiding complex background images, and thoroughly testing templates across email clients.

You may also wish to review and test the suggestions provided in the AI-generated response on the thread, as they align with Microsoft's general guidance for improving rendering consistency between Outlook versions.

If the rendering differences are causing significant business impact, I encourage you to submit feedback and upvote existing feature requests to show demand from the community at Outlook · Community. The Product Team is in-charge of the feedback site, and they are constantly checking the comments and feedback from our customer. Many features have been developed or improved based on users' comment. 

After submitting your request on the site, you can return here and paste the link into this thread. That way, other users who visit this discussion can click the link and upvote your request to help bring more attention to it.

You're not alone in experiencing this issue. Other customers have reported similar rendering differences between Outlook Classic and New Outlook when working with HTML email templates: Improve .OFT rendering consistency between classic Outlook and new Outlook · Community

If this issue is important to your organization, I recommend:

Upvoting the relevant feedback post.
Adding a comment describing how the issue impacts your workflow or business processes.

In the meantime, you may also want to check the Microsoft 365 Roadmap for updates on upcoming features and enhancements.

I hope this will be improved in the near future.

Note: Please follow the steps in the forum documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

0 comments

1 additional answer

Your answer

Answer 1

Yes. The difference is expected because Outlook Classic and new Outlook do not render email HTML the same way.

Outlook Classic uses a Word-based HTML engine with limited CSS support, while new Outlook supports more modern rendering. For marketing templates, the most reliable approach is to simplify the HTML and design for Outlook Classic first.

Recommended actions:

Avoid editing the generated HTML manually Most rendering issues happen when generated HTML is replaced or modified with custom HTML. If the template was built in Dynamics 365 Customer Insights - Journeys, use the email designer toolbox where possible instead of custom code.
Use table-based layout and spacing In Outlook Classic, margins and padding can render inconsistently. Add padding on td elements in layout tables instead of relying on CSS margins on other elements.
Avoid background images where possible Outlook Classic does not natively support CSS background images on sections and columns. It relies on VML and pre-calculated heights, which can break or become misaligned, especially when dynamic text is present. Solid background colors are more reliable.
If background images must be used, avoid dynamic-height content on them Dynamic text such as personalization tokens can cause the background image height to be cut off or misaligned in Outlook Classic. There is currently no known solution for that specific problem.
Use Outlook-safe line-height settings Outlook Classic renders line height larger than web clients and does not support numeric values like line-height: 1.5 reliably. Apply line-height to <p> elements, not <span>, and use percentage values such as 150%.
Simplify buttons and linked elements Outlook Classic can misrender complex button structures and may add unwanted underlines to links. Keep buttons simple, avoid layered structures, and add this CSS if links or buttons appear underlined unexpectedly:
```
   a { text-decoration: none; }
   u a { text-decoration: underline; }
```
For images that shift or stretch, set width explicitly If Outlook Classic expands a table because image dimensions are not known, set image width to 100% instead of auto.
Keep the email width conservative Keep the maximum email width between 600 and 800 pixels to reduce clipping and layout issues across clients.
Test the final rendered email in both clients Validate the template in Outlook Classic and new Outlook before sending broadly. Outlook Classic has known limitations that cannot always be fully resolved.

Important Outlook Classic limitations with no known fix:

Background image height can be inaccurate when dynamic text is present.
Divider height is limited to 10px.
Background images can break after forwarding.

If the current template already uses custom HTML, nested containers, background images, rounded buttons, or modern CSS, the practical fix is usually to rebuild the affected sections using simpler table-based HTML and solid backgrounds.