Design Standard

Web Design Guidelines

Site Design

Websites should provide visitors with the information and interactive experience they were expecting when they requested the site. The site must be designed to accommodate a variety of technology levels.

According to Web standards, Websites should be developed with “graphic safe areas” that are determined by the minimum screen size being used by most visitors. Web pages that exceed common display dimensions will inconvenience many visitors by forcing them to scroll both horizontally and vertically to view the page.

Because visitors to college Websites often print pages instead of reading them, all Web pages must print in standard portrait orientation. This is accomplished by implementing Cascading Style Sheet (CSS) print templates that convert wider page widths to portrait-friendly printer pages.

The Home Page of second-level official College Websites should maximize the top half of the page real estate. On average, content greater than 600 pixels in depth will be below the fold and require a visitor to “scroll down” to view important content. The area above the fold is similar to the fold on a newspaper where the banner headline and main photograph always appear on the top half of the folded newspaper.

Lower level pages of official College Web sections should provide links back to the section Home Page and should be organized in a hierarchical order.

Official College Web pages should meet basic accessibility standards and provide information in an alternative format as needed. Documents designed to be downloaded should be provided in both a text-only format and portable document format (PDF) when possible. A text-only transcript should be provided if an online slide show or presentation contains academic or instructional text and visual elements. Multimedia presentations that convey only “emotional” appeal may not require alternative descriptions.

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 official College site will not exceed 1000 pixels.

Websites 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 topReturn to Top Icon

Header Footer Implementation

Header Navigation Bar

RCNJ Website Header


Navigation Footer

RCNJ Website Footer

The pages on the Ramapo site should load in seconds and not minutes. The desired maximum file size should be 200 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 and include an “Alt” tag. 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 page 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. The Web team may suggest some new technologies that minimize page depth while supporting extended content.

return to topReturn to Top Icon

Type Styles, Colors, and Logos

Web designers should only use Web-friendly type styles. For example, Arial and Georgia typefaces were specifically designed to be used on computer screens while often used Times New Roman was originally designed for print publications. Other popular Web-friendly type styles include Verdana and Trebuchet.

Black or other color backgrounds can hinder type legibility and present an accessibility obstacle for those with vision difficulties. The optimum background color for a page is white (#FFFFFF). The use of background textures by designers will often reduce page load speed, and often conflict with the visual appeal of the site.

The existing Design Standard requests that only the approved Ramapo College Arch and Roadrunner logos be used on the Website. 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 topReturn to Top Icon

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 official color of Ramapo College of New Jersey is maroon (PMS 202). The Web equivalent is Hex values 660000 (#990000).

  • Normal text – #000000 (black)
  • Background – #FFFFFF (white)
  • Link – #0000CC
  • Alink – #000099
  • Vlink – #000099

All photographs should be optimized for the Web at 72 dpi with appropriate cropping and resizing.

An executed Ramapo College Media Release form should accompany photographs that contain identifiable individuals and are destined for official College Web pages.

return to topReturn to Top Icon

Writing for the Web

The Web requires 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.

Because Web visitors don’t read long galleys of text, they will often resort to printing a deep Web page instead of online reading. If you are planning 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” will often result in long text being converted to 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 text-only format or as a PDF. Unfortunately, developers who offer only a PDF may disenfranchise those with accessibility issues because some versions of Adobe Acrobat Reader cannot be used by assisted technology screen readers.

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 (example below).

Effective content tools:

Convert important data to bulleted lists.

  • Limit sentences to no more than 25 words.
  • Consider PDF and Text or 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.

The Content Provider policy provides a structure for the updating of sections of the Web. Each constituent provider should review the content in their current Web section and work with the designated group chairperson and Ramapo Web team in an effort to keep the site current and accurate.

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 topReturn to Top Icon


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 be carefully evaluated before implementation. Once a visitor leaves the familiar surroundings of the Ramapo Website they will find new navigation and surroundings. Because of the “dig-down” nature of the Web, the visitor might not return to the Ramapo Website. The standard off-site Web disclaimer should be employed when using external links.

Links to Off-Campus Websites.
The following disclaimer language should be used when linking to Websites that are off-campus.

“Ramapo College of New Jersey recognizes the value of publishing on the Internet. The College does not preview, review, censor or control the content of external Web pages in any way as a matter of course. External Web page content is the responsibility of the author, and does not in any way constitute official Ramapo College of New Jersey content support or approval.”

return to topReturn to Top Icon

Usability and Accessibility

Web usability standards are achieved if everything works as planned. The visitor should be able to understand the purpose of the site and navigate throughout the site without getting lost. The pages should load quickly and not require extensive scrolling. Employed technologies should be readily available to the visitor. All of this should take place in a matter of seconds in a Web world where the visitor is in control.

The Ramapo Internet has been developed in accordance with Web conventions for accessibility. The following are accessibility standards for the public Website.

The following represent basic accessibility and usability standards:

The Office of Web & Digital Marketing provides ongoing support for the development of official College Websites. Members of the Ramapo community skilled in Web design are always encouraged to work with the Web Team in blending their creative ideas into the existing format.

  • Always use ALT tags to describe the content of graphics or photographs.
  • When linking a graphic, provide a caption under the image that also serves as a text link.
  • Provide a Text or Microsoft Word transcript of slide shows that contain academic or instructional text and visual elements.
  • Provide captioning or include a Text or Microsoft Word transcript for Videos that contain academic or instructional audio elements.
  • Provide the visitor with an approximate download time, file size and file type for large multimedia files when they will require download times in minutes verse seconds.
  • Design Web pages that load quickly and generally don’t exceed 200 kilobytes in size.
  • Optimize all photographs and images.
  • Enter the height and width attributes of all images.
  • Avoid GIF animations. Consider JavaScript sliders as an alternative.
  • Provide alternative mechanisms for online forms like an available telephone number, e-mail address or a word processing document version of the form for download.
  • Limit the amount of fields for online forms to 12.
  • Do not use Blink or Marquee.
  • Make sure that content in tables work sequentially in support of accessibility.
  • Try to avoid the Blockquote. This tag hinders screen readers and Braille devices.
  • Make sure that the Web page can be accessed in most common browsers and platforms through testing.
  • Do not use frames.
  • For graphs and charts, provide a summary within the Web page or provide a text link to another Web page that contains the summary.
  • Hypertext links should be descriptive of their destination. Avoid “click here.”
  • Provide timely and accurate content remembering to carefully edit and “chunk” information into short, readable paragraphs and bulleted lists.
  • Abide by existing College policies including the Responsible Use of Electronic Communications.

return to topReturn to Top Icon


Major search engines use keywords to find your Web page. Their organic search will determine your ranking or position in a search result. The keywords in your page content must match those words appearing in the hidden page script. Keywords should be limited to no more than 8 words that are specific to the product or service offered or described in the site. The selection of general keywords will lessen the effectiveness of SEO.

Search engine marketing (SEM) uses the same keywords to deliver qualified visitors to tiny online advertisements that appear on the right rail of most search engine pages. The SEM program requires Web marketers to select keywords and geographic locations for advertisement placement. Once selected, the marketer must bid on the keywords to determine if the return on investment (ROI) for the keyword string matches the allocated marketing funds. SEM works when the keyword string is very specific.

return to topReturn to Top Icon


E-marketing is essentially electronic direct mail to large audiences. The College uses a variety of outbound e-marketing tools. The Daily Digest and other campus e-communications employ sophisticated tools that format and delivery a message to audiences at a specific date and time. E-marketing is inexpensive, but delivering e-mails to large audience does not guarantee that they will be opened and viewed.

E-marketing requires an e-mail list that adheres to federal anti-spam and opt-in guidelines. The government considers faculty, staff and students in a college as being members of a group not requiring opt-in authorization. All other e-mail groups generally require opt-in e-mail authorization.

return to topReturn to Top Icon

Video (Please Contact the Associate Director of Web & Digital Marketing)

An institution of higher learning has endless video opportunities. Events, guest lectures, concerts and interviews make up the fabric of Web video content.

Before campus constituents begin the process of producing a video destined for a College Website, they should contact the Associate Director of Web & Digital Marketing, to make sure that the project does not replicate other planned work, is consistent with the mission of the institution and will support the College’s Web Design and Video Standards.

Online streaming video has become commonplace on the Web as part of the explosion of social media. Online resources like YouTube and Vimeo that allow the user to simply upload a video, edit online and post live have contributed to the growth. Most of these videos can be embedded into standard Web pages.

While we encourage the use of video on the College’s Websites, but require producers to follow a visual, branding protocol that identifies them as products of Ramapo College (see below). No matter how wonderful the video and sound, it is the content that matters to the viewer. With that in mind, those producing video must follow the College’s content protocols (see below).

Video of Non-Ramapo Individuals
Video recording of non-Ramapo individuals will require an executed Media Release form by those appearing in the video if it is to be used by the College.

All video should be shot in high definition (1280 x 720) to meet evolving Web convention. Audio is an important component of a video and clear, crisp audio is essential (AAC codec).

Time Limits
Effective Web videos should be limited to no more than three (3) minutes in length. Please consider editing the video content into several smaller segments to avoid videos longer than three minutes.

Visual, Branding and Content Protocols

  1. The College logo must appear in the first frame.
  2. The HD logo currently being used must appear in the next frame.
  3. The title of the video or identification of who is appearing in the video must appear in the next frame.
  4. All individuals being interviewed must be identified (a narrow name bar at the bottom of their first frame is essential).
  5. The use of “B” roll video/images enhances most videos and should be used when possible (inserting a still photo or background video under someone speaking).
  6. The video must try to tell a story (storyboards are recommended).
  7. The last frame must contain the College Logo and Web address. In some cases, a prior frame may contain Web links to information about an event or Website.
  8. The individual(s) appearing in the video should be engaged with the camera. They should be looking at the camera at all times unless they are being interviewed where interaction is required.
  9. The limited use of copyrighted material (video/audio) may be subject to limitations. The use of such material should be discussed with the Associate Director of Web & Digital Marketing.

YouTube Videos

  1. The College logo must appear in the first frame.
  2. The HD logo currently being used must appear in the next frame.
  3. The title of the video or the person appearing on screen must be identified.
  4. The College drop-shadow logo must appear in the upper right corner of the Video because YouTube will drop their logo in the lower right portion of the video (This is the only exception to the use of the College logo in a video).
  5. The use of “B” roll video/images enhances most videos and should be used when possible (inserting a still photo or background video under someone speaking).
  6. The video must try to tell a story (storyboards are recommended).
  7. The last frame must contain the College Logo and Web address. In some cases, a prior frame may contain Web links to information about an event or Website.
  8. The individual(s) appearing in the video should be engaged with the camera. They should be looking at the camera at all times unless they are being interviewed where interaction is required.
  9. The limited use of copyrighted material (video/audio) may be subject to limitations. The use of such material should be discussed with the Associate Director of Web & Digital Marketing.

return to topReturn to Top Icon

Social Media

When the College’s Web Standards were initially authored social media was in its infancy. Today, billions of individuals throughout the world are involved in social media.

The College has an official Facebook Fan Page and a Twitter site. Campus offices are encouraged to consider Fan Pages only if they have sufficient time to devote to maintaining this social medium. Best practices for Facebook Fan pages include open walls and effective use of tabs.

Facebook groups have had significant market penetration, but recent privacy and security updates have re-positioned them in the social media universe. Greater adoption of Facebook Fan pages is expected as a result of the changes.

The use of the College logo on social media sites requires the permission of the College. All uses of the logo must be consistent with the Design Standards.

Campus constituents interested in social media, should contact the Office of Marketing & Web Administration for assistance.

Please contact the Social Media Strategist & Content Manager to schedule a meeting to discuss our services. (Alexandra Simone at ext. 7817 / e-mail:

return to topReturn to Top Icon

College Web Statements/Standards

The following statement appears as a link from the Website’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 others 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, 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.”

return to topReturn to Top Icon


The use of copyrighted material on the Ramapo public Website 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:

  • Literary works.
  • Musical works, including any accompanying words.
  • Pictorial, graphic, and sculptural works.
  • Motion pictures and other audiovisual works.
  • Sound recordings.
  • 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: 

Director of Infrastructure
Ramapo College of New Jersey
505 Ramapo Valley Road
Mahwah, NJ 07430
Phone Number: (201) 684-7402
Email Address:

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.

return to topReturn to Top Icon

Privacy Statement

The following statement appears as a link from the Website’s Home Page, “The Ramapo Websites ( uses browser detection to determine the browser type and browser version of visitors to the site. The information that is gathered and is used only in its aggregate form to help us improve the performance of our Website. 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 Website. Referrer pages to the Ramapo Website are also recorded, and used to improve overall site navigation.

“Electronic messages sent to the identified e-mail Website 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 Website and the usefulness of the replies.”