Skip over navigation

Web Services

WWS Web Standards and Guidelines

Naming convention

Logical naming conventions help visitors easily navigate the WWS site. Use memorable, easily spelled words for the Web address, menu labels and page headers.

For example, the page, “About WWS,” at http://www.wws.princeton.edu/about_wws/;
• The directory name is “about_wws,”
• the menu link name is “About WWS,”
• the page header name is “About WWS.”

Navigation (Menus)

The WWS site contains four menu groups; the main menu, the submenus, shortcuts, and the top horizontal menu.

The main menu is on the left column of each page, and remains consistent throughout the site. The landing pages of the main menu should contain general information about the school.

The right column of each page contains submenus which are relative only to that section of the site. The top level item of each submenu should be the home page for that particular section. All pages within the same section should have the same right navigation, with the exception of any third level menu links where the information is only relevant to that particular page (at the second level). Please refer to the site map for detail on levels.

The shortcuts contain internal links for the school.

The top horizontal menu contains external links, the WWS search, contact information, and the home link.

Links

Links to pages within the WWS site are relative links and should not open a new window. Links to the University sites or other sites outside of the University (absolute links) should open a new window so that the user is not navigated away from the WWS site.

Embedded links in the body of the text should describe what it links to, rather than something non-descriptive. (For example, you should say, “contact us” rather than “click here.”) When referring to an external link, you should list the name of the site, page, or link, rather than the full URL. For example in the sentence, “Our academic programs provide a rigorous education for those with a practical desire to make the world a better place,” the word academic programs links to https://wws-edit.princeton.edu/academics/. 

 

Roxen Components

Header

Each page from the main menu (left column) has one header component which contains the page title and corresponds to the name of the page and directory.

Pages within the same section should use the same header name as the main menu with a subtitle identifying the name of the subsection (right menu).

For example, the History submenu from the About WWS page contains the header title, “About WWS,” and the subtitle, “Brief History of the Woodrow Wilson School.”

Text and Picture Component

The font type, size and all other text formats are applied from a style sheet in Roxen. This allows the appearance of the WWS site to remain consistent throughout all the sections, and you can concentrate on the content of your documents rather than being concerned about the presentation.

The title field of the Text & Picture component is used for labeling a section of text (like a subtitle). Each time a new subtitle is needed, a new text component should be inserted. Try to avoid having one long text component. If the text can be broken down into sections, it is easier to rearrange and copy pieces of the text to other areas within the site.

When a picture is included with the text, the picture comment field is used for a caption that will be displayed under the image. The picture link URL is used to make the image clickable. Use the variant field to choose how you want your text and picture aligned on the page (left align, center align or right align), or if you want just text or a picture without text.

This component is used to insert text (with or without a picture) into a page.

The text component works much like a word processor. The following formatting alternatives are available:

File component

Use to make a link to a file that visitors to the WWS can download.

Link component

Use when you want to include a link to another page on the page you are editing. The target window should open the link in the current frame if it is an internal link, and the URL should be relative (not absolute). Only when the link is external to the WWS site, should you open the link in a new window.

Link List component

Use when you have a list of links.

Images

When selecting photos, pick images that communicate the energy and vitality of the Woodrow Wilson School. The school has a diverse community and the images should reflect this diversity. 

Be sure to have permission to post a photo before uploading it to the WWS site. If you are not sure about the copyright issues, do not use it. Include any photo credits, and add the alternative text tag to every photo.

Keep the size of images under 200 px by 250 px and the resolution between 72 dpi and 300 dpi. The WWS standard size for bio images is 200 px by 250 px. 
 

Site Map

Think of the index in a textbook as a helpful analogy relative to a site map. The site map is arranged in alphabetical order, and provides a visual representation of all the sections and pages within the WWS site. The pages are arranged in a hierarchical way with a parent/child relationship. The pages should be contained to no more than three levels making it easier to navigate and find information.