Lenetek Blog

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:

Lookup HTML code of MS Outlook email

The HTML source will open in a Notepad window as shown in this picture:

HTML source code of the MS Outlook email

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:

  1. 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 <img src="http://www.somedomain.com/images/myimage.jpg">.
  2. 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.
  3. Do not use Javascript in HTML as it only works in web browsers, not MS Outlook.
  4. 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:

Embedding HTML file into MS Outlook email

Then navigate to your HTML file, select the file (highlight it), and from the Insert drop-down box select Insert as Text:

Insert HTML file into MS Outlook email

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.

☆☆☆☆☆

Comments

  1. Posted September 16, 2017 at 10:30 am

    Helpful insight.

Post a comment

Your email is never published nor shared.