A well-crafted email is one of the most effective communications tools available today.
Academic and administrative units who send HTML emails to internal and external audiences should use the university’s email templates to help properly identify their messages as coming from the University of Tennessee.
The HTML email templates allow you to create solid, consistent, responsive emails that function well across browsers and devices, without having to write your own code from the ground up.
A variety of templates with different layouts and color options are available for download. Get the templates and follow the instructions below to create your HTML email.
Using the HTML email Templates
- Visit the Brand Assets website.
- Choose which template you want to use and download the desired zipped folder.
- Unzip the folder and open the “.html” file .
- View source for the page and copy and paste all of the code into your HTML editor of choice (Dreamweaver, Coda, etc.).
- Save the file and upload it onto your web server in a folder you can easily identify.
- Edit, save, and upload any images to be included in your email. Make sure that all URLs referencing images on your web server are absolute (ie: http://site.utk.edu/email/images/image.jpg).
- Make sure all URLs that are included in the template are updated to reflect the email’s new location on your server.
- Use your email campaign tool of choice (Campaign Monitor, MailChimp, Constant Contact, UT Listserv, etc.) to send your email to its recipients. Be sure to read the comments included within the code for more information about building your email.
Follow these guidelines to ensure the best formatting of your HTML emails across a variety of email clients.
- Use white (#FFFFFF) background for your content area.
- Use Smokey gray (#58595B) text for running copy.
- If using thumbnail images (newsletter template), crop to 300px wide (or less) and keep associated blurb shorter than the height of the image.
- If using a splash image (e-blast template), crop to 600px wide and set width=”100%” in HTML markup.
- Use the left horizontal university logo at the top of the email with your unit name appearing beneath in HTML markup.
- Always use absolute URLs to reference images in your email.