Designing a good HTML e-mail is a much trickier enterprise than designing a modern website. Unlike web design, in HTML e-mail design, there are no standards. Your audience treats HTML e-mails differently as well. It's commonly accepted that the attention span of a person visiting a website is something less than...oh, what was I saying? Shiny object!
For HTML e-mails, that elusive attention span is even shorter.
All of this presents a number of challenges for planning and building HTML e-mails.
With these questions in mind, here are a few best practices for HTML e-mail. Or, you can jump to the requirements and downloads section.
A well-designed HTML e-mail uses what is generally considered to be "deprecated" or outdated code. Tables are used to structure layout (this is a big no-no in general web design, where tables should be limited to presenting tabular data and CSS should be used for layout). As you attempt to force image alignment across e-mail clients (e.g., Outlook, Gmail, Yahoo!, Lotus Notes, Apple Mail, Thunderbird, etc.), you'll find 1990s-era code creeping back into your HTML lexicon—valign, vspace, hspace, etc. We sometimes call this "coding like it's 1997."
Many e-mail clients will also strip external or embedded stylesheets out of your HTML e-mail—helpful, no? No. And forget trying to "float" your images. Some clients ignore floating altogether.
To avoid this madness, we typically style our HTML e-mails using tables, inline CSS, and deprecated codes where necessary. Still, given the chaos of HTML e-mail presentation, we sometimes find that our e-mails have been rearranged in interesting ways.
The sheer number and variety of platforms and operating systems only serves to feed the chaos. A single member of your target audience may open the same HTML e-mail on her smartphone, her iPad, her desktop client on a Mac or a PC (or both), and her web client. She may use the native functionality of her tablet device to open the e-mail, or she may use a web client from within that tablet's proprietary web browser.
If web design requires us to release our expectations of being able to control visual presentation, HTML e-mail design forces us to embrace the anarchy of the medium, and it requires us to be very resourceful—and to not forget anything we've learned since 1995.
Sorry, but you can't embed video in your HTML e-mail. That fancy Flash presentation you'd like to send around is a no-go as well. You can use an HTML e-mail to promote and provide a link to a video or animated presentation that is hosted on your website, though.
Another thing to consider—don't count on your images always being displayed. Most clients have security settings that disable images until (or if) a user chooses to display them. Unless he chooses to display images, your reader may never see those lovely graphics and photographs you spent so many hours assembling. For that reason, it's important to never include important information in an image or graphic.
Adding background images is tricky, and we generally avoid it. Also, you should never include scripts that execute upon opening a message. That's a sure way to get your e-mail blocked or otherwise disabled by a client.
All of this makes for a very restrictive scenario within which to craft your electronic message. We often find that creativity flourishes within tight spaces, though, and a few of us love the challenge of designing within a 600-pixel-wide box. At the very least, design restrictions help keep the focus where it should be: on your content.
Users with certain versions of the Microsoft Outlook e-mail client for PC can send HTML formatted e-mails using their desktop client. Please do not use this method for e-mails that are sent to a large audience. It puts a lot of stress on our internal mail servers. If you have any questions about what constitutes a "large audience," contact the OIT help desk.
If you want to track HTML e-mail open rates, click-throughs, etc., you can subscribe to an e-mail campaign service like MailChimp, Active Campaign, or Campaign Monitor. If you choose to go this route, be sure to pick a service that will allow you to test your HTML e-mail before sending it. Fees for sending HTML e-mail campaigns using these types of services are typically reasonable. Please be aware that these services will require you to include an UNSUBSCRIBE link in your e-mail, and many will offer the option to automatically insert such a link. This is in accordance with the CAN-SPAM Act, and is a best practice for large e-mail campaigns that go to an "external" (that is, external to the university) audience and/or are not official university communications.
If your campus LISTSERV is configured to send HTML e-mails, you may use that option as well.
Some departments and units have access to contact management systems that are set up to send HTML e-mails.
In very limited cases, the university's broadcast e-mail system can be used to send HTML e-mails. Use of the broadcast e-mail system is reserved for messages from top administrators and to inform the community about emergencies or serious disruptions of campus operations. All requests to send a broadcast message must be approved by the vice chancellor for communications. The design of HTML e-mails sent via the university's broadcast system must be approved by the Office of Creative Communications.
We receive requests to design "e-newsletters," "e-postcards," announcements, invitations, and just plain letters—all for presentation in HTML e-mail format. Chances are, if you're here, you've been asked to design one of the above. Is HTML e-mail the best way to reach your audience, though? Here's where some communications and marketing "best practices" advice comes in handy.
First, know your audience. Are they older or younger? What are their communications expectations? Do they care about e-mail? Printed postcards might be better for reaching certain audiences, as might a printed newsletter or magazine. HTML e-mail is cheap, though—and if you use a service like Campaign Monitor, MailChimp, or another proprietary contact management system, you can track metrics like open rates and click-throughs.
If you do determine that HTML e-mail is the best way to go, you'll need to write a very catchy subject line to make your message stand out among the hundreds of others in your target audience's inboxes. You'll also need to keep your message as concise as possible, driving your audience to read complete information on your website. Research continues to show that people simply do not expect to find all of your content in your e-mail. Instead, they are scanning for hooks—things that draw them in and make the information interesting and relevant to their needs.
Want to learn more? OIT offers free technology workshops, including on how to build HTML e-mails. Check their training website for course offerings and a schedule.
There aren't many:
In our samples, we've also provided an example "unit identifier" header that is similar to what we recommend for use with the web templates. For HTML e-mails, this is optional—but design touches like this can serve as a simple way to improve recognizability across messages coming from your unit. This also facilitates communication with your audience by clarifying the source of the message. If you do choose to use a unit identity header in your HTML e-mails, please be sure that it conforms to standards for web template use (and better yet, that it is visually consistent with your unit's website identity header).
There's only one file to download. What's in it?
Please note: When saving UT headers in Photoshop, please use the "Save for Web & Devices" option, and save as GIF 128 Dithered. This is the best way to preserve seamless color between header image and background color. Also, please use the gray wordmark on lighter backgrounds and the white wordmark on darker ones.
Here are some examples to demonstrate the variety of options for presenting your content in an HTML e-mail.
More color combination advice can be found on our palette page.
Knoxville Tennessee 37996 | 865-974-1000
The flagship campus of the University of Tennessee System.