Custom coding HTML pages to send via Outlook is NOT the same as coding a web page.
Rules of the road for coding HTML pages to send in Outlook:
First, understand that sending an HTML page to Outlook, is not the same as sending an HTML page from Outlook. When you send HTML from Outlook, the Outlook editor (Word), is getting involved, and will rewrite your code.
The key to coding successful pages is understanding what Outlook is doing, and what code will actually work.
Code designed for modern browsers, and most CSS responsive design techniques, will not work properly.
Outlook uses Word to both render/display HTML, and to send it. When you put HTML code into the Outlook editor (for example, using IE > Send Page as Email or PoliteMail > Import HTML) Outlook will add Word (RTF) compatibility code and will replace any CSS styles in the header with its own.
A benefit of this is you can copy and paste back and forth between Word and Outlook, and they will essentially work (although you will likely need to set your page margins to zero in Word for the layout not to fall apart).
Using the following coding rules will get you better results in Outlook, and in most other email programs being sent to (note that Outlook Online (OWA) and Gmail tend to add extra space after a table cell).
- Use inline styles, not CSS styles defined in the head of the page.
In other words, you have defined style tags on each element, and not rely on a class - Use table structures, not divs.
- Do not use float (won’t work)
- Fixed widths will yield more reliable rendering than percentage widths
- Do not use background-image tags (won’t work)
- If you don’t specify it, Outlook will include an alt, width, and height on all img references.
If you want an image to be a relative size or responsive, then place it inside a relative table structure, and set the img alt= tag to “mo_re100%”, and PoliteMail will modify the image specification on send - Any adjoining table cells td must contain the same identical padding (otherwise, Outlook will force it in and/or the page rendering will go astray).To achieve the spacing you want, you may embed a table inside the adjoining td, and add the padding to the inner td
- Keep table structures limited to 3 nested tables.
- If you are going to align images (left/right or center), limit them to 3 inside any one table.
- For tables with long content that extends more than a tabloid printed page size (~23-24 inches), you will likely see unintended or unusual white space (breaks) in the page where you didn’t want it. This is some sort of Outlook/Word rendering bug, and the best way to avoid it is avoiding long table cells, and use a series of stacked tables instead. If you are using an Outlook table structure with two td columns, and long content inside, you will likely need to redesign the page to have that side column broken up into separate pieces.
