Email Templates

UA-themed responsive HTML Email templates are available for use by any official unit of The University of Alabama. The templates are flexible and are easily customized to the needs of your division, college, department or other group by any web designer who has an understanding of HTML, CSS layout and basic image editing software.

The templates are designed to be easily utilized by a web designer or technical specialist who is comfortable with basic HTML editing.

The templates are optimized for mobile devices and are tested to be widely-compatible with a wide range of email clients, including:

• Outlook 2010 – Outlook 2016
• Gmail
• Yahoo! Mail
• iCloud Mail/Apple Mail

PLEASE NOTE: These templates are ONLY authorized for use by official University of Alabama entities or organizations, and any other usage of the code or images contained within these packages is in violation of the University’s Copyright Policy.

Email Design Guidelines

Before you start customizing these HTML email templates, here are a few guidelines to keep in mind:

• Assume images will be blocked — Email clients commonly block images so important information should be built as text, not as a design element. If you do have an image, make sure the alt tag is used for that some text will show up telling a viewer what the image says/looks like. Also, make sure your images are direct linked or else they will not show up in your email even if a viewer selects ‘view images’. A full address to the image must be used instead of a relative one.
• For best results with text based images (such as logos), make your images png format.
• Design it like it’s 1999 — For better or worse, email clients still render HTML in ways that are more similar to 1990s web design practices than current ones. If you make any major coding (i.e. HTML) changes to the templates, be aware that tables are essential for correct cross-client rendering.
• Keep your email content within 800 to 600 pixels wide. The current email templates are flexible, but they also keep the actual content at 600 pixels when at their largest.
• Make sure your CSS styles are inline. Most email clients will not keep header styles so be sure to inline all of your CSS. No email client accepts a separate style sheet.
• Test, test, test — While we have made many efforts to ensure the templates below will display correctly in every email client, it is always a good idea to test your emails before delivering.

Questions?

If you have any further questions about the use of these templates, please contact us at web@ua.edu.