Ramapo College Web Design Standards


Text Size:mediumlargelarger

Ramapo College Web Design Standards

  1. USABILITY
  2. SITE DESIGN
  3. TYPE STYLES and LOGOS
  4. GRAPHICS, COLORS and PHOTOGRAPHS
  5. WRITING FOR THE WEB
  6. LINKS
  7. ACCESSIBILITY and USABILITY
  8. GUIDELINES
    1. LINKS TO STUDENT, FACULTY AND STAFF SITES
    2. HOME PAGE GUIDELINES
    3. COPYRIGHT
    4. PRIVACY STATEMENT
 
Web Related

Download this Document
Get Adobe Acrobat ReaderDownload in DOC Format
Download in PDF Format

1. USABILITY

Web usability standards are achieved if everything works as planned. The visitor should be able to understand the purpose of the site, navigate throughout the site without getting lost and the pages should load quickly and not require extensive scrolling.

2. SITE DESIGN

Web sites should provide visitors with the information and interactive experience they were expecting when they requested the site. The site must be designed to accommodate all technology levels.

Consistent with the existing Ramapo College Design Standards, Web pages should be designed for a 640 pixel wide by 480 pixel deep environment. The content area or Web real estate for top-level pages should not exceed 600 pixels wide by 300 pixels deep. The area below the 300-pixel depth is called the "fold" because it is similar to the fold on a newspaper where the banner headline and photograph always appear on the top half of the folded paper.

A Web page should have all navigation links, section headlines, text and descriptions in an area above the fold. Utilizing the 600 x 300 dimensions insures that critical information on top-level pages will be visible on the screen without scrolling. Pages below the second level can take advantage of additional real estate with a maximum depth of 1200 pixels.

Employing a fixed rather than flexible format guarantees greater control over the page design and ensures the consistent look of the page displayed on common Web browsers and platforms. Therefore, the fixed page width for the site should not exceed 600 pixels.

Web sites should provide visitors with a consistent navigation system on every page. Navigation includes a graphic element containing links and the official Ramapo logo at the top of the page and a text version of the site navigation containing copyright and Web policy at the bottom of each page.

return to top

Header Navigation Bar

Image of Ramapo College Website Header Navigation Bar

Navigation Footer

Ramapo College Website Navigation Footer

The pages on the Ramapo site should load in ten to twelve seconds using a 28.8- kilobyte modem with a desired maximum file size of file size of 50 kilobytes. We can use larger accessibility-compliant multimedia files as long as we advise the visitor of load time and they are willing to wait. Always use optimized photographs or graphics to reduce file size and load time. Use images when necessary and only to support the mission of the Web section.

There are circumstances where site content will dictate deeper lower level pages beyond 1200 pixels. Site developers should understand that deep, text heavy pages, often result in visitor disorientation. Using anchors to provide minimal internal page navigation in deep sites can be helpful even though visitors will still tend to lose sight of familiar elements like site navigation and section identifiers.

Because Web visitors don’t read long galleys of text, they will often resort to printing or downloading a deep Web page instead of online reading. If you are planing on a page with long text sections, you might consider an alternative approach.

Utilizing the Web convention of "chunking" can provide page developers with an effective tool. Content optimization or "chunking" calls upon the site designer to summarize a long text often resulting in bulleted lists. If the visitor is interested in greater detail, the designer can provide an alternative resource. Detailed, extensive content can be offered to the visitor in both a Microsoft Word download version as well as HTML in a lower level page. A PDF (Portable Document Format) download is another alternative, but only when it is used in conjunction with either a Microsoft Word download or HTML page. Unfortunately, developers who offer only a PDF download may disenfranchise those with accessibility issues because older versions of Acrobat Reader are not ADA compliant.

Download DOC Format
Download PDF Format

3. TYPE STYLES and LOGOS

Because visitors use a variety of browsers on different platforms, section designers should only use Web friendly typefaces. For example, the Verdana and Georgia typefaces were specifically designed for use on computer screens. Times New Roman, although not designed for the Web, is widely used in publications and display advertising and is often used on Web documents designed to be printed or downloaded.

Other popular typefaces include Arial and Trebuchet for Microsoft platforms and Helvetica and Times on the Apple Macintosh platform. Remember that most browsers are configured to use default typefaces. Because of legibility issues, the optimum background color for a page is white (#FFFFFF). Black or other color backgrounds can hinder type legibility and present an accessibility obstacle for those with vision difficulties. The use of background textures by designers will often reduce page load speed.

The existing Design Standard requests that only the approved Ramapo College, Berrie Center for the Arts and Roadrunner logos be used on the Web site. The approved Ramapo logo should always have a neutral area of no less than the measurable width of the interior arch in all directions. For effective legibility, the approved Ramapo logo should only be used against a white background on the Web. The insertion of other logos on Web pages should be consistent with the existing Design Standards.

return to top

4. GRAPHICS, COLORS and PHOTOGRAPHS

The GIF format is most often used for graphic illustrations, logos and clip art containing many areas of flat color. It utilizes an 8 Bit platform providing up to 256 colors. GIF images offer transparency and interlacing for a gradual visual load.

The JPEG format is most often used for photographs and utilizes a 24 Bit platform offering millions of colors. Both GIF (Graphic Interchange Format) and JPEG (Joint Photographic Experts Group) are supported by major browsers. The newest format, PNG (Portable Network Graphics) may not be fully supported by all browsers and should be avoided.

The colors of the Ramapo College Web site are as follows:

  • Normal Text - #000000 (black)
  • Background - #FFFFFF (white)
  • Link - #0000CC
  • Alink - #000099
  • Vlink – #000099
  • The official Ramapo color in Web format is #990000.

Photographs containing identifiable individuals and intended for use on the Ramapo public Web site must be accompanied by a copy of the Ramapo Standard Model Release form. The Web Development Team will require a copy of a release before it a photograph is uploaded to the public Web site.

5. WRITING FOR THE WEB

The Web is a new medium requiring a different set of writing standards. All Web content should be optimized. Visitors should find content with the most important information in the lead paragraph. Much like the guidelines for a reporter, the information pyramid should be applied to all Web writing.

Content providers should also consider "chunking" or summarizing the information and then providing a PDF and Microsoft Word downloadable version of the information. Because screen readers cannot decipher the widely used PDF format, all PDF file downloads should also offer a Microsoft Word alternative.

Another effective tool for presenting extensive content is the use of numerical, hierarchical or alphabetical lists. When in doubt, consider a bulleted list instead of a long paragraph. Try to limit Web sentences to no more than 25 words. When writing or assembling Web content, write only half of what you would normally write for the printed medium.

Effective content tools:

  • Convert important data to bulleted lists.
  • Limit sentences to no more than 25 words.
  • Consider PDF and MS Word downloads for long documents.

You should prepare Web text in a word processing program that provides the author with a spell-checking feature. The auto-hyphenation feature should be turned off and items like bullets should not be employed because they will not easily transfer to HTML format.

Once the content is optimized, site constituents should define their audience and determine the best location for the information. We have two audiences, an international audience for our public Web site and a campus audience for our Intranet site.

Each constituent provider should review the content in their current Web section and define the audience. The current public site has thousands of pages of information, some of which might better serve the needs of the campus audience than an international audience.

To better serve the needs of visitors and to ensure that we provide accurate and up-to-date information content providers should avoid duplicating the following college materials in individual department Web sections:

  • Program descriptions.
  • Course descriptions.

[ return to top ]

6. LINKS

Internal site links can provide constituents with an opportunity to obtain additional information without overburdening their Web page. Links are effective Web tools but can be distracting if they appear within a sentence or paragraph. If the link appears in the very beginning of a paragraph, the visitor may leave in mid-sentence without reading the intended content. Links should be used when needed and designers should avoid the use of "click here" terminology. The use of external links should carefully considered and implemented. Once a visitor leaves the familiar surroundings of the Ramapo Web site they will find new navigation and surroundings. Because of the "dig-down" nature of the Web, the visitor might not return to the Ramapo Web site.

7. ACCESSIBILITY and USABILITY

The Ramapo Internet and Intranet have been developed in accordance with Web conventions for accessibility. The following are accessibility standards for the public Web site.

  • Always use ALT tags describing the content of the graphic image or photograph.
  • When linking a graphic, provide a caption under the image that also serves as a text link.
  • Provide text descriptions of any audio clips or descriptive video.
  • Provide the audience with an approximate download time for multimedia files.
  • Provide a Microsoft Word text or HTML version of any PDF file.
  • Design Web pages that load quickly.
  • Optimize all photographs and graphics.
  • Enter height and width attributes for all images.
  • Avoid GIF animations.
  • Provide alternative mechanisms for online forms like an available telephone number, e-mail address or a Microsoft Word (DOC) or Adobe Acrobat (PDF) version of the form for download.
  • Microsoft Word text version of the form for download.
  • Do not use BLINK or MARQUEE.
  • Make sure content in Tables work sequentially.
  • Try to avoid the BLOCKQUOTE. This tag hinders speech and Braille devices.
  • Make sure that the page can be accessed in all browsers and platforms.
  • Avoid the use of Java Script for graphic elements.
  • Do not use frames.
  • For graphs and charts provide a summary within the Web page or create a link to another page that contains the summary.
  • Hypertext Links should be descriptive of their destination. Avoid "click here".
  • Try to avoid off-site links containing accessibility challenges.

GUIDELINES

A. LINKS TO STUDENT, FACULTY AND STAFF SITES

The following disclaimer language should be used when linking to student, faculty or staff Web pages: "Ramapo College of New Jersey recognizes the value of publishing on the Internet and encourages the campus community to produce personal World Wide Web pages to enhance communications. The College does not preview, review, censor, or control the content of these pages in any way as a matter of course. Personal Web pages are those of the authors, and do not in any way constitute official Ramapo College of New Jersey content. Authors of these pages are responsible for obeying all relevant laws and College policies, including those delineated in the College’s Responsible Use of Electronic Communications (link below). Editorial and visual expressions in personal pages are strictly those of the page authors, to whom any comments on their content should be directed."

Responsible Use of Electronic Communications

B. HOME PAGE GUIDELINES

The following statement appears as a link from the Web site’s home page: "All graphics, photographs, and text on the Ramapo College home page and connected pages displaying the Ramapo College logo are copyrighted by Ramapo College of New Jersey. Redistribution or commercial use is prohibited without express written permission".

According to the Ramapo Responsible Use of Electronic Communications policy dated January 21, 2001, "Respect for intellectual labor and creativity of others is vital to academic discourse and enterprise. This principal applies to the work of all authors and publishers in all media. It encompasses respect for the right to acknowledgment, right to privacy, and right to determine the form, manner, and terms of publication and distribution. Because electronic information is volatile and easily reproduced, respect for the work and personal expression of other is especially critical in computer environments."

The policy further describes copyright compliance, "Violations of authorial integrity, include, but are not limited to, plagiarism, impostorship, invasion of privacy, unauthorized access, and trade secrets and copyright violations, all of which may be grounds for sanctions against members of the academic community. Users of College Systems shall not abridge the rights of copyright owners."

C. COPYRIGHT

The use of copyrighted material on the Ramapo public Web site must be consistent with the policy described in the preceding paragraphs and consistent with existing federal laws and statutes.

According to the U.S. Copyright Office, "copyright protects original works of authorship that are fixed in a tangible form of expression. Copyrighted works include the following categories:

  • (1) literary works
  • (2) musical works, including any accompanying words
  • (3) pictorial, graphic, and sculptural works
  • (4) motion pictures and other audiovisual works
  • (5) sound recordings
  • (6) architectural works

Pursuant to Title 17 United States Code, Section 512 (c) (2), (Digital Millennium Copyright Act) notification of claimed copyright infringement must be reported to the designed agent listed below:

John Sloan
Director of the CCIS
Ramapo College of New Jersey
505 Ramapo Valley Road
Mahwah, NJ 07430
Phone Number: 201-684-7538
E-mail Address: jsloan@ramapo.edu.

The act requires the complaint to include the following:

  1. a physical or electronic signature;
  2. identification of the infringed work;
  3. identification of the infringed material;
  4. contact information for the complainant;
  5. a statement that the complaining party has a good faith belief that use of the material in the manner complained of is not authorized by the copyright owner or the law, and;
  6. a statement that the information contained in the notification is accurate, and under penalty of perjury, that the complaining party is authorized to act on behalf of the copyright owner.

D. PRIVACY STATEMENT

The following statement appears as a link from the Web site’s home page, "The Ramapo Web site (http://www.ramapo.edu) uses browser detection to determine the browser type and browser version of visitors to the site. The information that is gathered is used only in its aggregate form to help us improve the performance of our Web site. Remote host names are collected from each visitor to the site and are used only to provide statistical data. Page accesses by each visitor to the site are recorded and preserved in an aggregate form to provide us with information about the usage of the pages in our Web site. Referrer pages to the Ramapo Web site are also recorded, and used to improve overall site navigation.

Electronic messages sent to the identified e-mail Web site contacts will be answered by the recipient or forwarded to another individual at Ramapo to be answered. E-mail messages and copies of replies may be kept and reviewed to help ensure the relevance of information presented in the Ramapo Web site and the usefulness of the replies".

[ return to top ]


Ramapo College of New Jersey • 505 Ramapo Valley Road • Mahwah, NJ 07430 • 201-684-7500
http://www.ramapo.edu/