IT Info

Understand Trend

MS Outlook Opens a Market for Pure HTML Skills

01 Oct, 2019

Just before you dump or park your basic, pure or core html skill for frameworks and WYSIWYG editors, you may want to peep into today’s digital marketing industry.

One of the core areas of this industry is the email marketing, whose global worth is predicted to hit US$22.16 billion by 2024. This is a big one for web developers with pure HTML skills as there is a demand for cross-platform email designs and templates due to the rendering disparities majorly experienced on Outlook.

I found this new market opportunity and need, through a very tedious debugging process, when a client notified me of his custom mails not been displayed or rendered properly on Microsoft Outlook.

After spending days trying to make the mail and its design appear on MS Outlook as it did on gmail, yahoo and the likes; I discovered the following.

MS Outlook does not expressly support CSS

Unlike other mail services and client systems, MS Outlook does not fully support styling emails in forms of newsletters, templates or other complex contents with CSS. This is because it uses the MS word processor’s rendering engine and not a webkit.

To keep it clean and cross-platform, it is best to use pure and basic HTML codes with their associated attributes for styling instead of CSS. This will make your mails render as expected on all mail clients or platforms.

Here are some of the issues you will encounter when using CSS to completely style mails and how to avoid or fix them;

Divs won’t work

Divs and its CSS flexibility has no place in Outlook’s terrain. This is due to the fact that Outlook does not support “float”, “position” and other CSS layout styles which are needed by divs.

Using Tables to create the general layout is the best way to go, if you want your mail contents to maintain their positioning even on MS Outlook.

It’s a no no for Margin and Padding

Outlook does not support padding, while Hotmail hates margins. Surprisingly, a bit of trick is available to implement spacing in a cross-platform email design. Some of such tricks include:

Cellpadding

The cellpadding HTML attribute specifies the space, in pixels, between the table cell wall and its content. It can be used in place of padding.

Add empty cells

This is all about adding empty table cells such as “td” to implement spacing. However, it is important to note that empty cells don’t always retain their heights across all platforms. You can beat this by placing a blank image with the desired pixels or height in an empty cell.

Font changes

Text fonts may differ across devices and platforms. A quick way to resolve this without losing all the hair on your head is to roll back to the old HTML <font>. Also note that not all font types or families are found on every platform, so you may want to consider something like Arial, Times New Roman, Verdana, or Georgia.

Backgrounds are not showing

Starting with the background color, it is recommended we use the traditional “bgcolor” HTML attribute. However, it is most important to have the background set on the container element such as a table and not on the <body>. This is because, some mail clients strips off body and head tags.

Now on to background images. Here is the golden rule; avoid using background images. Outlook especially, does not support the use of standard CSS for setting background images and tweaks will not give a 100% solution. The image could simply be added as a content in a cell where you may have created the image with needed text on it before use.

The downside of creating images with such texts is that; mail clients with disabled image display will make the reader lose all the message in that cell. Hence a background color and text could save the day.

For those that have sworn to use background images for outlook, you can employ VML (Vector Markup Language) for this purpose. Also note that VML which seem to be a bulletproof solution also will not allow you to set a background image on another (nested backgrounds are not supported).

CSS will not resize images in Outlook

Here is the most heartbreaking issue for me. Outlook will never resize images whose specified dimensions are not same with that of the image itself.

Hence, if the width of an image you intend to render on a desktop window is 600px, then ensure the actual width of the image used is 600px before uploading or using it in your codes.

Outlook does not support animated GIFs

The safest route for this is to stay clear, as there’s nothing much you can do to make GIFs display properly on Outlook. One may be lucky to have the first frame displayed, and that’s all.

If for some reasons you are to use CSS partially, then take note of the following;

Make sure all CSS styling are inline (Inside the corresponding HTML tags)
Text doesn’t wrap automatically when using table, so you should add a word-break styling to your “table” tag, e.g <table style=”word-break: break-all;”>. This will help you achieve a more responsive deign.

What’s the market like for MS Outlook?

Enlyft reports that about 65,150 companies use Microsoft Outlook where each company has about 50-200 employees and 1 million - 10 million dollars (USD) in revenue.

In early 2018, Outlook.com reported it had 400 million active users globally and this does not include the number of external email accounts that are accessed and managed via Outlook mail client software.

The fact that most Outlook users are enterprise-biased or corporate-connected is a good reason you should take its mail format or design principles more seriously, as your company’s next deal may depend on it.

Conclusion

The good news for HTML core developers remains the fact that this Microsoft mailing design is needed even for its latest outlook version. On the other hand, email marketing has a good stand in the market aside professional needs such as newsletters, custom invoices, welcome mails, order notifications, reminders and lots more. This knowledge may be all that will help you keep your job or create one.