How to Build a Custom HTML Email Template

Building a custom HTML email template is a time-saving exercise that allows you to create enhanced messages for indefinite use. Templates permit you to do the layout and design of your message just once so that you can go straight to editing the content the next time. Because the popularity of HTML email is growing, many email applications are now equipped to handle HTML, and the various uses for personal and professional functions continue to increase.

Difficulty: Moderately Easy

Instructions

Things You'll Need:

• HTML text editor
• Email application
• Web server

1. Open a new file in an HTML text editor, such as BBEdit or Dreamweaver.

2. Create a table to hold your email message. HTML tables work better for the design and layout of an email message.

3. Enter your text.

4. Add any inline CSS formatting for fonts or background colors, if preferred. Keep the CSS to just fonts or format, because some email applications will not display anything more complex than that.

5. Insert any desired graphics into the page. Keep the graphics to a minimum so as not to create long download times for your email recipients.

6. Name your file "template" and save it with the ".html" extension. In some HTML text editors, such as Dreamweaver, you can choose to save your file as a template from the toolbar. This allows you to name and describe your template for future use.

7. Place your HTML file and any graphics into a folder on your web server. All HTML files and graphics must have an absolute URL to work, for example, http://www.mywebhost.com/images/graphic.jpg

8. Create copies of your HTML email template by using your HTML text editor's Copy function. You can now create a new message containing the master outline.

Tips & Warnings

• Send a copy of the email to yourself and someone else to ensure the message appears correctly. Create and link a text version of your HTML message in case your recipients have an email application that does not allow HTML. Keep your design simple so that recipients with slower connections or smaller monitors can read your email successfully.
• Do not complicate your HTML file with Flash or Javascript, because the message will not render correctly in the email application. Never use an external CSS style sheet, because some mail applications automatically delete these.

References

• How to Create and Send HTML Email

Resources

• How to Code HTML Email Newsletters