Wednesday, December 03, 2008
| Forward this Page to a Friend |
How to Make html eMails
Creating HTML Emails is not that different from regular web pages. HTML
emails can display images, a multitude of colors, and do it all in an
organized web format. However, there are some things to keep in mind.
Email programs are not browsers and they tend to have their own version
of html. Some of the tags that are used every day for web pages are
now ignored. Let’s start with the tag.
<body>
The <body> tag is allowed to be used, however, do not use any properties (ie. link, alink, bgcolor, etc…). Most email programs will ignore the properties. <img>
Using the <img> tag is slightly different than traditional webpages. Images are not stored in the email, so calling an image locally will not work. The images must be stored on the internet and a web address must be used to display them. Here is an example: Code:
<img src=”http://www.example.com/images/test.gif” width=”35” height=”55” alt=”test”> Putting this <img> tag in your webpage will show the test picture even though the image has not been saved. This remote call of the image is how html emails displays images. Notice the width and height properties. By specifying the size properties, the email download time is drastically reduced being that the computer doesn't have to search for and retrieve that information. Always use an <alt> tag. The visually impaired have readers that speak <alt> tags. <a>
One of the most common uses for the anchor tag is to make a hyperlink. The hyperlink tag should always include the target=”top” property. This will ensure that the the link will open in a new window. Most email programs do this automatically, but it is always best to play it safe. <font>
<Font> tags are great for changing the way text looks. Font tags need to have all the necessary formatting properties in it since the email can’t rely on the <body> tag or Cascading Style Sheets (CSS). Sticking to straight html is the best idea when it comes to developing html emails. Also, when specifying the type of font, pick common font types (Times new roman, Arial, etc…). Otherwise, as the email is being opened, a download box will open asking to download the new font. <table><tr><td>
Table tags in html emails are the same as table tags in html pages. In fact, the formatting capabilities of tables is one of the number one reasons why html emails look so attractive to the user. One thing to remember is to keep the tables under 600 or span them using 100% in the width property (See Pixel Width). Images
Images can eat up the download time. Studies have shown that users are not patient when it comes to the downloading of a webpage. Users generally won't wait longer than a few seconds to view an email. Keep images around 5 – 15k in size and keep the combined total (images, code, attachments, etc… )of the html email under 100k. Script (ex. Javascript)
While scripting can be done, it really isn’t good at this time to include scripting. The compatibility of a script with the user's email program may cause some problems. Having a script debug error pop-up may get the html email deleted. Even worse the script may cause the html email to be labeled as a virus. Text Alternative
Always include a text alternative to html email. Not all user's have the capabilities to see the pretty images that will be included in the html email. Just slap together a text version, not exactly? One problem that a text email has is the number of text characters that can used before it wraps. When a text message wraps, it tends to lose any type of formatting. To fix this problem, do not make any line bigger than 60 – 65 characters in length. Pixel Width
Generally, the width needs to be somewhere between 400 and 600 pixels wide. 600 pixels wide is probably the most popular and works perfect most all of the time. The html email message can span across the largest space available if 100% is used instead of an exact number for the width. This article has been a review of the basics in creating an html eMail.(Back to the Library Menu)
Still confused? (How to Make html eMails - Part 2) is here to help.
The <body> tag is allowed to be used, however, do not use any properties (ie. link, alink, bgcolor, etc…). Most email programs will ignore the properties. <img>
Using the <img> tag is slightly different than traditional webpages. Images are not stored in the email, so calling an image locally will not work. The images must be stored on the internet and a web address must be used to display them. Here is an example: Code:
<img src=”http://www.example.com/images/test.gif” width=”35” height=”55” alt=”test”> Putting this <img> tag in your webpage will show the test picture even though the image has not been saved. This remote call of the image is how html emails displays images. Notice the width and height properties. By specifying the size properties, the email download time is drastically reduced being that the computer doesn't have to search for and retrieve that information. Always use an <alt> tag. The visually impaired have readers that speak <alt> tags. <a>
One of the most common uses for the anchor tag is to make a hyperlink. The hyperlink tag should always include the target=”top” property. This will ensure that the the link will open in a new window. Most email programs do this automatically, but it is always best to play it safe. <font>
<Font> tags are great for changing the way text looks. Font tags need to have all the necessary formatting properties in it since the email can’t rely on the <body> tag or Cascading Style Sheets (CSS). Sticking to straight html is the best idea when it comes to developing html emails. Also, when specifying the type of font, pick common font types (Times new roman, Arial, etc…). Otherwise, as the email is being opened, a download box will open asking to download the new font. <table><tr><td>
Table tags in html emails are the same as table tags in html pages. In fact, the formatting capabilities of tables is one of the number one reasons why html emails look so attractive to the user. One thing to remember is to keep the tables under 600 or span them using 100% in the width property (See Pixel Width). Images
Images can eat up the download time. Studies have shown that users are not patient when it comes to the downloading of a webpage. Users generally won't wait longer than a few seconds to view an email. Keep images around 5 – 15k in size and keep the combined total (images, code, attachments, etc… )of the html email under 100k. Script (ex. Javascript)
While scripting can be done, it really isn’t good at this time to include scripting. The compatibility of a script with the user's email program may cause some problems. Having a script debug error pop-up may get the html email deleted. Even worse the script may cause the html email to be labeled as a virus. Text Alternative
Always include a text alternative to html email. Not all user's have the capabilities to see the pretty images that will be included in the html email. Just slap together a text version, not exactly? One problem that a text email has is the number of text characters that can used before it wraps. When a text message wraps, it tends to lose any type of formatting. To fix this problem, do not make any line bigger than 60 – 65 characters in length. Pixel Width
Generally, the width needs to be somewhere between 400 and 600 pixels wide. 600 pixels wide is probably the most popular and works perfect most all of the time. The html email message can span across the largest space available if 100% is used instead of an exact number for the width. This article has been a review of the basics in creating an html eMail.
3905 NW 36th Street - Oklahoma City, OK 73112
(405) 239-6245 or 1-800-305-8051
E-mail: info@wolfmailing.com