Step-by-step guide on how to create HTML email in Outlook 2003
Updated for MS Outlook 2007
Already know about the good, the bad, and the ugly of HTML email through the post about HTML email overview, let’s start creating an HTML email in Outlook 2003 or 2007.
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:
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=”/images/your_image_name.jpg” alt=”Image description” width=”abc” height=”xyz” />
or <a href=”/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.
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.
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.
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.
Send HTML Email in Outlook 2010
Absolute and relative URLs
HTML Email – The good, the bad, and the ugly
Most popular email clients