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:
<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=”/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.
Related post:
Send HTML Email in Outlook 2010
Absolute and relative URLs
HTML Email – The good, the bad, and the ugly
Most popular email clients
Have another better way or find this article useful? Let me know what you think through the comment box below.
@Sarah: Not 100% sure what you meant. Talking about message size: from the email provider’s point of view, your message is indeed smaller in size, thus you pay less to your email provider – usually charge by the total size of all email during a certain period of time; however, from the recipient’s point of view, the recipient still has to download all images and text message; thus, the size of the final/complete message is pretty much the same regardless of attaching or linking to images.
This is an extremely helpful tutorial – thank you for writing it, it helped me a lot. I just have one question – and it may be a silly one, but I need to ask anyway – why is the size of the email message equal to the size of the emailed page? Isn’t the point of emailing a HTML page so that the images etc are hosted, not attached, and therefore the message size should be tiny..? I can only assume that Outlook (when receiving the email) is telling the user how large the final download will be, but if someone is lookign at the email and deciding whether to read it, a quoting the page size as the message size is misleading, as one could assume its an attachment they don’t want, especially when using HTML email in a marketing sense. Do you know what I mean?
[…] view images in HTML email, visibleranking.com […]
nice website.. i really enjoyed reading your post.
I was trying to add your RSS feed to my reader, but it didn’t work. =/ Any ideas on other ways to subscribe to your site?
-Bruno
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.
HTML is only good when you know how to control it.
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.
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.
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?
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.
HTML Email is now created in Outlook to give it connection and a life ONLINE. A TERRIFIC WAY to start off 2009!!
Visible Ranking wrote an interesting post today onCreate HTML Email In Outlook at Visible Ranking – Online Marketing […]