How to create beautiful HTML emails in MS Outlook
Ever wondered how people create those beautiful e-mails that popup in your Outlook mailbox every day? Emails that look like web pages. Emails that can be used for newsletters or marketing campaigns. You can do it too and it’s very easy to do. You would just need to know some HTML and have your beautiful images ready.
Inspecting the source code of an email in Outlook
You can start with looking at what and how others do. When you see an email in you Outlook’s Inbox that draw you attention you can easily inspect its "guts" – the source HTML code. In order to do this in Outlook 2013 (Microsoft Office 2013), open the email of your interest and click through Actions → Other Actions → View Source as shown in the following picture:
The HTML source will open in a Notepad window as shown in this picture:
Developing HTML code for emails
You can inspect that HTML code, explore, modify, and save it. You can also develop you own HTML code. Essentially, you develop HTML code for email the same way as you develop a webpage. There are, however, some rules for developing HTML pages for embedding them into Outlook email.
Outlook HTML rules
If you do not follow these rules, the inserted HTML code will not look right in the Outlook. So here are the rules:
- All links and images must use absolute URLs. Using relative URLs, something like
<img src="images/myimage.jpg">will not work, you have to use full URL like
- Do not use external CSS files for styles; use either embedded CSS that is placed in the
<head>section of your HTML, or inline CSS. Avoid using background images in your CSS.
- Outlook supports most, but not all HTML tags and attributes, so be warned.
Embedding HTML into Outlook email
When your HTML webpage is ready, you can embed it into Outlook email by clicking New Email → Attach File:
Then navigate to your HTML file, select the file (highlight it), and from the Insert drop-down box select Insert as Text:
Voila! - Outlook embeds your HTML file into the email body.
If you would like to delegate all or some of these steps - from creating images, compiling content or HTML, or conducting the whole e-mailing campaign - Lenetek will be happy to help.