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. This is because Outlook relies on Microsoft Word for formatting, which can cause rendering issues with HTML emails in the html format.
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. Ensure that your HTML file is a complete HTML document in html format, including < !DOCTYPE>, < HTML>, and < body> tags, to embed it properly in Outlook. The process to insert or embed html into Outlook can vary, but both terms refer to integrating your HTML code into the email body.
There are several Outlook versions and each version works differently, so if this one is not working for you please contact us via chat or send an email to hello@chamaileon.io. Note that the ‘Insert as Text’ option in the Attach File dialog is not available in modern versions of Outlook 365, which may limit how HTML can be inserted.
In this article you will find how to send an HTML template as an outlook email, and a step by step guide to importing HTML templates into Outlook versions.
Introduction to HTML Emails (skip if you know the drill)
HTML emails have become an essential tool for anyone looking to create visually appealing and interactive messages that stand out in crowded inboxes. By using HTML code, you can design email templates that include images, custom fonts, colors, and even interactive elements, making your email messages more engaging and effective than plain text emails.
At the core of every HTML email is an HTML file—a simple text file containing the HTML code that structures and styles your message. When you want to send an HTML email through Outlook, you’ll need to insert this HTML content into your email message so that it displays correctly for your recipients. This process is often referred to as embedding HTML or inserting HTML content into the message body.
To make the process smoother, many users rely on an Outlook HTML email template. These templates are specifically designed to work with Outlook’s unique rendering engine, helping to minimize formatting issues and ensure your email looks as intended. When creating HTML emails, it’s also important to use inline CSS for styling, as this approach is best supported by most email clients, including Outlook.
Outlook offers several ways to add HTML files to your emails. One helpful feature is the ability to customize the Quick Access Toolbar, allowing you to add the “Attach File” button for easy access. By right-clicking on the ribbon and selecting “Customize the Ribbon,” you can quickly add this option, making it easier to insert HTML files into your new email messages.
Once your HTML file is ready, you can use Outlook’s “Insert as Text” feature to embed the entire code directly into the email body. This allows your recipients to see the full visual appeal of your HTML email template, complete with images, styles, and layout. However, keep in mind that different versions of Outlook and other email clients may render HTML emails differently, so it’s always a good idea to test your email template before sending it to your audience.
By understanding the basics of creating HTML emails and how to insert HTML content into Outlook, you’ll be well-equipped to design and send professional-looking email messages that capture attention and drive results. In the next section, we’ll walk you through the step-by-step process of importing your HTML template into Outlook, including tips for using the “Insert as Text” feature and customizing your Quick Access Toolbar for even greater efficiency.
Import HTML emails to Outlook 365
This is a step by step guide for importing HTML into Outlook 365. It will show you how to embed HTML into a new message window by customizing the ribbon, attaching HTML files, and using the 'Insert as Text' feature. You can also use the paste function to insert HTML code directly into the message window.
Right click on the Outlook ribbon and choose 'Customize the Ribbon'. Create a new group or new tab, then add the Attach button to this new group or new tab for easier access to attaching files and embedding HTML.
2. Open the “attach a file” window from the quick access toolbar. A modal window will appear—look for the little dropdown next to the Insert button.
3. Select the HTML file you need to import. This step is about attaching the file, and it's important for embedding HTML correctly into your email.
4. In the modal window, use the little dropdown next to the Insert button to select “Insert as Text.” This will embed the HTML into the message window or new message window.
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: Using tables for layout provides the most reliable email layout in Outlook despite being outdated for web design.
Keep in mind that Outlook does not offer a direct way to edit HTML code within the app, so you may need to use third-party tools or services to edit your HTML email content before importing it into 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.