How to create outlook friendly HTML email?
Outlook is the preferred email client that is used as an email application for accessing Microsoft Exchange Server email. Most of you might feel alienated when testing your email templates on Outlook web and desktop clients. The reason of the distortion is that Outlook uses Microsoft word to render the content. Having dealt with many issues while creating outlook compatible email newsletters, below are the ways that are listed for you to get out of them :
- Padding and margin do not work
Yes, there might be issues in Outlook 2005 and 2010, as both of these version don’t support margin-top attribute. All we can do for it is stick to margin-left, margin-right and margin-bottom css attributes.
The way that we would suggest is to use custom classes for spaces. Be it spaces between two vertical blocks or in between two sections, the best solution is to make a table with the specified height in between them. For example :
- Background Image does not display
Suppose you make html email template with high-definition images and background images to make it look compelling and attractive. It works well on other clients, but your background images vanish suddenly on Outlook on testing. Fortunately, we have a solution for making the background images viewable on the outlook clients :
- Image and content sizes in pixels
While we send our html email newsletter to our clients, there are times when the word rendering engine transforms it into something unrecognisable because of desktop scaling. The VML code below helps to keep the sizes of images and content in proper format:
- Distorted Grid Structure
Supposedly, we design our email newsletter in a perfect grid format with rows and columns. In order to get rid of the unstructured grid view of our newsletters in Outlook, we add the below vml code :
- Bulletproof buttons
As the prime motive of sending newsletters is to engage clients, the major role for the client conversion is CTA (call to action) button. The button styles should be such that they do not distort in different email clients. Below is the code of developing buttons with padding :
- Fallback Fonts
We need to specify a set of fonts in the font-family attribute in case one fails to load other comes to its rescue. Does it sound confusing? Let us take an example to clear your doubts :
As seen in the above code, when the fonts will be loaded it would follow the left to right order. In case Open Sans does not load, it will try to load the fonts according to the order in which they are specified, default fonts are loaded at the end.
Conclusion
We have tried to cover the most common issues that are faced while creating an outlook friendly email. For your convenience we have curated amazing email templates that cover all the hacks that are listed above and is fully compatible with the major email clients. Also, we would love to hear from you of any other issue that came into your way while coding for the email newsletters. And also hope that Outlook becomes little more lenient in the coming future 😉
How to insert your HTML into an email message and stop Outlook from messing it up
Video tutorial on how to send HTML emails unchanged by Outlook
Watch this step-by-step guide on the Insert HTML feature to learn how to prevent Outlook from altering the HTML content of outgoing messages by using the.
More than 1.1 billion people use Office. That’s 1 in 7 people on the planet. Microsoft Outlook is the go-to email client for business and a stunning number of users use it in everyday work. It is a very powerful email client, but sometimes this power is a shortcoming.
One such case is using Microsoft Outlook to send HTML-formatted newsletters or forms. “But Outlook allows me to create HTML-formatted messages using a lot of controls and styles,” you might say, and you would be 100% right. But as soon as you try to create an HTML message using special software and use the resulting HTML as a source for your message, you will be surprised: Outlook doesn’t allow you to use your HTML source to build a message! “OK, but it is not a big problem” – you say, and again you may be right because you can open the resulting HTML message using Internet Explorer and copy-n-paste the data through the clipboard into the Outlook message. Yes, this can be done, but there is a surprise waiting for you.
Beginning with Office 2007, Outlook only supports Microsoft Word as an engine for generation and display of messages in HTML format. The previous versions of Microsoft Outlook used Internet Explorer as an HTML engine. These technical changes cause significant differences in both the appearance of the resulting message as well as in the HTML code itself, which undergoes alterations and corrections. At first glance, this does not seem to be a big problem… but only at first glance.
Why is it so important to save the initial HTML code of emails?
The answer to this question is very simple – to be sure that your HTML email will look the same in Microsoft Outlook and in Google Mail, Apple Mail and in email clients on tables and mobile devices. By creating an HTML email using an HTML editor that is not Microsoft Word or Outlook, you have the chance to test how the code will display in various browsers and mail clients. For example, you can use a free online service from Litmus Software which will let you test your HTML code’s appearance in more than thirteen email clients: hhttps://www.litmus.com/email-testing/
Using an HTML editor along with a testing and optimization tool like this, you can create rather complex HTML messages and be confident that they will appear properly for all recipients. But this remains the case only so long as your HTML source code stays in its initial form. As soon as you put your code into Microsoft Outlook through the exchange buffer, the whole code will be transformed and corrected.
What is the HTML body of the message?
We’ll create a simple HTML file:
The file size is 36 bytes. We open this file in Microsoft Word as HTML and save it as HTML with a different name. We see that the size of the resulting file is 35.8Kb! Just like that, the file size increased 1000 times! But it looks the same as before. To clarify what the differences are, let’s look at the source of this new HTML file:
So we see that our simple HTML text has been enriched with a huge mass of ‘garbage’ that has come seemingly from out of nowhere, and which is many times greater than that original text in its initial format. After this transformation, we can no longer be sure that this code will appear the way that we want it to.
Why does Word change the initial HTML code in the email body?
These changes occur because Microsoft Word is not an HTML editor; it only allows the import of files of that format. That means that the source text was imported into Microsoft Word and then exported back out as HTML created at the time of saving the document – and the minimum file size for this HTML is 35 Kb. But that is when the HTML format is chosen when saving. There is, actually, a way for Microsoft Word to save in a different format, called HTML-filtered, which will filter out most of the added garbage. This method results in a file of 5Kb, which is still 10 times more than the source file.
Note that although we are discussing Microsoft Word, all of this concerns Microsoft Outlook as well, since the same HTML engine is used in both products. The HTML-filtered format is what is used when generating emails in HTML for Outlook. This means that Microsoft Outlook simply does not allow us to create a message in HTML that is less than 5Kb (and that is an empty message).
This transformation of the message by the Outlook editor is another drawback of the product. Imagine a situation where the template of a weekly newsletter is created using an HTML editor to avoid destroying the HTML formatting of the document when importing and exporting it using Word. When this document is placed into the body of the message in the Outlook editor (using the copy-n-paste option), our HTML code will be transformed and made much more complex, which can destroy the initial formatting and display the document incorrectly when it is received by other email clients and browsers.
Microsoft Outlook does not provide any options to send messages without transforming the HTML body. There are some plug-ins in the software market that allow editing of the message body in HTML, thus avoiding transformation. But these, unfortunately, do not solve the problem, because Microsoft Outlook still executes the transformation as soon as you click “Send”. This means that it is no difference between creating a nice-looking HTML email in a special HTML editor and pasting it into the message via the exchange buffer and then sending the email, and using a special program to let you paste HTML code in its initial format when creating the email. In both cases, the recipient receives a larger and reformatted message.
How can one save the initial HTML source code?
Regardless of the limitations of Microsoft Outlook, there is still the possibility to send an email with its initial formatting without executing an HTML transformation. This can be done using the Send Personally, which is a Microsoft Outlook add-in designed to send mailing lists with personalized greetings – which is very convenient in newsletters, announcements, and promotions. But right now, we are most interested in this program for its ability to work with the HTML source of the message body.
This program adds an Insert HTML to the ribbon in the message editor section; this option appears when we create a new email or answer an existing email. When we click on the Insert HTML button, a window opens, showing the HTML source of the current message. In this window, we can create HTML code for the message and edit it. Even if we have just created a new email and have not yet written anything in the body of the message, we can click on the Insert HTML button and we see that Outlook has already put in all the ‘necessary’ HTML coding in:
Using this window, we can simply select the whole text that has been added by the Outlook editor and replace it with our own, using either the exchange buffer or the “Load from file…” option.
You can then use the Preview option to see the resulting HTML, or click OK to save the new text in the message body. Note that we cannot edit the text in the message using the Outlook editor, because Outlook will immediately transform our source HTML. If we need to carry out further modifications in the message, then we will need to click the Insert HTML button again and make the changes in the window.
At this point, we have created an email and not allowed Outlook to transform the source HTML, but this is only the first step. Next, we need to prevent modification to the message when the Send button is clicked. This task is performed using the Send Personally button. The issue is that this program sends messages through the MAPI system and does not call the handler which is triggered when the Send button is pressed. With the Send button never being clicked, no transformation occurs. So all the needs to be done is to press the Send Personally button instead of Send.
Presently, this is the only way to send an HTML email from Microsoft Outlooks and preserve the original HTML formatting. To verify this, go to the Sent folder of Microsoft Outlook and double-click on the message to view it, and then right-click on the message body and choose the View source option. Doing this, we see:
There are 2 key points to remember here:
- The email can only be edited in the HTML editing window. This is true for any modification. Outlook will change ‘our’ HTML to its own HTML even if we simply change the user account from which the email is sent.
- The message must be sent using the Send Personally button, not using Send.
13 thoughts on “ How to insert your HTML into an email message and stop Outlook from messing it up ”
Is this all still working with Windows 10/11 and Office 365? This post is dated 2014, the release notes only speak of “windows 2000”, and the copyright date in the release notes is 2003-2008. … So, is this add-on still current?
Hello. Yes, Send Personally add-on is compatible with the latest Outlook 365 for windows and Outlook 2021 versions.
I’m testing Send Personally with Outlook. I tried to send a mail with an image but it didn’t work, one trial with the image on my hard disk, another trial with the image in my dropbox. Could you please tell me where the image should be saved to have it send with the mail.
You need to contact our support team for assistance at https://www.mapilab.com/support/ Please describe the issue in detail as much as possible.
Hi! I need the html format of outlook email to be in such a way that I see that check symbol or correct/yes symbol in mail itself. Now in current situation I have to go in Action -view browser mode and then all yes/correct symbol appears. Is there any provision I can see it in initial mail when someone forwards me to the mail?
Hello, there is a “Preview mode” available in Send Personally for Outlook, but it is only applicable to new messages during creation/editing mode. To preview the HTML in existing messages, you might have to save each one (in Outlook, select a message > File > Save As… > HTML), click “New Email”, then click the add-in’s “Insert HTML” button, and then “Load from file” to select the exported HTML messages.
Hello, that seems very interesting for what I have to do. you explain it clearly but I still have a question : I’m using responsive html template. By protecting my code with Send personnaly, can you assure me that I will send a responsive e-mail? Is there any way to try it?
I just saw there is a 30-day trial available, sorry the silly second question.
Hello Brauwan, thank you for your question.
The utility for inserting HTML code into Outlook message body form – works with all codes, it just saves your data without any change, and allows you to send it via Outlook that way, with your original code.
So, your responsive templates should also be inserted into email messages and sent by Outlook “as is” without updating your HTML code.
And yes, you can try free trial version within 30 days – and we will appreciate your further questions and notes.
Hi, here I am not being able to put the html content.
Hello Digambar, please contact us using the trouble ticket system with the details – registration is free and takes just a minute.
Hi. I need the html format of outlook email to be in such a way that i see that check symbol or correct/yes symbol in mail itself. Now in current situation i have to go in Action -view browser mode and than all yes/correct symbol appears. Is there any provision i can see it in initial mail when someone forwards me to the mail?
Hello Anand, thank you for your question. Outlook blocks a lot of HTML controls from displaying them in messages, and you can view them merely in browser. Our add-in can help you send your HTML formatted text, but unfortunately, we are unable to affect displaying messages in Outlook.
Отправка письма в html-формате при помощи Outlook-2016
Почтовые программы офисного семейства компании Майкрософт от версии к версии уже привычно наследуют, прямо сказать, неважную восприимчивость к html-письмам. Возможность к восприятию лишь некоторых элементов html-разметки напрочь перечеркивает способность к адаптивности у писем, отправленных Outlook-ами всех версий обозримого прошлого. И в этом смысле, Outlook 2016 не исключение.
Это не значит, что нет принципиальной возможности создания и отправки html-сообщения при помощи этой, по многим другим аспектам уважаемой, программы, но подразумевает внимательное и аккуратное обращение с письмами в HTML. Для того, чтобы адресат увидел ваше отправление в том виде, как вы и запланировали, крайне желательно сделать предварительную отправку созданного письма самому себе для контроля и оценки внешнего вида.
Видео
Используем программу-посредник, или вариант № 1
Вставить код html в создаваемое Outlook 2016 сообщение можно через текстовый редактор того же семейства — MS Word 2016. Для этого нужно открыть в нём файл заготовки нашего послания через контекстное меню командой «Открыть с помощью»
Рис. 1
Если, Word-а вдруг в предложенном списке будет не видно, добраться до него придётся через команду «Выбрать другое приложение» того же меню.
После того, как наш html-файл откроется, выделим всё его содержимое. Сочетание клавиш «ctrl+А» позволяет выполнить это в одно движение. Выделенное — копируем в буфер обмена.
Рис. 2
Теперь следует вернуться в Outlook 2016. В группе команд «Главная» кликаем по кнопке «Создать сообщение»
Рис. 3
В открывшемся новом окне для создания сообщений указываем адресата для нашего послания. Учитывая упомянутые выше «способности» Outlook-а к восприятию html-кода, не будет лишним для начала указать там собственный адрес, для тестовой отправки. Кроме того, в соответствии с этикетом электронной переписки, сразу укажем тему письма, чтобы не забыть об этом после. После чего — ставим курсор в поле ввода текста сообщения и вставляем из буфера скопированное на предыдущем шаге.
Рис. 4
Результат — готовое к отправке html-сообщение в виде точной копии нашего файла.
Рис. 5
Используем возможности Outlook-2016 для вставки готового html-кода, вариант№ 2
Для размещения кода письма средствами Outlook придётся немного поработать с настройкой интерфейса этой программы. Нам понадобится добавить команду «Вложить файл» на панель быстрого доступа в окне создания сообщений. Отметим сразу, что одноименное действие из группы команд «Вставка» нам не подойдёт, оно предполагает прикрепление файла к письму, а мы же преследуем сейчас иную цель.
Итак, создав новое письмо, раскрываем список под треугольником в левом верхнем углу окна создания сообщений.
Рис. 6
После этой манипуляции в заголовке окна появляется пиктограмма в виде скрепки, «Вложить файл». Её нажатие инициирует диалог для выбора нашей html-заготовки. Когда целевой файл с расширением .html отобразится, выделяем его одинарным кликом мыши и раскрываем список (под треугольником) рядом с командой «Вставить», далее выбираем действие «Вставить как текст».
Рис. 7
И видим отображение своего письма в окне создания сообщения. Для готовности остаётся, как и всегда, заполнить поля адресатов и темы отправления.
Рис. 8
Использование инструмента «шаблон» для сохранения писем в html-формате
Если возникает задача сохранения созданного html-письма для каких-либо целей, то в Outlook 2016 для этого есть подходящее средство — внутренние шаблоны. Файлы шаблонов для Outlook имеют свой собственный формат, и этот тип файлов распознаётся по расширению .oft
Для создания шаблона следует, находясь в окне создания сообщений выполнить цепочку команд: «Файл» — «Сохранить как». В открывшемся окне «Сохранение элемента» необходимо выбрать в поле «Тип файла» значение «Шаблон Outlook (.oft)»
Рис. 9
Нажатием «Сохранить» подтверждаем выполняемое действие. Вновь созданный шаблон сохраняется в папке, месторасположение которой по умолчанию задаётся путём «Диск:\Users\Пользователь\AppData\Roaming\Microsoft\Шаблоны». Если есть потребность, можно задать своё, отличное от стандартного, расположение.
У произведённого только что действия есть одно неудобное следствие: вновь сохранённого шаблона из интерфейса программы видно не будет. «Обмануть» это неудобство можно созданием папки для хранения шаблонов средствами самого Outlook-а. Попробуйте поступить вот так: правым щелчком мыши на имени вашего почтового ящика в главном окне программы инициируем открытие контекстного меню. В нём выбираем команду «Создать папку».
Рис. 10
Назовём эту папку наглядно: «Шаблоны». И затем, обычным перетаскиванием файла прямо из окна «Проводника», скопируем в неё файл шаблона, содержащий наше html-письмо.
Рис. 11
Теперь необходимое html-послание находится под рукой, готовое и к немедленной отправке, и, вдруг понадобись, к редактированию.
Рис. 12
Редактирование html-сообщения в Outlook 2016
Строго говоря, для редактирования html-файлов, а именно ими являются, как мы помним, html-письма, Outlook не предназначен. Но всё же, минимальные возможности для этого в нём есть.
Во-первых, текст. С ним как раз всё просто: ставим курсор в нужное место текста открытого письма, и можно добавлять, удалять, править. Следует лишь воздержаться от создания новых текстовых полей и вставки значительных текстовых блоков — можно нарушить разметку письма. И это уже будет совсем другая история.
Второе, это картинки. Про них следует знать главное: изображения из вашего html-письма должны храниться на внешнем сервере, а не на вашем локальном компьютере, иначе Outlook не сможет их корректно отображать. Соответственно, и ссылки на картинки в html-коде сообщения должны указывать вовне, на сервер. Такие манипуляции, как вставка новых блоков с изображениями, непредсказуемо может отразиться на разметке html-письма, и лучше такую правку тут не практиковать. Разве что, заранее позаботившись о создании картинки точно такое же физического размера, как и подлежащая замене, можно безболезненно заменить одно изображение другим. Манипуляции таковы: в окне создания сообщения правым кликом по изображению вызываем контекстное меню, и в нём выбираем «Изменить рисунок. »
Рис. 13
И через окно «Вставка рисунка» внедряем в письмо нужное изображение, подтверждая действие командой «Вставить» внизу этого окна.
Что касается гиперссылок, внедрённых в наше html-письмо (это будет третий тип объектов, доступных для манипуляций редактирования), действия с ними будут различаться в зависимости от того, к тексту или к картинке привязана редактируемая ссылка. Общим будет инициирующее правку действие: правый клик по объекту с гиперссылкой для вызова контекстного меню. А далее, в зависимости от намерений и типа объекта, можно выбрать соответствующий пункт для добавления, удаления или изменения ссылки.
Рис. 14
Следом откроется соответствующее выбору окно, где и можно будет завершить редактирующее действие.
На этом, пожалуй, возможности редактирования в Outlook-е будут исчерпаны. Остается надеяться, что доступных возможностей вам хватит для решения минимальных задач по правке, в более же серьёзных случаях придётся обращаться к специализированному инструментарию.
Что ж, пожелаем нашему html- письму гладких интернет-дорог, а себе — достижения целей, ведь для чего-то же мы составляли наше послание. В добрый путь!
Insert HTML Into Outlook
Outlook is notorious for its HTML rendering. The system is relatively hostile to the coding, which is why “Send HTML email Outlook” is a common search query. Given the variety of versions, how can you do it properly? Marketers adapt their messages to Outlook. This system is used by millions. You can be sure a share of your audience reads messages on Windows. Mail recipients are annoyed by broken links and missing images. These may trigger a flow of unsubscriptions. What started as a thoughtful marketing campaign may cause your audience to shrink. Plain text will not receive much attention. This is why professionals use HTML in Outlook . Colorful messages in HTML are now the marketing standard. If you have a template ready, it is easy to insert HTML into Outlook.
How to Put HTML in Email via Templates
The following sequence will help you insert HTML into Outlook 2016 and other versions. With a template, the process is quick and straightforward.
- Open MS Outlook and go to the “Home” tab.
- Click on “New Email” to create a new email message or use a Ctrl+N shortcut.
- In the new email window, click on the “Insert” tab.
- Within the “Insert” tab, click on “Attach File” or “Attach Item” (depending on your version of Outlook).
- Locate and select the HTML file you want to insert into the email. Click “Insert” to attach the file.
- Once the HTML file is attached, it will appear as an attachment at the bottom of the email.
- Right-click on the attached HTML file and select “Save As” to save the file to a location on your computer.
- Open the saved HTML file in a text editor or HTML editor.
- Customize the HTML template according to your needs, adding images, text, and formatting as desired.
- Once the HTML template is ready, select and copy all the HTML code.
- Go back to the email message in Outlook and click on the “Insert” tab.
- Within the “Insert” tab, click on “Signature” and then select “Signatures” from the drop-down menu.
- In the “Signatures and Stationery” window, click on the “New” button to create a new email signature.
- Give the new signature a name, and then paste the copied HTML code into the “Edit signature” box.
- Click “OK” to save the new signature.
- Close the “Signatures and Stationery” window.
- To use the HTML template in a new email, click on the “New Email” button, and your signature with the HTML template will be automatically inserted into the message.
- You can further customize the email if needed, add recipients, and send the email as usual.
Note: The steps provided might vary slightly depending on the version of MS Outlook you are using.
The attachment option may also be added to your Quick Access Toolbar. To do this, access options through “File“. You will see “Quick Access Toolbar” on the list on the left. Choose “Attach File“. This allows you to embed HTML in Outlook quickly.
Important Tips for HTML in Outlook
So, how can you make sure your message is not distorted? Here are a few tips from experts. These will prevent the most common problems like broken links and formatting disasters. Create HTML email in Outlook with these factors in mind.
1. Use Alt Text for Every Image
The mail client may block images. A possible solution is the addition of alt text. This is a simple word or phrase describing the image. If it is missing, the recipient can still read the description in the box and unblock it.
2. Make Sure Fonts Are Right
One major downside is that MS Outlook recognizes a limited range of fonts. Anything unfamiliar is automatically converted to Times New Roman, which may look awful. To be safe, use standard options like Courier, Arial, Veranda, or Georgia.
But what is your font that is part of the brand image? In this case, force the system to use an acceptable standard font instead of Times New Roman. This will serve as your fallback.
3. Tables Are Handy
This format helps to structure your message template. You can easily split content, choose backgrounds, style text, etc. Use tables to ensure all recipients see the same rendition regardless of their mail system. Remember to add align=”left” to make the message responsive. This way, boxes will be displayed conveniently on both wide and small screens. In the first case, they will be aligned next to one another. In the second case, they will be placed on top of each other.
4. Not Too Wide!
A rule of thumb is to stick to 550-600 pixels. This is because wider emails may be displayed incorrectly. Keep your messages narrow, so they can be viewed on any screen. There will still be enough space for an eye-catching design.
Testing is Crucial
Knowing how to send HTML email in Outlook is important. Do not forget to test your work before sending it. Check how it looks on every platform. This stage is worth your time, as it guarantees the right look.