Problem #2: What’s going on with my images? ĭoing this will allow your px widths to be interpreted correctly as you’d expect. For HTML width and height attributes applied to block level tags like and you simple need to declare a matching CSS width and height property.
Now you know your enemy a little better, but how can we fix this? The fix is actually rather simple. For example, 10pt 150% desktop scaling would be equivalent in size to 15pt 100% desktop scaling.
Desktop scaling is applied to relative units like “pt”. All other “px” values are converted into “pt” values. All “px” widths and heights defined in VML shapes are perceived as pixel values. All widths and heights defined using HTML attributes are perceived as pixel values. Taking this nice summary from Michael, this is how Outlook looks interprets widths in various forms. Outlook handles HTML px values differently with higher DPI settings You’ll also notice that the black header block isn’t squished up, why? Simple, because the width value is 100% which is a relative value. Actually, its half the size it should be. You’d agree that the width is far too small right? Well would you be surprised to learn that the width value defined in this email is 580px? Its true, but any pixel guru’s out there knows that’s not 580px visually. Take the Email on Acid example email below (by the way, I’m not hating on you guys and gals or anything, you just landed in my inbox and provided me with a perfect demonstration!) 
You will notice emails that end up in the inbox on such a device will appear squished up. Welcome to the first problem of HTML email with HiDPI in Outlook. Problem #1: Emails that use pixel values for width/height
Images don’t render correctly when factors greater than 96 DPI are usedīecause of this font sizes often appear out of proportion compared to rest of the email. Width and height HTML values in pixels on various elements are not rendered correctly. The problems with Outlook and DPI (summarised) Even older versions of Outlook may also be affected, but their usage statistics are rather low, so focusing on these clients makes more sense. The common dominator here is all these versions of Outlook use Microsoft Word for rendering email, so while they severely lack any HTML/CSS standards, they virtually render email in the same way, meaning the problems with DPI affect all three versions. Big thanks to him for this new information that’s come to light.ĭPI scaling in general terms is a known problem in Outlook, but on HiDPI devices its even worse and most of the HTML email campaigns I have received have been broken in some way that affects the layout massively.įor testing and experiments I used the following Outlook clients versions under the following conditions: 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. 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. 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.
0 kommentar(er)
