Dec 31, 2017 I purchased a new MBP 15.4 in 3/2017. I have MSO for MAC Home & Student 2011 installed software. I upgraded my OS in 11/2017 from MACOSSierra 10.12.6 to MACOS High Sierra 10.13.1. My excel workbooks stopped working-i.e., not compatible. I downgraded my OS back down to MACOSSierra 10.12.6 so I could continue to use my excel financial worksheets.
Outlook 2007 was released with less CSS support than Outlook 2003. A major step back for HTML email design. Mail was released with better support for CSS, a positive sign to say the least! Windows Live Mail replaced Hotmail and mixed some CSS support in the process. Read the report. Jun 27, 2018 I purchased a new MBP 15.4 in 3/2017. I have MSO for MAC Home & Student 2011 installed software. I upgraded my OS in 11/2017 from MACOSSierra 10.12.6 to MACOS High Sierra 10.13.1. My excel workbooks stopped working-i.e., not compatible. I downgraded my OS back down to MACOSSierra 10.12.6 so I could continue to use my excel financial worksheets.
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.
DPI 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.
For testing and experiments I used the following Outlook clients versions under the following conditions:
- Outlook 2007 (Windows 7 200% scaling)
- Outlook 2010 (Windows 7 200% scaling)
- Outlook 2013 (Windows 8.1 200% scaling)
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. 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 problems with Outlook and DPI (summarised)
- Width and height HTML values in pixels on various elements are not rendered correctly
- Images don’t render correctly when factors greater than 96 DPI are used
Because of this font sizes often appear out of proportion compared to rest of the email.
Problem #1: Emails that use pixel values for width/height
Welcome to the first problem of HTML email with HiDPI in Outlook. You will notice emails that end up in the inbox on such a device will appear squished up.
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’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. Actually, its half the size it should be. 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. We have our first discovery.
Outlook handles HTML px values differently with higher DPI settings
Taking this nice summary from Michael, this is how Outlook looks interprets widths in various forms.
- All widths and heights defined using HTML attributes are perceived as pixel values.
- All “px” widths and heights defined in VML shapes are perceived as pixel values.
- All other “px” values are converted into “pt” values.
- Desktop scaling is applied to relative units like “pt”. For example, 10pt @ 150% desktop scaling would be equivalent in size to 15pt @ 100% desktop scaling.
Now you know your enemy a little better, but how can we fix this? The fix is actually rather simple. For HTML width and height attributes applied to block level tags like <table> and <td> you simple need to declare a matching CSS width and height property.
Doing this will allow your px widths to be interpreted correctly as you’d expect. Score.
Problem #2: What’s going on with my images?
So after figuring out why emails appeared squished, the next problem you’ve probably noticed is the rendering of images isn’t quite right. Problem number two. Image scaling in Outlook is poor when the DPI is greater than the default of 96 DPI. See the comparison below:
Email on Acid email footer in Outlook 2013:
Adobe audition 1.5 free download for mac. Email on Acid email footer in Internet Explorer 11 (View in browser option via Outlook):
To illustrate how width and height values differ with images in Outlook with DPI, here’s an example image at 248px x 68px with the code to go along with it:
After applying the CSS width and height properties to correct the HTML width on the table cell, you can now see how smaller the image is rendered. Notice that both the image and table cell are both the same width and height, but the image isn’t.
Its worth noting here that Outlook isn’t actually modifying the size of the image itself at all. If you were to save the picture from within Outlook it will be the exact size of the original image. It is all to do with scaling.
Outlook can scale images (sort of.)
You may be surprised to learn that Outlook can scale images, but not immediately when it lands on the inbox. From tests the images appear half size in the preview pane, even with images on or off they are drawn incorrectly, however once the images are downloaded and the email has been opened up separately, images do get scaled up. It is however a process that is triggered sometimes so its not reliable. There is also however a very big catch 22 to this.
In order for Outlook to scale images you must not declare any width and height attribute on the image tag itself, otherwise this prevents it from ever happening. This goes against best practice in regards to image in HTML so what do you do? The preview pane problem remains however, images always appear smaller than they should so the answer is relying on Outlook to do it on its own isn’t an option.
Documentation dating back from Microsoft Office 2000 provides the answer (no really!)
This is where Michael Muscat and his experiments picked up where I left off, all of the image based handling discoveries are solely down to him! Outlook can be forced to render the images correctly with some clever XML directives that only Outlook understands. It requires you to make some adjustments to your template first.
Additional XML namespaces:
You’ll first need to amend the root HTML tag in your template to incorporate some XML namespaces that Outlook will need to understand the special directives that are going to be used.
The first part is to enable VML support, what is VML? Its a subset of XML specifically for images and shapes that is supported in Microsoft Office and hence Outlook 2007, 2010 and 2013. While VML isn’t required directly to fix this, Michael did some experiments with VML which helped lead to the discovery below. The second part is to enable the Microsoft Office namespace for use in Outlook.
Mso Conditionals Not Working In Outlook 2014 For Mac Os
Normalise the DPI of images (which is referred as PPI by Microsoft Office):
This is where the magic is, you’ll now need to place this Microsoft Office specific code in the head section of your template, it should be included right before the closing tag of the head.
This snippet will now scale up your images upon landing in the inbox, meaning the preview pane will display the images properly, along with when the email is opened separately making whole email looking more like its 96 DPI counterpart that you probably dreamed of seeing on HiDPI. You’ll notice some quality loss on the images i.e. jpeg, but overall it works well.
Why does this work?!
Well, first of all remember when I said documentation dating back to Microsoft Office 2000 helped solved the problem? I wasn’t lying. In fact Michael said he had help from a complete reference of XML in Microsoft Office over on MSDN to help find a solution. The link is a download for a HTML (ironic) help guide that details various properties dating back to Office 2000. You might not know this, but in order for Microsoft Office content to be potentially usable in webpages (back in the day this is) it supported (and still does) HTML, CSS, XML and VML. Of course there are limitations to the support level for these languages, but this is the underlying factor as to how its possible to use such properties in Outlook.
OfficeDocumentSettings is the containing tag, but in this case it acts as the container for various document properties, don’t forget this is the Word rendering engine so the term document is actually what email is to Outlook 2007 onwards, a Word document. Within the OfficeDocumentSettings tag the following properties can be used, most of them not really relevant:
AllowPNG, Colors, DoNotOrganizeInFolder, DoNotRelyOnCSS, DoNotUpdateLinks, DoNotUseLongFilenames, DownloadComponents, LocationOfComponents, PixelsPerInch, ReadOnlyRecommended, RelyOnVML, TargetScreenSize
The golden nugget in this case is PixelsPerInch, being able to force a specific DPI setting fixes the image problem beautifully. AllowPNG is not strictly required, but potentially by using it you can gain some image quality and decreased file size (and overall image download time).
A caveat for Outlook 2007
Unfortunately sometime after writing this article, I found Outlook 2007 has some behaviour differences when modifying the PPI value. A community member on the Litmus Community member mentioned that this fix didn’t work for her and images were still were still not being rendered correctly in Outlook 2007. Intrigued I did some further testing. What I found is a different behaviour and hence rendering of images when modifying the PPI value.
125% scaling (120 DPI):
- 72 PPI – Enlarges images a lot
- 96 PPI – Enlarges images slightly
- 120 PPI – Images are displayed at the correct size
100% scaling (96 DPI):
- 72 PPI – Enlarges images by a lot
- 96 PPI – Images displayed at the correct size
- 120 PPI – Shrinks images (erm what?)
Compared to the later versions, Outlook 2007 has a different way of handling the PPI with DPI scaling factors, it looks like Microsoft since changed this behaviour, maybe as a bug fix or simply by design, either way however you’ll notice the difference of what each value of PPI does under Outlook 2007.
The inconsistent image scaling factor difference between 100% scaling and 125% scaling (as well as others) means you can’t fix the image scaling problem for Outlook 2007. Because whichever way you go, you will break the appearance for either the normal DPI audience or the higher DPI audience. There is no way to conditionally target any Outlook client by DPI (only by Microsoft Office version). This means by forcing the 96 PPI value, you’ll still find images will be slightly larger than they should be for clients using DPI factors greater than 96, but in my opinion forcing 96 as the PPI will still make things a bit better.
A workaround in this case is to develop your layout in such a way that will allow the image to push your layout wider, rather than break out and overflow, it certainly won’t look as pretty, but its damage limitation
Let me know your results
Improving HTML email on HiDPI may not be a priority for you when it comes to development time right now, but with HiDPI devices on the rise with Windows 8.1 and future versions, its a good time to understand how Outlook handles DPI and how you can make your emails looks better for these type of Marketing list members! There is also the consideration of users who use large DPI factors for accessibility purposes as well.
All of the information here is fairly new, and hence hasn’t been tested thoroughly, I’ve tried to get a broad range of clients and environments to test everything out and haven’t found any bad side affects. I’d love to know if anyone else has been testing this and what your results and thoughts are. You can post your thoughts in the comments below or join in the discussion over the Litmus Community forums. You can also find the original article I started on the Campaign Monitor forums
Once again, big thanks to Michael Muscat and his input on this, couldn’t of done it without him!
Share This:
3
If you include a custom font at the top of your font stack, Outlook will ignore all of your fallback fonts and instead display Times New Roman. But fear not! As with most Outlook bugs, there are ways to get around this.
We covered this topic in 2015, and the blog was hugely popular. We offered one technique to help create working custom font stacks, but our readers had a lot of other ideas!
In this blog we’ll repeat our last technique, as well as a few of submitted by our readers. We tested all of these techniques to make sure that they work, but they may or may not work for you depending on how your email is coded and how your ESP modifies your code upon sending. Hopefully, at least one will do the job!
Google Fonts in Email
Google Fonts are the most commonly used custom fonts, because they don’t require that the recipient have the font installed on their computer. To add Google fonts to your email, you can use either of the following methods. Both have the same level of support. Check out our blog on Google fonts for more info. You could also host your own font, and should get similar results.
<link>
You can add a link to the font to the head section of your email.
Mso Conditionals Not Working In Outlook 2014 For Mac Windows 10
@import
You can also use the @import statement in your embedded CSS in the head of the email.
Mso Conditionals Not Working In Outlook 2014 For Mac Pro
Supported Clients
Google fonts should work in Apple Mail, Lotus Notes 8, Outlook 2011, Outlook 2016 for Mac, Thunderbird, Android 4.4 (and some other versions) and the iOS Mail App. Google fonts don’t work in Gmail or any of the other web clients.
Fix 1: Replace the Stack Using Attribute Selectors
This is our favorite of the options that were offered by our readers. Write your font stack, just as you normally would, but put your custom font last in the list. Then include the following code in your CSS: “[style*=”CustomFont”] { font-family: ‘CustomFont’, Helvetica, serif !important; }” This code will tell the email client to replace any style that includes the custom font with the correct stack. Attribute selectors don’t work in Outlook, so it will be ignored. Thanks for showing us this one, Eoin!
![Mso Conditionals Not Working In Outlook 2014 For Mac Mso Conditionals Not Working In Outlook 2014 For Mac](https://venturebeat.com/wp-content/uploads/2018/01/screen-shot-2018-01-11-at-2-21-24-pm.jpg?w=800)
Fix 2: Wrap Text in a Span
This is the technique from our previous blog. It works well across the board, but requires a lot of additional code to work properly because every text section has to be wrapped in a span.
Fix 3: Add MSO Conditional Code
On the flip side, you can specify a custom font stack in your embedded CSS, and then use a MSO conditional statement to override the font stack with generic fonts for Outlook only. This option is also fairly light on code, though you may have to specify a lot of places where you want the override. This trick is courtesy of Khoudj, Thomas Grimes and Stijn van der Ree.
Fix 4: Specify a Custom Font in a Media Query
![Mso Conditionals Not Working In Outlook 2014 For Mac Mso Conditionals Not Working In Outlook 2014 For Mac](https://venturebeat.com/wp-content/uploads/2019/11/aero.jpg)
Mso Conditionals Not Working In Outlook 2014 For Mac Download
Another approach is to write a standard font stack with no custom fonts in it in your embedded styles. Then, below this section, in an “@media screen” query, add your custom font stack. Because Outlook can’t read media queries, it won’t see this custom font stack and it will render normally. Thanks for letting us know about this technique, Ahmad!
However, this technique can be a little dangerous. Outlook caches fonts, so if that user has received an email using that font before, it may still trigger the Times New Roman bug.
Did we miss any?
If we missed your favorite trick to defeat this bug, let us know in the comments below!
Mso Conditionals Not Working In Outlook 2014 For Mac 2017
Outlook got you down?
Outlook can be the bane of an email dev’s existence, but once you get to know its bugs it’s not so bad. Is this Stockholm syndrome? In any case, we have lots of great resources!
- Get our guide with 17 Must-Know Tricks for Outlook 2007, 2010 and 2013
- Learn how to Use Ghost Columns to Fix Alignment Problems in Outlook
- Arm yourself to Code for the Beast that is Outlook 2016
- Defeat Spacing Issues in Outlook 2007 and 2010
- Or learn the art of Coding for DPI Scaling in Outlook 2007-2013
Sign up for our community and you’ll have a place to learn and talk about email!
Author: Alex Ilhan
Mso Conditionals Not Working In Outlook 2014 For Mac Windows 10
Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism. Follow him on Twitter: @omgitsonlyalex.
Mso Conditionals Not Working In Outlook 2014 For Mac Windows 7
Author: Alex Ilhan
Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism. Follow him on Twitter: @omgitsonlyalex.