JKLooking for Examples of Broken Emails on Desktop Outlook
Hey guys, got a request from the Outlook Team. They are looking to address our qualms with Outlook rendering and would like to start with examples of bad outlook rendering and high priority HTML/CSS support.
For this thread I'd like to focus on examples of broken emails. See this other thread for the HTML/CSS discussion.
When you come across emails that are broken only in Outlook:
Do a screencap of the email breaking in Outlook next to a one of the email looking fine in another client (You can host it on imgur and post it here using the markdown
)Explain briefly what you feel is causing it. If this was caused by EAS, please note it as well.
Provide the source if possible using Litmus Builder or CodePen
If you have prior examples of your OWN designs breaking just in Outlook, feel free to include it as well - just to demonstrate how hard it is to get it things right for outlook.
I'm aware of the ACID test, and will send it over to the team but I think real examples work best to demonstrate the problems.
This is my contribution to hammer the point across that Outlook Mail needs changing on Windows 10. Everyone has mostly been posting examples of previous versions of Outlook, well let me share the situation as of right now!
My screenshot examples were taken on a real Lumia 950 XL device, running Windows 10 Mobile Build 10586.29. Emails are hideously broken (as if we didn't know that already!). In fact, I'd argue the minimal HTML/CSS used in email on Outlook Mail the better! Plain text or web version is pretty much the only ways you are going to have an enjoyable experience when opening email campaigns right now.
They highlight that DPI is VERY big problem, more so than on the desktop clients, never mind the poor HTML/CSS support we all already know to well.
I've done a side by side comparison with Outlook Mail and Microsoft Edge (web version link) to show the massive difference in rendering. It's pretty damning. I still can't believe Microsoft think that HTML4, CSS 1 and an incomplete CSS 2.1 specification is acceptable in an mobile web application in 2015, nearly 2016!
Note: The screenshots are actual resolution and hence quite large, but I felt this is best way to showcase how horrible the experience is.
Your move Microsoft.
Example 1
Example 2
Example 3
Example 4
Example 5
Great research James! Personally, I'm really glad that it looks as horrible as it does on Windows 10 mobile. With desktop Outlook, emails for the most part look OK so Microsoft had an excuse that as long as their users didn't complain, they really didn't need to deal with HTML/CSS support.
I can't imagine their users wouldn't be up in arms with the state of email rendering in Windows 10. Honestly, I hope designers don't even bother to look for fixes. This way it would force Microsoft's hands to once and for all deal with their Word rendering engine.
Background images! Especially background images with a gradient!
When using a background image, we need to add in a lot of additional code just to display correctly in Outlook 7, 10 and 13. In addition, the standard "bulletproof backgrounds" code does not work if your background is a gradient.
Correct rendering on ALL other major email clients
Outlook 7, 10, 13 Rendering
(aside from the text format, notice the gradient is gone. The text "Fall Beauty Event" is actually part of the background image, so we know that it is using the background image.. just stripping the gradient.)
Here is the code we had to use in order for Outlook to render correctly:
http://codepen.io/anon/pen/Kpqoxw.html
Thank you Tina for kicking it off! These are excellent examples.
Hi Tina,
Fantastic example! Thank you; these images are helpful to tell the story about pain to both you & the user :-)
--Julia Foran, Microsoft Outlook PM
Any updates on this? Rendering is still the same as it was 10 months ago.
Not Recognizing Max-Width or Max-Height styles!
A client has 150,000 plus images where the heights and widths vary and no dimension data could be given to us. They wanted a layout where all images are evenly aligned.
Correct Rendering of code with Max-Height as shown in all other major email clients
Outlook 7, 10, 13 Rendering of code with Max-Height
(Notice the makeup - it cuts off images whose source is larger than the fixed height)
Outlook Rendering in the Solution we end with (horrible.. yes!).
The client did not want to sacrifice the correct alignment in all other email clients, so we created a conditional that only showed the follow layout to Outlook 7, 10 and 13. This of course caused problems for Outlook.com... which is another story altogether :)
Hi Tina - would you be willing to share the source HTML for this example? We would like to use it as a test case.
Hello Julia,
Sure. Here is the final code that includes the separated outlook conditionals. http://codepen.io/anon/pen/pJaWPj
Note that when you use this, you have to add an additional class I called ".mso71013Hide" to ALL tables in the non-Outlook 7,10,13 code. This is because Outlook.com will strip conditionals and try to show both... if you need more information on that, let me know.
Here is an email I received from redditgifts.
Apple Mail 7
Outlook 2013
The first image is laid out with a
float:left, which is not supported by Outlook. The social network links in the footer usedisplay:block,paddingandmarginthat Outlook doesn't interpret correctly.Hi Remi,
Thank you for sending. I also appreciate you including the tags that aren't supported. This visual is helpful & is now included in my deck.
--Julia Foran, Microsoft Outlook PM
I dug through my inbox and posted some choice ones here :)
http://freshinbox.com/blog/gallery-of-outlook-rendering-issues/
So I've got what is presumably the shipping version of Windows 10, here's what my emails are looking like in the Windows 10 Mail app on desktop and mobile (by shrinking the window). I've also included control samples taken with MS Edge (both fluid and responsive for mobile).
Desktop Gallery:
Mobile Gallery:
All of the flybuys emails have been built by my team; these are on the bleeding edge with heavy use of VML, conditional comments, hidden content, screen reader optimizations, background images, bulletproof buttons, retina images, fluid and responsive layouts, images, headers and footers and other miscellaneous tweaks.
I can live with MS Word rendering on the desktop, but here it seems the Windows 10 Mail App has even worse rendering than Outlook 07-13. The text on bulletproof buttons disappears, there are various spacing issues between adjacent blocks of solid color, and it doesn't even reliably load PNGs. You can also click and delete parts of the email as if you were editing it.
While I just resized the mail app window to its smallest size for the sake of producing "mobile" versions, the last time I checked the rendering on the mobile app was exactly the same as the desktop app. Correct me if I'm wrong but it's a complete disaster.
Has there been any progress on this?
Hi Michael,
Yes, it is true that Universal Outlook has work to do in rendering to even get close to how Windows 8/8.1 rendered. The issue with images not scaling with rest of email is known and under investigation.
Can you send me the HTML to these mails so that we can reproduce the issues you list above? These are also great test examples of us with the image issue I mentioned we're looking into.
Thank you for posting!
Julia Foran,
Microsoft Outlook PM
(also - I know I keep repeating this signature and you all probably know where I work, but it is company policy to post with every post :-) )
Hi Julia, is there an email address I can send them to?
Is it possible to share a codepen.io link? That makes it easier for me to share with teammates, see expected behavior, etc.
Hi Julia, I'm happy for you to share it with your colleagues, but I can't post the emails publicly. Can I send the code via email?
Hi Michael, would you mind sending it to Justin Khoo who can pass it along to me? justin ‘at’ freshinbox.com
Thanks, Michael. Justin shared them with me a few days ago. Wanted to let you know that I received the mails and that we are looking into it - this is certainly not expected behavior.
Julia Foran
Microsoft Outlook PM