How to write newsletter HTML code for Outlook and other email clients?

In this post, I would like to show you how I created a newsletter HTML code that will display correctly in all mail clients, including Outlook. Thanks to this tutorial you will be able to write any HTML template for the content of your mailing yourself.

In the previous article I described how the mailing works from the technical side and I showed how to create the graphic design of the newsletter. I invite you to read it:

How to create a responsive newsletter for all email clients? (click)

How to write newsletter HTML code for Outlook?

Creating code under Newsletter is not easy and I wrote about it in a previous article. Most email clients are moving with the times and updating their email application software so that it correctly reads today’s HTML messages. Unfortunately, not everyone is moving with the times and updating their software with new HTML or CSS trends. Microsoft and their Outlook application is proving to be problematic.

Outlook has the biggest problems with reading many popular CSS styles (e.g. border-radius, rounded edges) and structures like div. It is true that it reads the <div> tag, but it does not work well with this structure and there are often problems. Moreover some things will work on one version of outlook on another and it depends on version of application. This forces the programmer to do a lot of extra work when writing code and testing it. So how to create it properly?

The best way is to test it on the fly. We are not able to check every functionality, code, style if it is supported in a given application or not. That’s why it’s best to send ready elements on the fly when creating a newsletter view and check how they are displayed in particular mail clients. A newsletter sent on email applications may have a completely different appearance than in the case of a browser view. Only after the message has been sent will it become clear how the newsletter looks as an email message in the respective email client and app.

The newsletter must be written simply – preferably using tables, and the styles are to be uncluttered and basic functionality should be used. This will ensure that we come close to the correct look on most mail clients.

Table in HTML – what is it and how to use it?

A table in HTML is a structure that allows us to position content in a view. As with any table, we have to deal with rows and columns. Inside the table we can arrange elements in horizontal and vertical positions.

Why use a table for newsletters?

Positioning the content in the view using tables gives us a guarantee that any browser, application or device will read it correctly. In the case of views based on a div structure, the situation looks different in the case of mailing. We may risk using divs in the case of a newsletter and the majority of mail clients will read this structure, but when it comes to styles written for divs, unfortunately they may not work properly.

Attempts to create layouts using divs ended up with crashed layouts in case of microsoft (outlook) mailboxes.

How to use tables? 

It is really simple. Admittedly it is much more time consuming than using regular div tags, because instead of one <div></div> we have to use 3 tags:

1. 1. <table></table> – the table tag is a table tag and must have rows and columns inside,
   2. <tr></tr> – table row,
   3. <td></td> – column of the table.

Of course, beyond this simple layout there are many more tags or table values that we could use. These are tags such as <thead> corresponding to the table header or <tfoot> corresponding to the table footer. Besides, there are functions such as column merging, etc. etc. But the question is do we need all this? Not necessarily. Most of the views can be created using a simple construction of nested tables .

What are nested tables?

We create inside the main table further tables corresponding to the next elements of our view (if necessary of course).

Outlook conditional CSS – displaying only in Outlook

Sometimes it happens that our newsletter is displayed correctly on all kinds of mail clients, but some element is impossible to process on Outlook applications. Then we can use a condition to add a certain element or style only for Outlook client.

Example of the condition: