Create HTML Email In Outlook

Step-by-step guide on how to create HTML email in Outlook 2003
Updated for MS Outlook 2007

MS Outlook icon

Already know about the good, the bad, and the ugly of HTML through the post about HTML email overview, let’s start creating an HTML email in Outlook.

Quick notes about Outlook 2003 and Outlook 2007: the process below is the same for both Outlook 2003 and Outlook 2007. The difference between these two versions of Outlook is not in the process of creating and sending HTML email but in the built-in HTML email readers. Thus, there may be a bit difference if you create HTML for Outlook 2003 and Outlook 2007, but there won’t be any difference if you create HTML in or with Outlook 2003 and Outlook 2007.

Creating HTML email requires web design and HTML coding knowledge either it’s designing with a web editor or hand coding with a text editor. Thus, if you’re not familiar with the above, you need to familiarize yourself with HTML, using a web editor, and creating web graphics first. This article only shows you the process of creating and sending HTML email with Outlook, not coding HTML nor using web editors.

The process involved in creating and sending out an HTML email with Outlook either it’s Outlook 2003 or Outlook 2007 includes the following steps:

Create the complete HTML file

HTML email is in fact similar to a single, stand-alone web page. The reason I use the term “stand-alone” because today many web pages are built on a Content Server Management System, or a [master] page template, page setup file. Those web pages are not stand-alone pages; they may have been constructed by compiling different separate files: the header file, the footer file, the navigation file, the sidebar file, the main content file and so on. Therefore, for your HTML email, you need to create a stand-alone normal HTML web page independent of whatever systems that you’re using. Here’s what I meant by a normal HTML file:

iContact.com - Email Marketing Service

<html>
<head>
<title>…</title>
</head>
<body>
…
</body>
</html>

SOME IMPORTANT NOTES:

Images used in the web page for your HTML email should always have the alt attribute and even the width and height attributes. Reason: if the images are blocked on the client computer, the structure of your email won’t be jeopardized, and people still know what the images are about thanks to the alt attribute. Also, the paths to those images and links to other pages on your website need to be ABSOLUTE paths like the ones below. Absolute paths start with http://www….. or https://www…. in case you’re not aware. Click here to learn more about absolute urls and relative urls.

<img src=”http://www.visibleranking.com/images/your_image_name.jpg” alt=”Image description” width=”abc” height=”xyz” />
or <a href=”http://visibleranking.com/2008/12/create-html-email-in-outlook.php”>

You can store the HTML file on your local drive, but it’ll be pushed live later together with everything else in the next step.

Push all images and the HTML file live

As mentioned above, images in the HTML email are not attached with the email, but they’re stored on the live server instead; therefore, your images must be on the live server before you can send out the test or the actual emails or else all the image links will be broken. The HTML file must be pushed live, too if you want the link “Having trouble viewing this email? Click here to view it online” to work.

Open HTML page in Outlook

a) Check to see if your Outlook is set to use HTML email: go to Tools > Options > click on Mail Format tab. If HTML is already there, you’re done with this step; otherwise, you’ll need to select HTML from the drop-down menu.

Create HTML

b) Open the Web toolbar in Outlook: right click on the top menu bar > click on Web to activate the Web toolbar. The [highlighted] Outlook address bar will appear.

Create HTML

c) Open HTML page through Outlook address bar: Type or copy the url of your HTML page and paste it to Outlook address bar, then hit Enter. If the path is correct, the HTML page will be opened inside Outlook.

If you see red x in place of your images — sign of broken images — it’s either because the images are not live yet, or your Outlook has not been set to view images in HTML emails. If the latter is the cause, you need to change your Outlook settings to display web images automatically by going to Tools > Options > Security tab then click on the button Change Automatic Download Settings. A dialog box will appear, then uncheck the box Don’t download picture or other content automatically in HTML e-mail.

Create HTML

Outlook settings can limit your ability to view images in HTML email, but they can’t limit your ability to send HTML email. Even if you don’t see the images due to the settings, you can continue with the next step.

Send the HTML email

In Outlook, click on menu Actions > Send Web Page by E-mail. Just add the recipients’ email addresses and the subject line and you’re ready to go.

There’re other similar ways to send out HTML email; however, the way above seems to be the easiest and works all the time.


Related post:
Absolute and relative URLs
HTML Email - The good, the bad, and the ugly


Feedback icon   Have another better way or find this article useful? Let me know what you think through the comment box below.


Category: Branding, Softwares, Web design, Web promotion

Tags: , , , ,

« HTML Email - The Good, The Bad, and The Ugly
Flash Website And Search Engines »

9 Responses to 'Create HTML Email In Outlook'

Subscribe to comments with RSS or TrackBack to 'Create HTML Email In Outlook'.

  1. Visible Ranking wrote an interesting post today onCreate HTML Email In Outlook at Visible Ranking - Online Marketing [...]

    Your Publicity To You

    1 Jan 09 at 7:23 pm

  2. HTML Email is now created in Outlook to give it connection and a life ONLINE. A TERRIFIC WAY to start off 2009!!

    Susan Baker

    2 Jan 09 at 10:17 pm

  3. HTML Email provides Feeds, Starter & Standard Editions~~~(accounts) Setting up and managing client accounts, Tools for Troubleshooting, finding web pages you want…..to mention a few benefits.

    HTML Email is created in Outlook to give it connection and a Life ONLINE.

    Susan Baker

    2 Jan 09 at 11:09 pm

  4. Agree with Susan! We just switched from Eudora to Outlook, and my team is all excited about the new capability to send out nicely formatted html email in 2009.

    I understand Outlook has a limit on the number of recipients — number of email addresses in the “Send to” field. Do you know the exact cap and if there’s a good program to handle sending email blast to say 500 recipients?

    Jessie Huang

    3 Jan 09 at 2:03 am

  5. I may know the answer to your question, Jessie. I’m doing some more research to see if it’s worth to do a separate post about using additional software together with Outlook to manage your distribution list.

    In the mean time, the cap for the distribution file per Microsoft, if I’m not mistaken is about 150-200 email addresses.

    Visible Ranking

    3 Jan 09 at 8:42 am

  6. I was using relative path to my images and the html email didn’t work, the whole layout was disrupted. Thanks for pointing that out in the post.

    Jon Ng

    6 Jan 09 at 7:35 am

  7. HTML is only good when you know how to control it.

    Cadence

    17 Jan 09 at 5:18 am

  8. it works! Thanks

    adjie

    5 Feb 09 at 6:28 am

  9. Amazing!, I was not aware of the absolute paths . No wonder I could not see the images. The email HTML need absolute paths to reference the image. Thanks. Good tutorial. But the email format/layout would not get disrupted if they were defined as seperate background images or divs.

    Usman

    5 Feb 09 at 7:08 am

Question, feedback or comment? Use the following form.

If you have a general suggestion, question, or comment not related to this post, please use the Contact us form.