Yale University Library: Using the Customizable Front Door Templates

Using the Customizable Front Door
Templates



How to: Use Templates Create Images Standards: General Editorial Fonts Forms Lists

The page has been replaced by Customizable Templates. Please update links accordingly.

Customizable Templates

Customizable templates are located in: http://www.library.yale.edu/fdfiles/newtemplates.

The templates are available in five color schemes (palettes).

Palette	Home Page Template	Subpage Template
palette_01 [olive/blue]	palette01home.html	palette01sub.html
palette_02 [brick red/blue]	palette02home.html	palette02sub.html
palette_03 [blue/green]	palette03home.html	palette03sub.html
palette_04 [maroon/blue]	palette04home.html	palette04sub.html
palette_05 [purple/yellow/green]	palette05home.html	palette05sub.html

Some elements on the templates must be changed; other elements may be changed if desired. Comments within the templates' HTML indicate the location of these elements.

Home page template -- necessary changes

Element	Replace with
Page title (template says Yale University Library)	appropriate title
top_header_title.gif	header image for specific library/collection (see Images, below, for details)
main content	appropriate content
news content	appropriate news -- but consider deleting "news" section if news cannot be updated frequently
contact information	insert appropriate e-mail address. Consider using an alias e-mail that can be received by more than one person, in order to cover absences/vacations.

Home page template -- optional changes

Element	Replace with
img_left_top.jpg and img_right_large.jpg	Images appropriate to specific library/collection (see Images, below, for details). Templates for palettes 01 and 02 have "tree" images that are fairly generic and may be used by any library/collection. Templates for palettes 03, 04, and 05 have images specific to particular libraries (they are in the templates for demo/display purposes) and should be changed if not being used by those libraries. Note: if img_right_large.jpg is removed entirely, it should be replaced by a pixel.gif of the same width in order to maintain the table layout.
news graphic	News graphics are available on library web server at: usr\web\fdfiles\newtemplates\news(b)
content of Quick Links	appropriate content
content of bottom navigation bar	appropriate content
structure of main content	table format can be substituted; see www.library.yale.edu/socsci for example

Subpage template -- necessary changes

Element	Replace with
Page title (template says Yale University Library)	appropriate title
top_header_title.gif	header image for specific library/collection (see Images, below, for details)
navigation menu images	appropriate navigation menu images (see Images, below, for details). These may also be removed entirely, but the HTML must be adjusted.
links below navigation bar	Link name of the current page should be unlinked
main content	appropriate content
contact information	insert appropriate e-mail address. Consider using an alias e-mail that can be received by more than one person, in order to cover absences/vacations.

Subpage template -- optional changes

Element	Replace with
img_left_top.jpg	Image appropriate to specific library/collection (see Images, below, for details). Templates for palettes 01 and 02 have "tree" images that are fairly generic and may be used by any library/collection. Templates for palettes 03, 04, and 05 have images specific to particular libraries (they are in the templates for demo/display purposes) and should be changed if not being used by those libraries.
content of bottom navigation bar	appropriate content

Images

A library of images available for use in the new templates is located in: http://www.library.yale.edu/fdfiles/newtemplates/graphics_sets/

New header images should be created in Photoshop -- start with an existing header image in the correct palette and Save As with a different file name. The Minion font is required to create the headings.

Different header images are necessary for home page and subpages. Home page headers include palette-appropriate color bands beneath them. Subpage headers do not -- unless the header includes letters with descenders (such as "y" in "library," in which case the section with the descender will need to match the color of the navigation bar on the subpage).

The words Yale University Library link to www.library.yale.edu in the header images of the home pages and subpages (an image map is coded into the template for this link). It is recommended that the subpages of a particular library/collection use the name of that library/collection in its header image as a link back to the home page of that library/collection (through an image map coded into the HTML). The Public Interfaces Committee can assist with the creation of the image map link.

New subhead images -- those used for category headings on a home page or navigation links on a subpage -- should also be created in Photoshop. Again it is recommend to start with an existing image in the correct palette and Save As. The required font for subhead images is TheSans.

Minion, TheSans and Photoshop are available on machines in the Arts Library Classroom.

If you need help creating an image, contact the Public Interfaces Committee.

Standards for Images

Use an image file for the main header.
Customized images can be placed in local directories.

Alt tags
Use alt tags for every image.
The proper alt tag for a spacer.gif is one press of the space bar, according to W3C guidelines.
Alt tags will be in title case.
In alt tags, ampersands will be replaced by "and.".

Back-to-top Arrows
Arrows are optional but are recommended only in A to Z or long lists.

Standards for Pages

General

There is no URL in the page footer.

The background color is #ffffff

The copyright statement is a link.

The date modified is generated by the server.

Avoid using boxes within the body of a page. Boxes within a page are primarily reserved for forms.

Use line.gif (in /fdimages) instead of <hr>

Internal subheadings will be followed by <br>.
<p> can be used before lists of links.

When possible, use existing URLs and directories.

Editorial
These standards follow the Chicago Manual of Style.

In a series of three or more terms with a single conjunction, use a comma after each term except the last. (e.g. coffee, tea, and cocoa are provided)

The main headings for forms are not followed by the word "request" (e.g., Eli Express not Eli Express Request).

Sterling Memorial Library should usually be first in a list of libraries (subject to local customization).

Time format: 8:30 a.m. - 5:00 p.m.

Telephone numbers format: (203) 432-9449

e-mail (lowercase "e" and a hyphen)

library (lowercase "l" except in the proper name of the library) or university (lowercase "u" except in the proper name of the university)

Orbis (not ORBIS)

Web and Internet always have an initial capital. Web site and Web page (two words).

Online is one word.

Font Sizes/Font Colors

For body text, font face is verdana, helvetica, sans-serif. Font size on home pages can be 1 or 2 (the default is 1); recommended font size on subpages is 2.

Followed links do not change color.

The links below the navigation bar at the top of subhead pages will be font size =-2, separated by two  

Headers within the body of the page will be black, font size = -1, bold.

Mixing fonts within a document should be avoided; watch out for editors that insert font faces/sizes that you may not want.

You must specify the font in tables; otherwise, a default font is used (often Times New Roman).

Default header style is title case, but use discretion when tone would be affected (e.g. File not found instead of File Not Found).

For body text, font color is black with the exception of links (link colors are specified in the templates). Avoid using other font colors; use bold for emphasis.

Forms

Forms will have a standard "send" button. There will be no "clear" button.

A short description of the service should be the first item on the pages for forms.

Forms within pages should be in the color of the second navigation bar (e.g. Contact Us). Simple search boxes do not need borders.

Use tables to make data-entry boxes line up. Make sure height of all entry boxes is uniform.

Tables: cell padding = 0 border = 0 cell spacing = 0

Use <P> at end of row.

Send button will be on far right.

When possible ask for last four numbers of patron ID only. Use CGI for forms, which will mask entry of SSN when entered. Move away from Perl scripts.

Use Sentence case (First word capitalized only) for roman numeral section headings

Usage:

E-mail address
Telephone number
Patron information

Choose your Yale status:

Yale Faculty
Yale Graduate Student
Yale Undergraduate
Yale Staff
Other

Lists

Use plain <li> as bullet; no .gifs.