 |
|
|
|
|
|
||
      |
|
||
 |
 |
|
|
|
|||
 |
| Web Style Guide |
| IRT Information |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Dos and Don'ts |
|
|
|
|||||
|
|||||
Do: Provide lots of links; your left navigation is like a table of contents for your site; breadcrumbs help users find their way back to the school Home; tab menus provide links to theme-related pages Don't: Use red for anything text but links. Don't: Use "Click here." |
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Red reserved for links |
Mission tabs | Bread crumbs
Left navigation links | Body links
| "More" Links
No "click here" | Link
colors
Each topic should have a page of its own, and some topics may need multiple pages. Navigation -- how you break down your content, organize it and link to it -- is critical to the usability of your site.
Red reserved for Links
To avoid any user confusion, red should not be used for anything but links. Please do not apply red color to text. Avoid the use of red except to signal the presence of a link or links, if at all possible.
Mission Tabs
The first layer of navigation is provided by menus that drop down from tabs for the four major school missions -- Education, Research, Patient Care and Community -- on those sites which use them. The tabs themselves link to home pages for each mission and are standardized and managed by IRT. Other links relevant to each mission appear in the menu beneath its tab and are managed by the local maintainer.
The bread crumbs files also play a role by setting tab highlights.
Bread Crumbs
A trail of links under the tabs which, like bread crumbs for children lost in the forest, are there to help the user find their way back up through the site's layers to the Home page. Bread crumbs links are displayed without the underline link decoration.
This Is » What BreadCrumbs Links » Look Like
Bread crumbs links are kept in server-side include (SSI) files, one for each major topic. To find the bread crumbs files for a particular page, look in the nearby "includes" directory. Examples: yoursite/indexplaceholder.html look for yoursite/includes/; yoursite/subtopic/indexplaceholder.html look for yoursite/subtopic/includes/
Bread crumbs files for the four missions subdirectories contain a snippet of JavaScript code that causes the browser to highlight that mission's tab. Make sure to use the Education bread crumbs trail on any Education pages, and so on with the other missions. If you need a new subtopic of a mission, such as Fellowships under Education, store the pages in the education directory, create a duplicate of the Education bread crumb file, adding the new topic ("Fellowships") and link.
Note: You must use absolute links, i.e. http://med.stanford.edu/yoursite/education/fellowhips.html
Left Navigation Links
The left column is where the most comprehensive link navigation appears. Think of the left navigation as the table of contents for your site. Topics with subdirectories of their own will typically have their own left navigation, with links specific to the topic.
Left navigation links are maintained in a server-side include by the local maintainer. This file will be located in a directory called "includes." If a page's URL is yoursite/something.html, look for something/includes/. Typically this file, with a filename beginning "navigation," contains a table structured to hold navigation links.
A special format has been created for links that appear here, distinguished by consistent bold sans-serif font and the lack of any underline decoration.
The NavLink classes (avoid applying to any text that isn't a link):
link_nounderline - 12px Verdana Bold Red- Standard left navigation link size
To set them off, make them special, and to make them easier to read clustered together in the left column, navigation links should not display the underline style (see box, above right). Here's how to avoid this:
-
When style classes are applied to link tag pairs, i.e. <a class="link_nounderline">Link</a> most browsers will display the the link with the underline decoration characteristic of most links. Avoid this.
-
Instead, make sure you apply styles to the following types of HTML objects (see box, above right):
-
The table cell: <td class="NavLink>
-
Span tags: <span class="NavLink>
-
Paragraphs: <p class="NavLink">
-
Div tags: <div class="NavLink">
-
Body Links
Links that appear in the Main or Center column will have the underline decoration by default, and can be applied anywhere in the body text. There is no need to apply any special style to such links, although you may do so if you wish.
<a> Links look like this. Dark Red (#990000) is applied to any linked text, independent of other text settings, including size, bold, special CSS class, etc. Red, especially dark red, is reserved exclusively for linking. Please avoid using red in text for anything but a link, to avoid user confusion.
"More" Links
As special class is provided for links to "More" information. It's use is most appropriate with news starters, teasers and longer descriptions of content on another page. Typically, a short blurb of text ends with a "More" link to the detailed topic page, or the full story. Examples:
The dramatic drop in prescriptions for postmenopausal hormone replacement therapy after the risks of long-term estrogen/progestin use were announced suggests physicians respond more readily to new clinical evidence than previously observed. More
Stanford has a tradition of recruiting students who have passionate interests and vast creativity. It is our mission to develop and direct our students’ skills and passion so they can become outstanding clinicians who improve the health of the world’s people through research, innovation, and leadership. More
No "Click Here"
Please avoid linking from text like "click here." To improve accessibility for the disabled, links embedded in the flow of body text should be applied to words or phrases that are descriptive of the target page's content.
Bad: Department fellowship information - Click here
Good: Department fellowship information
Acceptable: The department is offering fellowships in many areas More
Link Colors
There are four colors associated with links:
Link - The color of an unclicked link
Hover - Links light up with this color when the mouse hovers over the link
Active - Color of link while clicking
Visited - Color of links who's pages have been visited; visited links do not show the hover color
| Navigation Links | Body Links | ||||||||||||||||||||||||||||||||||||||||
|
|
