Web design - Standards Manual

Goals

The College of New Caledonia communicates its image to audiences in a number of ways. Of critical importance is the consistent and uniform application of graphic and web standards for CNC websites.

Implementation of the elements within the standards consistently conveys a distinctive image and distinguishes CNC by assuring its position is clearly communicated at every opportunity.

Websites are considered college publications as well as campus-wide information sources. The following standards for CNC website development are intended to guide website development in a sensible and fundamentally sound fashion.

The goals are based on ongoing feedback through:

• Online and paper surveys of students, employees and the public.
• Focus group feedback
• The Web Working Group
• The Marketing and Branding Committee
• Classroom visits to solicit feedback
• An independent study by an external design group
• Current web trends and practices
• Accessibility guidelines

Proficient web users will recognize “good practices” and know what is required to achieve . . . .

Vision

The vision for the website is that it will be audience-driven.

Goals

1. A simple and easy to use website for everyone (easy to find information)
2. A consistent and professional CNC look to the site
3. Avoid duplication and inconsistent information.

Strategy and Accessibility Tips

The College of New Caledonia’s standards for web development are designed to provide optimum performance within the context of the College’s visual identity initiative.

Users are expected to familiarize themselves with the visual identity standards, especially as they relate to the web. You will find more information about the Colleges visual identity initiative on the intranet at:

Visual Identity and Graphic Standards website

We encourage exploration and creativity in the use of web technology: however, website usability and effective communication with target audiences are top priorities. More information is available on website usability and effective communication at:

http://www.w3.org/WAI/guid-tech.html

http://www.w3.org/TR/2000/REC-ATAG10-20000203/

Adobe accessibility site

Use browser built-in supported technology for vital content (HTML text, gif images, etc.) rather than proprietary formats such as Shockwave and PDF, whenever possible. When not possible, provide alternative methods to access the same content. Always include a link to access the format’s reader or viewer.

Provide alternatives to all materials, such as text alternatives for images (use <alt> tag) and appropriate alternatives for video, audio, or multimedia.

For more information and access to a free online validator to check for accessibility standards, go to:
http://blog.mozilla.com/webdev/2009/07/02/improving-accessibility-through-aria/

Organization / Style

Target Audience and Mission

Before beginning to design the site, discuss the goals of the site and identify your audience. Who uses the site? Is it students, faculty, the public, or a combination?

Organize the site based on audience needs rather than the organization of the office or department. Have a rough sketch of the proposed site and how it will be organized before you begin development. This will save time later.

Assemble departmental information and publications and determine content that can be added, excluded, or rewritten to be appropriate for the Web. Consider what departmental information may already be on the CNC website to avoid duplication of information. Whenever possible, link to information rather than reproducing it.

For example, there are program information pages which contain information about all programs, so there is no need to reproduce this information:

CNC program pages

Other examples:

• Post events in the events calendar
• Link to Admissions for application process…

Duplicated information has a tendency to become out of date when changes are made, so always link, don’t duplicate.

If all or a portion of the website contains confidential or sensitive information, then that section or site should be placed on the CNC Employee Intranet or other access controls should be discussed. Consult with the resources listed in the contact section of this guide.

Design and Navigation

Design requirements

Make use of the College’s primary colour palette with applied secondary palette as appropriate. The end result should complement the CNC brand. Fonts, colours and styles have been defined within the Content Management System editor to ensure that the standards are met.

It is recommended that all departmental graphics requiring the Cochin font are created through our Web Designer or Publishing Assistant, to ensure that all graphic standards are met.

Example of header using approved font:

Navigation

• Use a consistent method of navigation through all levels of the site. Make sure not to strand people on “orphan” pages where it is necessary to use the back button to return to the home page.
• Offer navigation within long pages to avoid the need for scrolling.
• Be sure that critical information and navigation tools are located at the top of the page.
• Do not disable the “Back” button.
• Do not use “Click here” as linked text – use a description of the content as a link instead. Refer to section on web accessibility for more information.

Text-based navigation links are used throughout the site and are accessibility-friendly and are therefore recommended. Insert a bullet (provided in Digital Assets Manager in the Content Management System) at the beginning of each new link to separate links and act as a visual marker for users.

Graphic buttons can be used on the site, but please note that the use of rollover buttons is not currently supported within the Content Management System.

Create a CNC website

Step-by-Step

1. Read through these guidelines.
2. Using the guidelines, discuss the website with others in your department and users.
3. Decide which content you already have, and which content you will need to create. To avoid duplication check official site pages for content already posted. If the information is available on the official site then link the departmental site to that content rather than recreating it.
4. Consult with the resources listed in the contact section of this guide. They can help you determine a strategy for development of a departmental site.
5. See next section for site registration information and follow those steps.
6. Build your site in the Content Management System
7. You are not finished with the website! Continue to monitor the site on a regular basis by checking for broken links, outdated material and constantly review the website statistics to see how the site can be improved. A website is a living document; try to keep it current and ever changing. You will receive monthly reports about broken links, and you can also receive montly reports about how many people came to the site, what pages they looked at, which are the most popular, etc. These will help you to continually refine the site in an effort to make it more user friendly.

Site Registration

Register the site with the College of New Caledonia by providing the following information to the Web Developer in Information Technology Services:

• Name of person responsible for site content
• Contact information for same (phone and e-mail address
• List of all people who will have access to update the site (if more than one), and who approves these updates.

Registration renewal should be reviewed annually unless the information changes during the year. It should be updated as necessary.

If you are a new user of the CNC Content Management System, you will require training before you will be able to use the system. Once your request has been submitted, the contact person for your department will be contacted by the Web Designer to arrange for training sessions at a mutually agreed time.

Please keep in mind that it will take time to coordinate training and provide access to the system, so submit your requests early to avoid any difficulties.

Standards and Guidelines

Standards/Requirements

• Use one of the templates for all the pages. Several options in template design have been provided.
• Background colors are to be white with a dark coloured font for ease in readability. Some of the templates allow for coloured sidebars so be sure to check options available to you.
• Test every link and make sure that they work. Do this regularly.
• Don’t publish copyrighted text/graphics without permission.
• Seek permission before publishing names, phone numbers, email addresses. Remember everyone in the world will be able to see information you put on the site.
• Use of photos will need to be as per the graphic standards outlined in this manual. See specific section.
• Provide an email address that people with questions can write to. Check this email account daily.
• The College of New Caledonia provides a hosting service for personal pages (see http://community.cnc.bc.ca/ ). Please note that the College will post the following disclaimer on page linking to these sites: “The views and opinions expressed in these pages are strictly those of the authors and do not reflect those of the College of New Caledonia.”

Guidelines

• The main purpose of a website is to inform. Make the information easy to access.
• Think about the site from the user’s standpoint:

• What is a first time user going to think? Are they going to be overwhelmed or lost?
• What is the first time user coming to the site for? Can they find it easily?
• What are users regularly coming to the site for? Can they find it easily?

• Minimize the depth of the site. No one wants to click 6 links before finding their information.
• If you have to make an update to the site, can you do it easily? Can you keep the site current?
• Does the site reflect your department’s image, goals?
• Do not put too many graphics on the page. The more graphics you use, the slower the page will load. A page may load quickly on your machine at work, but be VERY slow on an older computer.
• Do not annoy the user. Things that are “in your face”, blinking, moving around tend to drive people away, especially if they are trying to read information on the page and something keeps distracting them.
• Keep images smaller than 25k, or as close to 25k as possible. Keep the total size of all images on a page smaller then 100k, or close to it. You can check image size in Photoshop, Windows Explorer.
• Make all buttons/links easy to read and obvious (not too dark, not too small, legible font, etc.)
• Check spelling, proof read all documents.
• Check pages on different computers and different browsers. A page will look different on different computers, different size monitors, and will act differently (speed, scripting, etc).
• Content should be updated regularly.
• Do not create long pages that force the user to scroll a lot. Break up the content into different pages if possible, or provide navigation within the page using anchors.

Contacts

Web Designer

The Web Designer is responsible for the overall look of the CNC website and provides training to users of the CNC Content Management System.

Walter Beardwood

Phone: (250)562-2131 local 5505

Fax: 250-561-5876

Room 2-354

Web Developer 

The Network Administrator – Web Developer is responsible for setting up users on the CNC Content Management System and creation/maintenance of server side applications used on the website.

Nick Sarabyn

Publishing Assistant

The Publishing Assistant is responsible for desktop publishing and graphic design of all CNC publications.

Jordan Bacon
Phone: (250)562-2131 local 5485

Fax: 250-561-5876

Room 2-338

Writer/Editor

The Communications Assistant is responsible for writing and editing official CNC content for publication.

Andrea Johnson

Phone: 250-561-2131 ext. 5643

johnsona2@cnc.bc.ca

Fax: 250-561-5876

Room 2-338