It is recommended to use an email service provider such as Mailchimp for example when sending out your HTML email through Outlook. It is known that Outlook messes up the HTML code so your templates won't look the same as they do in other email clients.
You can install a Chrome extension such this one.
If you haven't managed to find or use any, here is how you can export your HTML template in Outlook.
There are several Outlook versions and each works different, so if this one is not working for you please contact us via chat or send an email to hello@chamaileon.io
In this article you will find how to:
Import HTML emails to Outlook 365
Select more commands to customize your quick access toolbar
2. Choose the "attach" function and "add" it to the toolbar
3. Open the "attach a file" window from the quick access toolbar
4. Select the HTML file you need to import BUT do not click to INSERT yet
5. Switch the "insert" button with the "insert as a text" button and click
Import HTML emails to Outlook 2016
Under the ''File'' menu choose ''Options'' to display the ‘Outlook Options’.
Click to ‘Compose messages in this format’
Set the drop-down menu choice to “HTML”. Click on ''OK''
If this is not how it appears to you please contact us via chat.
Tips when inserting your HTML to Outlook
If you want to design your email and send it with Outlook, not an Email Service Provider, we have some suggestions for you on how to do this on the most responsive way:
You should set the background color in the email and change the fonts there, too.
Keep it as simple as possible.
Responsive OFTs are not possible, fixed width only.
OFTs are not suitable to work on Mac, best to work on these on a Windows PC.
This plugin can be a huge benefit: https://archive.codeplex.com/?p=outlookhtmleditor - it allows you to code wherever you normally do, and then import the HTML into a blank message, tweak, add subject lines and save as an OFT for distribution. It will also show you what Outlook does to the code once it's saved as an OFT. Your media query responsive code will not work, but doesn't have to be removed in most cases, Outlook just ignores it.
To convert them I open the HTML file in Word, then save as a Word 97 doc - that cleans up the code a bit. Then select all and copy the Word doc and paste that into a new email - then save that as a .oft file.
Stick to Tables When Creating Outlook HTML Email Template. Using tables for layout isn’t a good practice in the web world, but it’s still good practice in the email word, especially for supporting Outlook.
Most Outlook versions don’t support the box model or things like flexbox, CSS Grid, and floats. This lack of CSS support makes it hard to use semantic HTML to build email layouts that display properly in Outlook.
While most web browsers could display this HTML in two columns, Outlook would display each column div as its own row.
If you are having rendering issues on Outlook, you should check this article.