The world we live in is too tangible nowadays. Most people now like to settle on the touch-and-believe theory. Even if you show a ripe and fresh apple, they’ll buy it only after poking it a bit to make sure. Same is the case with emails and email clients. If the user feels the slightest disturbance in an email design or display, they’ll stop engaging. Usually, this happens because of a broken or misaligned email design, which might be purely unintentional.
Who is to blame for?
All the blames account to the email developers, who publish these emails without a proper testing process. These days, the email development sector is progressing by leaps and bounds, and sadly, most of the email clients are yet to catch up with the velocity at which email development is unfolding new ways. Even this long after the introduction of CSS coding in 2009, many of the mail clients don’t have proper support to CSS3, and some are too backward in this regard, especially Outlook.
Yes, different email clients handle the same email differently. That is due to the difference in the rendering engines in these email clients. Generally, a rendering engine captures structured text from HTML and formats it correctly to match the declared CSS styles. If the rendering engine doesn’t support these stylesheets or strip them off, the email will take a different shape from the original.
Some of the mail clients use proprietary rendering engines for style rendering. But clients like Gmail and Yahoo piggybacks on the browser’s rendering engine.
- Microsoft Outlook relied on Internet Explorer rendering engine till Outlook 2003, and then switched to Microsoft Word from Outlook 2007 onwards, which didn’t do any good.
- Mozilla renders using the proprietary Gecko engine to support most of the latest email innovations. Thunder makes use of the same rendering engine.
- Apple Mail, iOS mail and Outlook for Mac uses Apple’s WebKit browser engine which supports almost all innovations you toss to it.
Following are the common rendering issues Microsoft failed to update even in the latest Outlook 2016:
- Lack of support for background images in divs and table cells
- Zero support for CSS float or position
- Zero support for text shadow
- Feeble support for CSS width and height
- Issues with nested elements background colours
Even though most of the users rely on Apple Mail (~46%) and Gmail (~29%), it is essential to make emails that are compatible with other clients like Outlook, Samsung Mail, Yahoo and Windows Mail as well. As Outlook is covering 11% of users including all platforms, let us see the issues on rendering in Outlooks and proper workarounds for them.
Outlook Ordeals & Workarounds
As already mentioned, Outlook was using Internet Explorer rendering engine till Outlook 2003. This engine disables every image in the email by default and displays a warning message before the ALT-Text. Other than this issue, there was nothing much to worry about Outlook.
But then, the rendering engine changed to Microsoft Word, and that showed us an Outlook which was running to the dead end. Following are the issues that started with Microsoft Word rendering engine:
1. No GIF Support
Outlook displays just the first frame of the GIF as a static image instead of the complete GIF. So, in the case of advertising emails, it should be ensured that the message you have to convey is included in the first frame or in the ALT-text as an alternative.
[image]
2. No Backing for Background Images
Outlook doesn’t support background images of any types, i.e., Full body, Pattern, Graphic or Section-wide. Instead, usage of VML (Vector Markup Language) in the <body> tag of the HTML will be an ideal solution.
3. Image Scaling for High DPI Displays
Suppose a user has enabled DPI scaling for his/her desktop due to poor eyesight or some other problem. In such cases, Outlook will rescale the images in the email you made painstakingly, and all your work will go nowhere. See what’s happening:
• Outlook preserves all widths and heights defined using HTML attributes as pixel values.
• It preserves all “px” widths and heights defined in VML shapes as pixel values.
• It converts all other “px” values into “pt” values.
• And it applies desktop scaling to relative units like “pt”. For example, 10pt at 150% desktop scaling would be equivalent in size to 15pt at 100% desktop scaling.
To solve this, email developers have to test their emails at 125% or higher DPI scaling.
4. Unnecessary Page Breaks
Outlook has a general tendency at times, to consider some lengthy emails as Microsoft Word documents and automatically adds page breaks at every 1800px.
5. Removal of Paragraph and Margin Spacings from Code
As Outlook (and Hotmail too) removes paragraph and margin spacing from the code, the contents we had spaced neatly will bunch up. To solve this, stick to the traditional table-based layout. Despite that it is outdated, it alone does the trick here.
6. Forcing Times New Roman Instead of Fallback Font
In case you add a fallback font for your email, Outlook overrides it with Times New Roman. So to solve this issue, the fallback should be forced into the HTML with a VML code.
7. Gaps Between Two Sliced Images
Some developers slice images for easy loading. In an email, what you’ll be seeing might be three or four images combined to a single one. These images load faster than a single big one. Outlook tends to put padding between each of these slices which will tear the whole image apart. To change this, you should add a div{display:block !important} to the <head> tag.
8. No Support for Bullet List
Outlook doesn’t support <ul> and <li> HTML tags. So you’ll have to include the following workaround in the HTML.
/*This is for Outlook 2007-10-13-16*/
<!– [if gte mso 9]>
<style>li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em;}
</style>
<![endif]–> /*End for Outlook 2007-10-13-16*/
/*This is for Other all email clients*/
li {text-align:-webkit-match-parent; display:list-item;}
/*End for Other all email clients*/To Conclude
Even though most of the email subscribers have moved on, it is surprising that a percentage of them are still loyal to Outlook. So, it isn’t easy for an email developer to completely ignore Outlook and move on like others. As long as Outlook hasn’t found a way out of these blindfolds, you’ll have to try coping up!
Thanks for reading the article. If you like the article, please follow us on Facebook and Twitter. Visit ThemeHigh to know more about our WooCommerce Checkout and Product Page plugins.
