Mastering Outlook: A Look Back at Common Rendering Issues

SHARE:

BY  JAINA MISTRY Microsoft is one of the biggest players in the email industry. Microsoft Outlook and its web-based counterpart Outloo...

BY 


Microsoft is one of the biggest players in the email industry. Microsoft Outlook and its web-based counterpart Outlook.com hold a marketshare of over 10% collectively. This is pretty huge!

In a world where users are able to choose from a huge variety of email clients, how has Outlook remained so popular? Not only is Microsoft Office commonly installed on computers across businesses worldwide, but many home computers and laptops running Windows come with MS Office pre-installed. The default email client that is packaged with MS Office is…Outlook.
Then there’s Outlook.com, which began its career as an email client as Hotmail, back in 1996. In 1997 Microsoft acquired Hotmail for an estimated $400 million and launched Hotmail as MSN Hotmail. It was later rebranded again to Windows Live Hotmail. Finally, in 2013 Hotmail was replaced entirely by Outlook.com. With Outlook.com’s history interwoven with Hotmail, it shouldn’t be surprising to know that as of 2015, Outlook.com had over 400 million active users.

COMMON RENDERING ISSUES IN OUTLOOK

Building emails for Outlook has always been challenging. From Outlook 2007 onwards, Microsoft stopped using Internet Explorer to render emails and instead opted to use Microsoft Word as its rendering engine. Great news for Microsoft Office users, who could seamlessly copy and paste items from Word or Excel into their Outlook emails. Not so great news for email marketers and developers who use HTML to build their emails. Try copying and pasting an HTML web page into a Word document and you’ll get a glimpse as to how Word translates HTML.
Naturally, the talented email developers out there began working their magic in developing a plethora of email hacks to make sure their beautiful HTML emails rendered just as beautifully in Outlook. Not an easy task, as a lot of hacks tend to involve VML (Vector Markup Language), which isn’t something you tend to learn in the school of hard-knocks for email development!
Here’s a short rundown on some of the more popular issues facing email developers, when developing emails for Outlook:

USING TABLES IN EMAIL DEVELOPMENT

In modern web development, you can use containers such as divs to contain content, with tables solely used for tabular data. However, to position elements such as divs correctly within an HTML page, CSS attributes such as float and position are often required.
Outlook doesn’t support these attributes. To properly structure your emails for maximum cross-device/client/browser render-ability, developers use tables to build emails.
While tables have been working for email developers for years, they are restrictive in what can be accomplished in terms of email design. Designers must think in terms of rows and columns for their designs to be easily built with tables.

BACKGROUND IMAGES WITH VML

Live text. Live text. Live text. It’s the email marketer’s mantra. Have as much live text as you can in your emails to make sure your emails arrive in the inbox (rather than spam), are accessible to everyone, and readable with images turned off.
Background images can let you overlay live text on top of an image,whether it’s a pattern or a beautiful photo. Background images can create a beautiful sense of depth to your email designs, while still being accessible.
However, Outlook doesn’t support background images with pure HTML. Outlook requires the use of VML to make background images work. Thankfully, you don’t need to learn VML in full to be able to use background images in your email. Campaign Monitor has a great tool that will generate your VML and HTML code for you to give you bulletproof background images in your emails.

NO SUPPORT FOR ANIMATED GIFS

With the lack of support of video in email and email marketers driving to make their emails more dynamic and engaging, the humble animated GIF is the perfect way to bring some life to your emails.
However, Outlook doesn’t support animated GIFs. While the image will load and appear to the user, only the first frame of the animation will render.
If you have subscribers opening emails in Outlook and you’re using animated GIFs, make that first frame of the animation count. Keep the GIF simple and the animation not integral to the message but more like an added benefit to those who can see the full animation.

NO SUPPORT FOR PADDING ON P, DIV, AND A TAGS

Padding is a great CSS attribute that can introduce space to your elements. It’s a useful CSS attribute to position elements in an email or to create breathing room around elements to enhance the design.
An easy workaround for this is to use the HTML attributes cellspacing and cellpadding in the table to create space around elements inside a table.



To introduce padding in your paragraphs—the p tag—use the style attribute mso-line-height-rule:exactly; combined with line-height to give your copy and text some breathing room, making it easier to follow:
<p style="mso-line-height-rule: exactly; font-size:14px; line-height:18px;">Your text here</p>

IT’S NOT JUST OUTLOOK


Introducing: Outlook.com
While the desktop client has posed problems for email developers for years, there’s now a new version Outlook.com for email developers to tackle, which itself has thrown up it’s own share of rendering quirks. A lot of which are different to the quirks found in Outlook. (Of course.)
One change has not been a step in the right direction—Outlook.com strips out anything that’s placed within a set of media queries. So there’s no way to differentiate between the mobile or desktop version of an email.
There is some good news though. There are a few rendering bugs that were in older versions of Outlook.com which have been repaired. Most notably: the float/margin hack. To get the older version of Outlook.com to understand these CSS attributes, they had to be written using either uppercase or a mixture of upper and lowercase. Now case doesn’t matter.
Previously, for Outlook.com to understand the margin attribute, you had to use:
Margin: 10px;
But now you can use:
margin: 10px;
For a more complete list of changes, email developer Rémi Parmentier has written a great blog what you need to know about the new Outlook.com, and what email developers should look out for.
Mastering Outlook

KEEPING YOUR CODE RELEVANT

If you’ve ever worked as an email developer, it can often feel like the goal posts of email render-ability move more than they should. As email development continues to evolve, there are always going to be new techniques that need “translating” to Outlook.
For example, when hybrid/spongy email development was introduced to ensure the Gmail mobile app rendered a mobile version of an email, email developers also created new techniques to enable Outlook to render those emails.
As email developers push the envelope further, with many aspiring to create table-less emails, these new techniques will have to be simplified for the many versions of Outlook that are still in use.
It’s fair to say that innovative and talented email developers have never been in more demand. VML has yet to be mastered in email, and as long as Outlook uses Word as its rendering engine, this will be a key area in which email developers can continue to push their knowledge and worth.

BUILDING EMAILS TAKES TIME

With all these challenges that Outlook imposes on email developers, as well as the growing list of email clients and devices that need to be supported, it’s no wonder that a sizeable chunk of time spent in email marketing is in developing and testing HTML emails.
In our 2016 State of Email Production, over 44% of respondents reported to spending more than 3 hours in email development. This is no short amount of time, and needs to be factored in when looking at an entire email marketing workflow.
Outlook has always been a tricky beast for email developers to wrangle. Unfortunately it can’t be disregarded since it has a sizeable email client market share, which could be larger if you work in the B2B marketing sector. Simply, Outlook can’t be ignored.

STRUGGLING TO MAKE YOUR EMAILS WORK IN OUTLOOK?

We've partnered with Microsoft to prioritize email rendering bugs in Outlook, identify issues faster, and announce improvements and fixes to the community.

COMMENTS

Name

ad,8,affiliate,15,analytic,1,audience,5,automation,33,blog,18,brand,11,business,36,call to action,1,campaign,30,content,93,conversion,16,CTA,8,customers,14,deliverability,9,digital,30,email,557,entrepreneur,10,facebook,17,gmail,6,google,11,google analytics,1,graphic,1,headline,4,home,10,instagram,6,internet,14,IoT,1,landing page,19,lead,20,list,47,marketer,27,marketing,294,mindset,40,mobile,4,niche,5,online,36,opt-in,14,pinterest,2,ROI,1,segmentation,10,SEO,8,snapchat,1,social media,102,spam,13,stat,7,strategy,10,subject line,38,subscriber,30,success,15,test,13,traffic,20,trend,12,twitter,9,TYP,3,video,10,webinar,1,website,8,youtube,3,
ltr
item
#DIGITAL: Mastering Outlook: A Look Back at Common Rendering Issues
Mastering Outlook: A Look Back at Common Rendering Issues
https://3.bp.blogspot.com/-wzX19eNFENE/WKmCJiPIH0I/AAAAAAAACJQ/ehlnZXot9A0HYEt2sHWW2bBO9dbKRpEGgCLcB/s400/featured-mastering-outlook-a-look-back-at-common-rendering-issues-690x362.png
https://3.bp.blogspot.com/-wzX19eNFENE/WKmCJiPIH0I/AAAAAAAACJQ/ehlnZXot9A0HYEt2sHWW2bBO9dbKRpEGgCLcB/s72-c/featured-mastering-outlook-a-look-back-at-common-rendering-issues-690x362.png
#DIGITAL
http://www.infinclick.com/2017/02/mastering-outlook-look-back-at-common.html
http://www.infinclick.com/
http://www.infinclick.com/
http://www.infinclick.com/2017/02/mastering-outlook-look-back-at-common.html
true
7265473034940166968
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy