The University of Tennessee, Knoxville

Office of Communications and Marketing

Best Practices, Recommendations, and Resources

HEADER

If you choose to use an image in your unit header, work to keep it simple and muted. Bear in mind that it will appear on each page of your website and may provide an unintended visual association or identity for your unit. Additionally, too much color will distract from the unit name/description text in the header. Make sure that the unit name is still clearly legible.


MAIN CONTENT

HEADINGS

Use heading tags (such as <h1>, <h2>, <h3>) to add hierarchical structure to your content. Do not use them to add design elements.

Visitors using screen readers rely on logical hierarchies to access your content.

TABLES

Tables do have a legitimate purpose in modern, standards-compliant web design—namely, to present tabular data such as lists of faculty contact information, event information, etc.

Tables should never be used as structural elements in web design. The single exception to this rule is when designing HTML e-mails. Given the utter lack of standardization across e-mail clients, tables are a vital tool for ensuring that the structure and formatting of your e-mail is preserved across platforms and devices.

Note: In the coming week, we will be offering HTML e-mail templates for download from this website.

"ALT" TAGS

As a public university, we must strive to make our content as accessible as possible to all our visitors. When using images in your content area, be sure to provide alt tags with a brief description of the image for your visitors who cannot see image content. Also, try not to provide important information only in graphics. Make sure all of your important content, particularly action items, appears in text format as well.

USING ORANGE TEXT

The hexadecimal code for UT Orange is officially #F77F00; however, this color doesn’t serve well as a text color. We recommend using #D97138 when you need to use orange text. We also recommend using colored text sparingly for legibility considerations—for header text and links, but not for large blocks of text.

LEGIBILITY TIPS

Good web design often falls to the background, allowing the content of your website to dominate the visitor’s attention. Be sure to include ample line-height, padding around images and other elements, and adequate font size (all of these things are accounted for in our CSS). Avoid using black text (#000000) on a white background (#FFFFFF), or the reverse—the stark contrast between the two can be hard on eyes already taxed by bright monitors. Avoid using full-width columns to display lengthy blocks of text. A two-thirds column provides an ideal width for reading text.


FOOTER

Use the footer navigation area only if you have several content blocks or lists of links that you want to appear on every page of your website. An example of such a content block is departmental contact information.


RESOURCES

Internal

Starting out

HTML

CSS

Books

Contribute to a big idea. Give to UT.

The University of Tennessee. Our New Tagline Here.

Knoxville Tennessee 37996  |  865-974-1000
The flagship campus of the University of Tennessee System.