For a better experience, click the Compatibility Mode icon above to turn off Compatibility Mode, which is only for viewing older websites.

Guide to Crafting HTML Emails

The guidelines below are a work in progress. If you or your department would like to craft custom HTML for your mailing, here's what you need to know to get started.

Drexel IT strongly advocates that all HTML mass emails be made accessible according to the Americans with Disabilities Act (ADA). Text of messages should be made available to screen readers, either within the email message itself (outside of images), or on a Web site linked in the email message. All integral images should also have alt tags (images that are part of the design can use "empty" alt tags).

Drexel IT’s HTML templates are the default templates for all unformatted messages sent to the Mass Mailing team for distribution to IT-maintained lists. Only unformatted messages sent to Drexel Official Mail, Drexel Announcement Mail, or Drexel Special Mail will use these templates.

Any images within a mailing MUST be hosted on a server/Web page and linked with their full URLs in the HTML message/template.

Flash, animation, or JavaScript does not render well in email. Instead, consider linking to any animations or movies on a Web site.

Requestors who are crafting their own HTML might find the following page from the Email Standards Project helpful: http://www.email-standards.org. MailChimp, a third-party HTML email distribution service, also offers excellent advice: http://kb.mailchimp.com/article/top-html-email-coding-mistakes.

Drexel IT will test all new HTML templates or one-time HTML messages. We request at least three business days to test new HTML, but the more time provided, the better. We test HTML emails through the following clients:

  • Microsoft Outlook 2003/2007/2010
  • Apple Mail/Entourage
  • Mozilla Thunderbird
  • Google Gmail
  • Windows Live Hotmail
  • Webmail and DrexelOne (Convergence)
  • Litmus (includes a variety of clients and versions)

Requestors can specify email addresses to have the test emails sent to.

Once HTML templates have passed testing, future messages that use the template will only be tested by request. If templates or one-time messages do not fully pass testing, the final decision to revise or send as-is will rest with the requestor. If needed, IT can also format the message into one of our default templates to expedite distribution.

HTML Email Tips

If your department is crafting its own HTML, here are a few things to keep in mind:

  1. HTML for a Web page is NOT HTML for an email message. HTML has come a long way since its development. But while there are a number of great styles or elements available to Web page designers, HTML for email must be designed according to the lowest common denominator: the least compatible but still commonly-used email client. In this case, it’s often Microsoft Outlook.

  2. Messages heavy on imagery and short on text might get tagged as spam. Not only are image-only or image-heavy messages problematic for those with disabilities; they are also much more likely to get tagged as spam before anyone ever sees the message. Some email clients also block images by default, and recipients might delete the message rather than load the images. Instead, consider formatting text outside of graphics, or linking your image or text to a Web site with accessible information.

  3. Use tables for design layouts. Since email clients render design elements differently, use tables rather than divs or fancy positioning for your layout to ensure the best results (see below for more information).

Design for Graceful Degradation

  • Width of HTML emails should not exceed 600 pixels wide for one column designs and 800 pixels wide for two column designs.

  • Images should be uploaded to your Web server and referenced in your HTML email using explicit links (e.g. – http://www.drexel.edu/department/image.jpg)

  • Never rely on images, especially large ones, to communicate important information. A majority of email clients have images turned off by default. Unless the user takes some initiative, you may have just sent them a blank message. You should either repeat the message below the image using plain text or include a link at the top of the email to a webpage with a copy of the HTML email for those having trouble reading it in their email client.

  • Never rely on background images to make text readable. Make sure your text has enough contrast with or without images enabled. Outlook 2007, for example, will not display background images in table cells even if images are turned on. To get around this, apply a background color to the table and a background image to the cell(s). Most email clients will display the background image while Outlook 2007 will display the background color instead.

  • Provide a link for people who are having trouble viewing your message. This isn't absolutely necessary - but it's thoughtful to give your subscribers the option to view your message in their Web browser.

  • Use ALT tags on important images. With images disabled by default, descriptive ALT tags are your last, best chance to convince a user to enable images. Keep ALT tags concise, as some email clients may not display them properly.

  • Adding ALT tags to elements that only serve for design purposes clutters the design and distracts readers from your message. Fill in the ALT tags that matter and leave the others blank.

Use Tables for Structure

  • Make sure to set all available table attributes where possible. This includes cellpadding, cellspacing, border, valign, width and height.

  • Nested tables are extremely useful. Make sure to use proper indentation for clean, easy-to-read code.

  • Use the background attribute on a table cell to set background images. This is the easiest way to get past backgrounds not displaying in Gmail.

  • Note: Your background images will behave as if they were tiled, so plan accordingly for image size.

  • Be aware that Outlook 2007 does not support background images applied to tables or divs. In fact, the only way to use a background image in Outlook 2007 is to apply it to the body of an email, but this image will not be supported by other email clients such as Gmail, Yahoo, or Windows Live Hotmail.

Use Inline Styles when Coding CSS

Some popular email clients ignore the code inside your head tags. Gmail and Hotmail are particular culprits that come to mind.

With your layout set up in table format, it's time to apply styles to your text and images. Here are some tips and tricks to ensure that your message looks nearly identical in every browser or client.

  • Use break tags as a replacement for vertical padding. To alter the amount of space they consume, try wrapping breaks
    in span tags and set a smaller/larger font size.

  • Use inline styles repeatedly and often. Applying a font tag to a parent table doesn't necessarily mean it will carry that attribute down to all of its children. Make sure to set inline styles on all of your HTML elements.

  • Apply detailed inline styles to links, especially for Gmail users - you must set specific styles to every link. Otherwise, they will inherit the default font-family, size and color set by each user's browser.

  • Wrap your images in span tags and set font attributes to style your ALT text accordingly. This allows you to style your ALT text, making it more readable when images are disabled.