1. Computing

Discuss in my forum

How to Send HTML Email

Part 2: How to Use Mail Clients to Send HTML Email

By

Email

Email

Image courtesy svilen001 from Stock.Xchng
Gmail WYSIWYG tools

The WYSIWYG tools in Gmail are fairly basic, but good enough for basic HTML email messages.

Screen shot by J Kyrnin
Forcing Gmail to use HTML email

It is possible to get Gmail to float images and use background images if you trick it.

Screen shot by J Kyrnin

Most modern email clients send HTML email by default when that mail is written in the email client itself. For example, Gmail and Yahoo! mail both have WYSIWYG editors built-in that you can use to write HTML messages. But if you want to write your HTML in an external editor and then use that in your email client it can be a little trickier.

First Steps for Writing Your HTML

If you're going to write your HTML messages in a different editor such as Dreamweaver or Notepad, there are a few things you should remember so that your messages will work.

  • Your images should be hosted on a public website. They don't have to be on a web page, but they need to be visible from the internet.
  • Write your image SRC attributes with the full URL of the image. Be sure to test that the image dislpays before you send your message.
  • Do not use relative paths on links. You should use fully-qualified URLs for links as well.
  • If you are using CSS, you should either embed them in the HTML using the STYLE element or link to them with a fully-qualified URL.
  • It's best to avoid JavaScript, but if you must use it, you should embed it with the SCRIPT element.

You should also remember that while email clients are getting better, you can't rely on them to support advanced features like Ajax, CSS3, or HTML5. The simpler you make your messages, the more likely they will be viewable by most of your customers.

Tricks for Embedding External HTML into Email Messages

Some email clients make it easier than others to use HTML that was created in a different program or HTML editor. Here are some short tutorials for how to create or embed HTML in several popular email clients.

Gmail
Gmail does not want you to create HTML externally and send it in their email client. But there is a relatively easy way to get HTML email to work—use copy and paste. Here's what you do:

  1. Write your HTML email in an HTML editor. Be sure to use full paths, including URLs to any external files as mentioned above.
  2. Once the HTML file is complete, save it to your hard drive, it doesn't matter where.
  3. Open the HTML file in a web browser. If it looks as you expect it (images visible, CSS styles correct, and so on), then select the entire page using Ctrl-A or Cmd-A.
  4. Copy the entire page using Ctrl-C or Cmd-C.
  5. Paste the page into an open Gmail message window using Ctrl-V or Cmd-V.

Once you've got your message in Gmail you can do some editing, but be careful, as you can delete some of your styles, and they're difficult to bring back without using the same steps above.

Mac Mail
Like Gmail, Mac Mail doesn't have a way to import HTML directly into the email messages, but there is an interesting integration with Safari that makes it easy. Here's how:

  1. Write your HTML email in an HTML editor. Be sure to use full paths, including URLs to any external files as mentioned above.
  2. Once the HTML file is complete, save it to your hard drive, it doesn't matter where.
  3. Open the HTML file in Safari. This trick only works in Safari, so you should get used to testing your HTML email in Safari even if you use another browser for most of your web browsing.
  4. Verify that the HTML email looks how you want it to look, and then import it to mail with the shortcut Cmd-I.

Safari will then open the page in a mail client exactly as it's displayed in the browser, and you can send it to whoever you want.

Thunderbird
By comparison, Thunderbird makes it simple to create your HTML and then import it into your mail messages. Here's how:

  1. Write your HTML email in an HTML editor. Be sure to use full paths, including URLs to any external files as mentioned above.
  2. View your HTML in code view, so that you can see all the < and > characters. Then select all the HTML by using Ctrl-A or Cmd-A.
  3. Copy your HTML using Ctrl-C or Cmd-C.
  4. Open Thunderbird and start a new message.
  5. Click on the “Insert” menu and choose “HTML...”.
  6. When the HTML pop-up window appears, paste your HTML into the window using Ctrl-V or Cmd-V.
  7. Click on the “Insert” button and your HTML will be inserted into your message.

One nice thing about using Thunderbird for your mail client is that you can the connect it to Gmail and other webmail services that make it difficult to import HTML email. Then you can use the steps above to create and send HTML email using Gmail over Thunderbird.

Remember, Not Everyone Has HTML Email

If you send HTML email to a person who's email client doesn't support it, they will get the HTML as plain text. Unless they are a web developer, comfortable with reading HTML, they may see the letter as a lot of gobbledegook and delete it without attempting to read it.

If you're sending out an email newsletter, you should give your readers the opportunity to choose HTML email or plain text. If you're just using it to send to friends and family, you should make sure they can read HTML email before sending to them.

First page> Sending HTML Email > Page 1, 2

Previous Features

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. HTML and XHTML
  5. Intermediate Tutorials
  6. How to Send HTML Email

©2014 About.com. All rights reserved.