Web Design Guidelines

The design guidelines for Yale University Library websites are an extension of the general Yale identity.

If you have questions about these guidelines, please contact one of the people below:

Typography and Logos

Yale Guidelines and Yale Fonts

The library follows the guidelines set out in Web Logos, Typefaces, Colors .

If you are planning on using Yale fonts for the Yale logo, The Yale University Library wordmark, or for other branding purposes like names of libraries, collections, departments, events or services, please contact Tricia Carey.

If you are working with YaleSites, the Yale fonts may be available through the @font-your-face module.  If you are planning on using the Yale font in place of a graphic listed above, you should review how YaleSites has implemented the fonts.  Again, if you have any questions contact Stevev Wiedaa.

Serif

Serif font should generally be used only for block and page titles.  In CSS, serif fonts should be listed in this order:

Georgia, 'Times New Roman', Times, serif

If you wish to include a Yale font as the first serif option, be aware that it will not be available on most web clients.  If you do have a way of uploading fonts to clients using a service, you should still use Yale fonts sparingly, and test them on mutiple combinations of hardware, operating systems and browsers.  Not all Yale fonts work well at lower resolutions and lower sizes.  For more information see this page on Typefaces.

Sans-serif

Most content should be in sans-serif fonts. In CSS, sans-serif fonts should be listed in this order:

Verdana, Helvetica, Arial, sans-serif

The Yale Logo and the Library wordmark

Please review the printer's office for policy on placing The Yale logo & Wordmarks.

In addition, web pages should also include the Yale University Library wordmark, or another graphical header that is approved by Steven Wieda and the Printer's office.

High quality versions of the library wordmark are available by contacting Steven Wieda at the links near the top of this page.

Color

Creating color palettes for the web requires a great deal of thought and testing.  If you are considering going beyond the recommended palettes below, please contact Matt Walker or Tricia Carey.

Yale Guidelines

Yale has several official web color palettes to choose from on their Colors.

Web Palette

While, the library does not have an official color palette, the palette below, is currently being used on the main library website.  It combines several colors from the Yale color palettes above, with colors that are similar to those already used on other library websites or in print communications.

Click on the image for a larger version:

HTML Markup

In general, HTML tags in the main content area of a site should be used without additional classes or in-line CSS styling.  This provides consistent styling across an entire site.  Differences in styling of the same HTML elements in different parts of the site should be provided by CSS selectors that start with structural elements of the region being targeted (usually <div> tags).

Yale Guidelines

The HTML markup on library websites should follow the general Yale guidelines at YaleSites that deal with HTML.  In addition, HTML should meet Yale's accesibility requirements, especially:

Never choose an HTML tag based on how it looks, as this may confuse screen readers for the blind, and may also decrease the relevance ranking of your content to web search engines.

HTML 5

The main website for the library uses HTML 5, and this is the recommended version of HTML to use for new sites.  However, new semantic/structural elements in the HTML 5 standard, should be used with caution and tested extensively on older browsers.  Other elements (for media, the <canvas>, form elements, and new input types) should probably be avoided.  Most new structural elements (<article>, <header>, <footer>, <section>, etc.) are not styled in our base theme, and should be considered the same as the <div> tag for layout purposes.

Anchors

Paragraphs vs. Divisions

Other Tags

 

Headers

Header tags should be used sparingly to separate distinct parts of the document.

Header 1 & Header 2

The Header 1 tag <h1> should only be used once on a page for the title of the main content.  The phrase "Headers" at the top of this page is an example of the Header 1 tag.

The Header 2 tag <h2> is generally reserved for navigational elements.  The menu options at the top of the page ("Research", "Services", etc.) and the phrase "Web Design Guidelines" at the top of the table of contents on the left are examples of Header 2 tags.

Header 3 & Header 4

The Header 3 tag <h3> should be the first level used in the main content, after the <h1> tag at the top.  The phrase "Header 3 & Header 4" at the top of this section is an example of the Header 3 tag.

Header 4

The Header 4 tag <h4> should be used to further divide sections between the Header 3 tags.  Many pages may not need Header 4 tags.  The phrase "Header 4" above is an example of the Header 4 tag.

Header 5 & Header 6

Currently, Header 5 <h5> and Header 6 <h6> are not styled in the library's base theme.  If you find that you need this level of division on a single page, you should consider breaking up the content into separate pages.

Lists

The YUL theme supports three basic lists: ordered <ol>, unordered <ul>, and definition <dl>.

Just like tables, lists should only be used for their proper semantic meaning, not for layout. If you find that the default styling for a list is not working for what you need, contact Library IT. They will help you come up with a solution that is easy to maintain. Do not try to "force" lists to display differently using in-line CSS or WYSIWYG buttons.

Ordered & Unordered Lists

Ordered lists <ol>, and unordered lists <ul> both have the same child tag, a list item <li>.

Unordered lists are also called "bullet lists":

  • Item 1
  • Item 2
  • Item 3

Ordered lists are commonly referred to as "numbered lists":

  1. Item 1
  2. Item 2
  3. Item 3

Ordered lists can use other ordinals, like roman numerals and letters of the alphabet. These others may, or may not, be supported by the software you are using to create your pages. As always if you need help, please contact Library IT

Definition Lists

Definition lists <dl> have two child elements: definition terms <dt>, and definition definitions <dd>. Definition lists are good for anything where you have a short title (term) and a short description (definition), like a glossary or a list of external links:

Ordered List
Often called a "bullet list", it is a list of items each on a separate line, preceded by a marker (the bullet)
Unordered List
A "numbered list", it is a list of items each on a separate line, preceded by a counter that increments each line.

Tables

HTML tables <table> should be used sparingly, and only for information that truly belongs in a table. Tables should not be used just for layout.

Also, you should not be hand-coding very large tables, tables that need to be updated regularly, or tables that re-create data that is stored elsewhere. If you find yourself spending a lot of time keeping tables up-to-date, or you need advanced functionality (like the ability to sort by column) you should contact library IT about creating a more sustainable solution.

Currently, tables have the default YaleSites styling, and all tags unique to tables are supported:

caption
thead th 1 th 2
tbody td 1 td 2
tr 2 td 1 td 2
tfoot td 1 td 2

Paths / Aliases

Some of this documentation is specific to the Drupal part of our website, but the rest is recommended for any web paths that we have control over.

Format

Ideally, paths should be lower-case letters, numbers, and slashes.  Words should be separated by hyphens.  It is recommended that you do not use abbreviations for words.

In Drupal, you should not include a slash at the beginning or end of the alias.  Also, do not include filename extensions, like .html, .php, etc.

Correct:

  • web-design-guidelines

Incorrect:

  • WebDesignGuidelines
  • web_design_guidelines
  • web-design-guidelines/
  • webguide.htm

Diacritical Marks, Non-Latin Characters, etc.

Although Drupal does support paths using almost any characters, it is strongly recommended that you transliterate the paths to only the basic Latin alphabet.

Recommended:

  • resume
  • siku-quanshu

Not recommended:

  • résumé
  • 四库全书

This does not normally have any effect on someone's ability to find the page since you can include the special characters in the content of the page.

If you have a case where you absolutely must use an extended character set in the paths, please speak with our IT department before doing so.

Underscores in Codes

If you are writing technical documentation you may occasionally need to include a special code that has an underscore in it in the path.  If that does happen, then you should use the underscore, but still convert to lower-case.

Correct:

  • http_request

Incorrect:

  • HTTP_Request

"Folders"

Your content should be organized in logical groupings.  Ideally, the paths to your content, the menu structure of the site, and the names of the pages should all follow a predictable pattern.

In Drupal, there are no real folders but your paths should still include slashes to indicate structure.  Whenever possible, keep the "folder" names consistent on every page in that group.

Correct:

  • web-design-guidelines/paths-aliases
  • web-design-guidelines/html-markup
  • web-design-guidelines/html-markup/headers

Incorrect:

  • paths-aliases
  • web-design-guidelines-paths-aliases
  • web-guidelines/html/headers