Tips for Creating HTML Emails

As the webmaster for your Region, there is a likelihood that you’ll be asked to create HTML emails to be sent to the parents. HTML emails can be tricky because they don’t always display the same in every email client (similar to how an HTML page can display differently in different browers).

Here are some things to keep in mind when creating an HTML email:

Layout with Tables
Your email should be programmed in a table layout to make sure that everything displays the way it should. DIVs are not recommended because of the limits that certain email clients put on the use of style sheets.

Use Inline Styles Style sheets placed in the headers of an HTML email don’t always work, since some email clients (mainly Gmail) limit the types of style sheets accepted. DO NOT use an external style sheet. It won’t work. The best way to use styles is inline in the HTML. Stick with simpler styles, as some email clients are very restrictive. CSS Support: The Ultimate Guide is a good reference of which CSS styles will work with various email clients.



Displaying Links
Links are displayed differently in each email client. To ensure that your link color is translated through ALL email clients, use an inline style on the link tag as well as a span tag with the SAME style INSIDE the link tag. Here’s an example:

<a href="mylink.html" style="color: #000000;"><span style="color:#000000;">This is my link</span></a>

Displaying Contiguous Images
I’m sure you’ve received an email from a company that is made mostly of images. Sometimes you’ll notice white bars between the images. You can avoid that by adding a display: block tag onto the image. Here’s how it looks:

<img src="myimage.jpg" style="display: block;">

Always Use Absolute URLs
When displaying any images in your email, make sure you use absolute URLs. This means that you use the WHOLE url, instead of just the images/myimage.jpg part. If you use a relative URL, the image will be broken when sent to your membership. Below is an example of an absolute URL vs. a relative URL.

Absolute: http://www.ayso.org/Libraries/home-images/RegionToolkitBtn.png

Relative: Libraries/home-images/RegionToolkitBtn.png

Use as Much Text As Possible
To help your message avoid the spam filters, limit the amount of images in your emails and use as much text as possible. If there is text in your image, find a way to take it out of the image and make it HTML text. This will help the spam filter see that your email has real tangible content. If your text HAS to be in an image, make sure you use an ALT tag to display the text. If someone doesn’t download the images, they will at least see that text and know what is in the content of the email.

These are some of the guidelines we use here at the National Office to make sure our emails to you come through and are as widely viewed as possible. If you have any questions, please post in the comments!