Coding for email is a fine art as there are so many variables that one needs to take into consideration, none the least of which are the different mail clients and what they do or do not support. Each is unique. As the third most used mail client in the world, Outlook has idiosyncracies that are of course different to those of Gmail and the 2016 release has its own set of requirements. Here are some things to be aware of
Outlook ignores inline or embedded styles that add padding or margins to images. To get around this, wrap the image in a table with margin, padding, or cellpadding depending on how much space you need.
Outlook will not automatically wrap text within the tables you create, which can really throw out a design. Instead, table cells will widen to try and accommodate large URLs or other unbroken text strings. To avoid this, include the following style:
Outlook 2016 adds a 1px border to table cells. This extra spacing may go unnoticed, unless you have an email template that needs to line up perfectly. To get rid of this extra spacing, just use “border-collapse: collapse;” embedded or inline.
Outlook 2016 ignores link styling if the “href” attribute is missing. Links without href are sometimes included as anchors within an email. If you want Outlook to recognize the link styling, just wrap the link in a and style the span.
Outlook 2016 will remove padding in a lot of different situations. In general, it’s safe to use margin or cellpadding instead. This may require you to use even more nested tables. Learn to love them!
Outlook 2016 sometimes ignores the width and height of HTML elements. When an email renders in Outlook, the sections will assume the height of the text inside of them, and 100% width, even if you specify a height/width for them in code. The solution? As usual, use tables instead.
Outlook 2016 sets TDs at a minimum of 17px high, to avoid this, set line-height and font-size to 1px (or the desired size).
CSS will not resize images in Outlook.
Always define the height and width using HTML attributes for images and they will render properly. If you specify the width, width=”300″ Outlook will resize the height accordingly, so the image is not warped.