CATEGORY: DesignNews
The future of email rendering is on the horizon with the advent of the new Outlook for Windows update. This significant development is expected to revolutionise how developers approach HTML layout, marking a shift from the outdated, Microsoft Word-based rendering engine to a more streamlined, browser-like experience.
Legacy Outlook and its limitations
In the past, the Outlook desktop app has frequently been a topic of discussion in email marketing circles due to its use of the Microsoft Word rendering engine for HTML emails. This method led to inconsistencies in HTML rendering, as Word does not interpret HTML in the same way as web browser does.
Here are some issues you might come across with Outlook's display:
Different looks:
When you send an email to someone using Outlook, it might not look the same. Outlook has limited support for modern web design, so things like layout, colours, and styles may not appear correctly.
An example of this could be the inconsistency within button display. Rounded buttons are typically created using HTML and CSS which allow for customisation. However due to Outlook’s rendering engine being less advanced it cannot allow this customisation to take place. This can cause the button styling to appear differently and lack elements of the original intended design.
For e-shot users, a switch within the design tool can be enabled to provide the best possible button display on Outlook.
Another example of a commonly experienced design issue is with the rendering of bullet points within an email design. When creating a design with bullet points, you typically use HTML and CSS to style the content. In some cases, if the bullet points are not closed off correctly in the code, Outlook can misunderstand the intended design and add an extra bullet point at the end where it shouldn't be.
For e-shot users, you will need to put your cursor on the end of your last bullet point and press the enter key twice. This will then close off your bullet points and avoid this issue.
Image handling:
By default, Microsoft Outlook is set to prevent automatic downloading of pictures from the Internet. Although, you have the option to allow the download of pictures in each email that you think is safe.
Outlook 2023 will block or disable external images by default for security reasons which mean the user will need to enable image display in order to see certain images. This will then automatically download the images form that specific sender. We have some guidance on this in ourdedicated help article.
Legacy Outlookalso need a specific set of instructions in the code to rotate an image correctly. This can cause an issue when using certain types of digital camera as the image file does not include the necessary meta details which determine the orientation. So, when the image is added to the email, without these important instructions, the image will display on its side within the email.
The Outlook 2023 update uses CSS to understand how to rotate the image correctly without the reliance on the image file metadata.
Fonts:
LegacyOutlook only supports a limited number of fonts, typically those present in Microsoft Word. When an email with a non-standard font is viewed in Outlook, it may substitute the original font with the fall-back or default font.
Using a font that is not expected in an email design can create problems with consistency and impact the desired look. When different font sizes are used, it can affect the alignment and the space taken up by the text, causing issues.
Structure:
Imagine you want to create a visually appealing email with a layout that includes side by side elements.In HTML, you can easily achieve this by using CSS to create div elements and apply styling to them.
In an HTML rendering engine, the div elements will stack neatly on top of each other, creating the desired layout. You can control their positioning, size, and spacing using CSS properties like display, position, and margin. This allows you to design a visually appealing email with a clear separation of sections.
However, in Legacy Outlook, the stacking of boxes may not be preserved. The Word rendering engine has limited support for CSS and may interpret the HTML and CSS code differently. As a result, the boxes may not stack properly, causing them to overlap or appear jumbled.
Code tested:
Legacy Outlook:
New Outlook:
Outlook 2023 update details
Microsoft has taken a leap forward by introducing a major change in the new Outlook for Windows. The upcoming version employs a browser engine for HTML rendering, aligning it closer to the web version of Outlook. This move is in line with Microsoft's objective of achieving consistency across their applications, making it a welcome change for HTML email developers.
Read More about the new outlook here
What does this mean for email marketers?
Outlook finally updating its rendering engine, is a change the email community has been waiting for. The problem for many email platforms in the past was that outlook rendered emails differently to every other platform which used web-based HTML. Creating emails that are supported across many inboxes will now be easier to achieve.
The new outlook will be able to render high quality emails which require less code than before, reducing the testing process for email developers as there is more consistency between clients.
Accessibility improvements
Assistive technologies also interact differently with the current version, resulting in known issues like links inside VML (proprietary mark-up) not being keyboard accessible. With the new Outlook, audiences will benefit from more accessible HTML emails, allowing more users to consume the content of the email.
Outlook 2023 update has not completely taken over yet.
Microsoft is known for providing ample time for customers to adapt to changes, so even after the new Outlook for Windows is readily available, customers may still have the option to use the older version for the transition period. Be aware of this as this means marketers cannot assume everyone is using the new outlook quite yet, so keep an eye on your campaign reports to understand the transition within your email audience.
