Website Development Guidelines Policy

Website Development Guidelines Policy

Policy Name: Website Development Guidelines Policy
Policy ID Number: 06-03-002
Version Effective Date: February 19, 2008
Last Reviewed on: January 1, 2019
Policy Applies To: University wide
Responsible Office: Communications


INTRODUCTION AND STATEMENT OF PURPOSE
The following guidelines have been established for two principal reasons: to help members of the NJCU community who want to create effective and informative World Wide Web pages and to provide structural and visual guidance for Web use that will promote a consistent, quality image of NJCU, its schools, programs, administrative units and people.

POLICY
WEBSITE CRITERIA
Website Structure
For consistency, each unit should incorporate a standard graphic or text header at the top of each page that identifies the site and the specific page being viewed, as well as a navigation bar that provides the viewer easy access to other sections within the site. A simple horizontal text bar is most effective for small sites. For larger sites, a horizontal bar with drop down menus should be utilized. This format maximizes page space for content.

Some pages may require navigation links within the page. If the page length runs longer than a printed page, insert "Top of Page" links as necessary. If a page runs very long, use a "Table of Contents" at the top that links various sections of the page below. These navigational elements are essential to make the user experience as pleasant and easy as possible.

Samples of this page format and some simple page navigation graphics can be found at: http: // www. njcu.edu /dept/it/master_website_pages/samples/NJCU_Template_S....

As previously stated, information seekers should not have to read through long lists to find what they are looking for. By the same token, neither should they be required to wind their way through complex menu hierarchies. Do not make your departmental structure too complex, or deep. Menus may become so deep that they bury important information beneath layers of submenus. This can become very confusing for the information seeker. Under most circumstances, a unit home page menu and one further submenu should be enough. Having a submenu, of course, helps keep the home page short and easy to view on one or two screens. Having a sub-submenu, however, can lead the information seeker too far into nested menus before the useful information is found - or not found.

Web designers should also create pages that are open and accessible to people with disabilities and compliant with Section 508 of the United States Rehabilitation Act of 1973. The purpose of Section 508 is to allow members of the public with disabilities to have access to information and data that is comparable to the information and data provided to members of the public without disabilities. For more information regarding web access compliance, please refer to the websites provided at the end of this document.

PAGE SIZE & GRAPHICS
The rule of thumb is to build pages that are viewed and printed easily, and download as quickly as possible. These parameters are dependent on the viewer's hardware, so it is best to build pages for the "least common denominator".

To eliminate or reduce horizontal scrolling to a minimum, the page width should be no more than 640 pixels wide. This width also works very well for printing, using the browser's default settings, and can be easily viewed on a 15" monitor set to 640X480 pixel resolution.

Keep the number of graphics per page to a minimum and the file size of each graphic as small as possible without losing image quality. The more complex your graphics are, the longer it will take for the page to load. You can minimize the overhead of your graphics by reducing the dimensions of the art and/or reducing the number of colors. In the present environment, simple is most effective. (More on file sizing below)

Some visitors to your website will choose to disable image loading, so if a graphic is integral to the page, offer a text-only alternative page. Consider providing text-only shadow pages for the entire site.

NJCU GRAPHIC ELEMENTS
Logos
Developers may use the following NJCU logos on their websites:

  • the NJCU logo in Green
  • the NJCU logo in Black
  • the NJCU logo in 2 colors

These logos are available for download from the IT website Support page, Web Services section.

Colors
The traditional colors of NJCU are green and gold, represented in print by Pantone [TM] or PMS [TM] (Pantone Matching System) colors. The closest hexadecimal color equivalents are as follows:

Green: PMS 561=07574C
Gold: PMS 129=CC9900

A palette of additional ink colors are used in NJCU print publications. You may wish to include one or more of the following additional colors in your web page to help project a consistent image:

Red: PMS 703=CC3333
Blue: PMS 659=6699CC
Violet: PMS 2577=9966CC
Orange: PMS 718=CC6600

Fonts
Graphically, consistent use of fonts goes a long way in projecting a unified institutional image. Futura is used in printed publications for NJCU and is recommended for headlines; Georgia is recommended for body copy in multimedia and web publications. An alternate choice is to use Helvetica for headlines and Times for body copy. (see below)

Accuracy, Consistency & Currency
Establish a consistent design for every page within the website. Each page should contain:

  • A header and navigation bar(s), as described above.
  • A page title and Subheading and/or subheading graphics (remember to keep graphics small in file size)
  • Appropriate content for the page
  • Required information (described below)
  • Additional navigation links, as necessary (top of page, next page, etc.)

One of the greatest advantages of electronic information compared to printed material is that it can be updated as new information is available. It is therefore imperative that the designated manager for the website keep both content and hyperlinks accurate, valid, and current. Out-dated information has no place on a website (except, perhaps, as part of an archive).

Editorial Content & Copyrighted Material
Much information about NJCU may already be available in electronic form as word processing files, departmental brochures, pamphlets, etc. NJCU units that have such files will be able to quickly provide electronic information on the Web. Other units will need to create new files. These electronic documents should be reviewed for complete accuracy and up-to-date information.

Copyrighted material may only be used with the permission of the owner. Photos, graphics and text displayed electronically should be original or free of copyright restriction.

Required Information For Departmental/Unit Websites
Every page should contain the following information:

  • Author's name and affiliation
  • Author's email address
  • A link that pops up the University disclaimer with following wording:

"Web users should read the NJCU disclaimer."

  • Copyright notice (Example: copyright 1996 Department of Art, New Jersey City University)
  • The date the page was last updated

Required Content for Instructional/Personal Websites
Personal websites may not contain the University's logo or other symbols of the University. However, all personal websites must contain the following:

  • The name and email address of the website owner
  • The author's name, affiliation and email address (if different from the owner)
  • Date of last revision
  • The "Personal Website Disclaimer" on the home page of the site.

Building the Website
Provide Visual Variety
Building interesting pages requires good balance and contrast of text and graphics. Too many graphics are confusing and discourage viewers due to slow page loading. Slow loading times is the main reason most web surfers abandon their investigation of a website.
Provide relief from long lists of links with use of descriptive text. Balance and contrast on a page can be attained by providing subheadings in larger type. These give the information seeker a visual index and break up long blocks of text. Remember, however, when you create headings and subheadings that ALL CAPS IS CONSIDERED TO BE SHOUTING in the world of electronic information. All caps may be used for emphasis, but use this technique sparingly.

Web Page Size Considerations
The size of a web page is the size of the total number of items that need to be downloaded in order to display the page in a web browser. A number of factors need to be considered when planning a Web page. As mentioned above, the first consideration is the hardware used by the viewer. Generally, a page must be designed for hardware that is slower, smaller, and older in an effort to include optimal viewing by the largest possible audience.

The second consideration is the time it takes to download images. In addition to the speed of the viewer's connection, download time is affected by the volume of traffic on the Internet and how busy the specific web server is at the moment. As volume increases, the speed with which one can view a page decreases. According to various sources, Internet response times vary according to the time of day. However, the average transfer rate is approximately 34Kbps using a 56Kbps modem connection.

The third consideration is the amount of time one can reasonably expect someone to wait for a page to load. When planning your website, assume that a casual visitor will wait no more than 30 seconds, and that a determined visitor will wait no more than two minutes before abandoning the site. Therefore, based on a transfer rate of 34 Kb per second, the total page size should not exceed 1,000K to retain the visitor's interest.

Color & Graphics Considerations
Images are an important part of Web page design. Most browsers support two file formats for images: GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group). These file formats use proprietary compression techniques to minimize the size of images. When creating images and graphics for a Web page, consistency of file format is essential. Choose either GIF or JPEG.

GIF is the universally accepted graphic file standard for the Web. The GIF format offers moderate compression capability. However, GIF images can be saved with a color palette of 2 to 256 colors, allowing the designer to limit the number of colors. The advantage of limiting a color palette is that it makes the file size smaller. Another advantage is that it decompresses and displays quickly. One of the more compelling reasons to select this file format is for its animation capabilities.

The JPEG (or JPG) format's advantages are a full color palette (16.7 million colors), and greater compression capabilities. In JPEG, compression can be controlled to increase or decrease file size.This format has become very popular as an alternative to GIF files.

With regard to images themselves, another important consideration is the dimensional size of the image to be displayed. The smaller the dimensions of the image, the smaller the file size. However, complex images or images with imbedded text will be unreadable if reduced too small so be sure to check the image for clarity. For larger images, consider limiting the color palette as a strategy for reducing the file size.

The size of the image should never exceed the planned width of the page (e.g. 640 pixels). However, as most pages are a combination of text and graphics, adjusting the image dimensions between 200-300 pixels wide should reduce the size of the graphic to about 35K. Set your image editing software to retain the aspect ratio when adjusting the image size so that the image is not distorted.

Help in Creating a Website
The following departments provided website implementation support:

  • Information Technology
  • Publications Office
  • Academic Computing

Departments or individuals whose pages will be created by University staff should submit the following:

  • Non-formatted text on disk (Mac or PC),
  • A "marked-up" hard copy showing content layout and text formatting
  • All images, photos, and/or art to be used on the page (original image as well as file on disk, if available)

Information for each web page should be saved as a separate document.
"Non-formatted text" is a word-processed file saved as "Text" - with no style tags and a single carriage return ("hard return") at the end of a paragraph only. No tabs are to be used except when information is to appear in columns. In this case, only one tab is to be used between columns, with one carriage return at the end of the line. Disks will be returned if files are not presented in proper format.

"Marked-up" hard copy is a page design map/image layout. A hard copy of the information for the page should include a guide to headlines, subheadings, body copy, and placement of images in relation to text. Hyperlinks within the information should be indicated, as well as identity of the URL and page name to which they are linked.

It is important to be aware that movement through Web pages is non-linear. The very nature of web browsing invites the viewer to follow hyperlinks of interest as they come across them. Because of this, consider placing off-site URLs at the end of your document.

Suggested Resources for Web Developers
Building Websites:

Ancillary Web Support:

  • File Download Calculator Web-based calculator for determining download times for files with modems of various speeds http://www.kolias.com/computers/downloadtime.htm
  • Pixenate A free, easy to use web-based photo editor. Upload and edit, then download the results. http://pixenate.com/
  • PrimoPDF A free PDF creator program. Installs as a printer so it can create PDFs from any application. http://www.primopdf.com/
  • Section 508 Compliance
  • W3C Web Accessibility Resources – a consortium site with a comprehensive list of resources and tools for implementing Section 508 http://www.w3.org/WAI/Resources
  • The Access Board – a federal agency committed to accessible design http://www.access-board.gov
  • The Federal Information Technology Accessibility Initiative – a Federal interagency effort to offer information and technical assistance in the successful implementation of Section 508 http://www.section508.gov

Legal References
Please refer to the University Web Policy at: http://www.njcu.edu/dept/it/documents/Website_Policy.pdf

DATE TO INITIATE REVIEW AND UPDATE
As deemed necessary or appropriate by the Policy Coordinator but at a minimum, at least every 5 years from the date of last review.