Outlook Mail is the new “Universal App” and default email client on Windows 10 and Windows 10 Mobile. It shares a somewhat familiar Microsoft Word engine core similar to its desktop predecessors. Earlier on in the year I wrote about the Outlook Mail app when it arrived in preview form via the Windows Insider programme. What I found was a very different email experience to what was previous seen on Windows 8/8.1 and Windows Phone 8/8.1. Months later and with Windows 10 (PC) officially released, new Windows 10 Mobile devices now in the market and with pre-existing Windows Phone 8.1 devices being prepared to receive the upgrade very soon, how have things changed? In this article I’ll cover the problems with Outlook Mail and what I think Microsoft need to do to fix it.
You might of heard of bulletproof guides for background images and buttons in email design, but what about the basics of using images? Due to varying level of HTML/CSS support in email clients, embedding images in email templates isn’t as easy as you’d think. I’ve decided to compile all of the information and potential problems with images in email design and how to maintain compatibility with various email clients.
One of the many layout techniques for email is floating tables. This technique basically provides similar behaviour to the float CSS property but is supported pretty much everywhere. Problem is that pesky email client Outlook will attempt to ruin your party with its poor CSS box model. Sadly Outlook and table widths just don’t add up, which introduces problems like content appearing below its designed place as well alignment issues. Thankfully however, thanks to Mike Ragan from Action Rocket, there’s a cool new way to workaround this issue.
Ever wanted to use max-width but then realised the lack of support in Outlook and older IE clients is going to ruin that plan? Well with some conditional comment magic, you can use max-width in your email templates with a graceful fallback for Outlook/IE which will work across the board. How you may ask? Keep reading on to find out how!
So after my write up over on the Campaign Monitor forums about the problems with DPI scaling with HTML email on HiDPI devices i.e. my XPS 15 9530, a lot of development has been made in understanding why HTML emails are rendering poorly in Outlook with large scaling factors used. Once again, community forum member Michael Muscat provided a very detailed write up on the situation originally over on the Litmus Community forums covering some of the information I discovered, along with some new workarounds and one of the most critical fixes being for images, which we’ll get into shortly. Big thanks to him for this new information that’s come to light.