Skip to main content

Secondary navigation:

Information Technology Services

Sending HTML Emails

using gmail or other email apps

Those who send HTML emails directly from their own email account or a department account (not through ITS Production Services) may encounter problems with HTML emails. (HTML emails are messages that contain inline graphics, such as newsletters, event invitations, or emails with a logo or BC seal.)

When you send an HTML email to others, the HTML formatting of the email cannot be guaranteed. To minimize formatting issues in HTML emails you create, see the design guidelines and resources below.

Design Guidelines

The biggest challenge for HTML email designers is building an email that renders well in all popular email applications. Building an HTML email is not like building an HTML web page. HTML emails look different depending upon the email application used to view the email.

The key is to focus on these things:

  1. Keep your HTML email simple. The more complex your email design, the more likely it won't render well on one of the popular email applications.
  2. Only use basic HTML code. That often means nesting tables, bringing CSS inline, and following the HTML coding guidelines outlined below.
  3. Make your email subject line interesting and an accurate reflection of the email's content. Check out this resource for ideas: The Art of the Subject Line
  4. Test your HTML email in as many email applications as possible before sending it.
HTML Coding Guidelines
  1. Use tables to layout your HTML email. Instead of setting the width of the entire table, set the width of each cell individually. 
  2. Use inline styles. Though on a website you might create a class, most browsers will block this out.
  3. Post your images on your publicly accessible web server. In your HTML code, use absolute paths to point to images.
  4. Give all images Alt tags and do not set width or height. Alt tags identify images for screen reader and other AT (assisted technology) devices.
  5. Wrap the entire email in a 100% width table. This is especially important if you want to create a background color for your entire email.
  6. Limit email width to 600px. 
  7. Use codes for all characters. This ensures all characters are displayed correctly by all web browsers and email applications. For example: For quotes, use " in the HTML.
  8. Do not use Javascript. Most emails that contain Javascript will end up in the spam folder.
  9. Test, Test, Test! Be sure to test your email on all major web browsers and email applications.