HTML Email Development: Outlook Mobile App Debugging
While testing an HTML Hybrid/Responsive email, I encountered an issue with the email being cut off in the middle of an image when viewed on the Outlook app version 3.026 on the Samsung Galaxy Note 8 running Android version 8.0.0. In my Email on Acid tests the email looked fine and as intended/expected everywhere, including on Outlook on the iPhone and on Android (the Pixel phone). It also looked perfectly fine on my Outlook.com web account.
I reviewed my code, but found none of the usual suspects (un-closed tags, copy/paste errors, etcetera). Awesome. Time to debug.
Over the course of testing, I tried adding an additional row containing a duplicate of the the content that was getting cropped (a row of three images, in which the middle image was being cut in half). The result: the first row displayed, the second row was cropped on a different image in the row. (!!!) I also tried reorganizing the content, which resulted in a very few tests of the entire email displaying correctly but in most other tests, the same issue with the email being truncated, usually with the cropping in the middle of an image. The “display correctly” and “truncated email” results occurred on emails using the same markup, but with the content reordered.
More fun with the experience: the same email that is cropped in portrait mode becomes fully visible when I tilt my phone to landscape mode, but then returns to being cropped when I go back to portrait mode.
I then resent the original email as a baseline to begin more controlled testing and to better keep track of what I had tested. This time the email displayed fine, with no cropping.
A search on Google only found a few recent forum threads and blog posts referencing Outlook app email cropping. The issue appears to be related to Outlook / Android version updates and the app’s handling and loading of retina images. Other’s have also encountered the same “comes and goes” experience.
Resolution
I updated the retina images in the email to include inline height and width styling, and overrode the scaling in the media query. So far, this seems to be working.
CSS:
@media only screen and (max-width: 480px) {
/* image scaling for mobile */
.large-product-image {
width:100%!important;
max-width:100%!important;
}
.large-product-image img {
width: 100%!important;
max-width:100%!important;
}
}
HTML:
<td valign="top" class="large-product-image">
<img src="retina-image-440x308.jpg" alt=" " border="0" class="carddeviceWidth" width="320" style="height:auto;width:320px;max-width:100%;border-width:0;-ms-interpolation-mode:bicubic;">Resources:
“Image width=”” & height=”” Bug Using Outlook 3.0.0 APP on Android 9, Cutting off Emails…”, Litmus.com Forum Discussion – January, 2019
litmus.com/community/discussions/7896-outlook-3-0-0-app-on-android-9-cutting-off-emails
“Rendering Issue with Outlook mail app in iOS #184”, GitHub.com Forum Discussion – Jun 6, 2018
github.com/TedGoas/Cerberus/issues/184
“Email Rendering in the Outlook App”, Apr 2nd, 2017
www.courtneyfantinato.com/email-rendering-outlook-app/