Coding Standards

Templates

Version

A master template has been created to define the header, footer, and global navigation of all PCC websites. Each time the template is significantly updated, the version number will be increased.

The layout can be adjusted to 6 different variants of the page:

  • one-col-fluid: No side navigation is included. Page will expand with browser window.
  • one-col-fixed: No side navigation is included. Page size is fixed.
  • two-col-fluid: Sidebar included. Page will expand with browser window.
  • two-col-fixed: Sidebar included. Page size is fixed.
  • popup: No side, header or global navigation. Page will contract to fit in very small window
  • home: Special layout for home and sub-home pages.

Color Schemes

Each template's theme can be changed by setting a class to the <body> element. Themes provide an added layer of customization while still maintaining the branding integrity provided in the templates.

Pages that use the template

The following pages use the current template and will be affected by any update.

One of great things about building a web site is the ability to link lots of resources together. However when the number of resources and pages becomes massive, it is imperative that the hyperlinks, anchors and url's are formatted in a standard way. During the last check, there were over 600,000 links on the on www.pcc.edu.

Linking to Internal Pages

  • Do not link to index.html. Instead, point to it's containing folder rather than the file itself. For example, link to /academics/ rather than /academics/index.html.

  • Include the trailing slash. When linking to a folder, always add a slash at the end, such as /about/ rather than /about. Folders with a dash-in-their-name will convert the dash to %2D if the link does not contain the trailing slash.

  • Use relative links inside of sub-sites. Relative links reflect the relationship between two the documents.

  • Use root relative links for linking to other areas of the site. Simple relative links can become ugly when linking to documents that are in a different section of the file hierarchy. An initial slash refers to the top level of the hierarchy. Use /about/success-stories/ vs. ../../../../../../about/success-stories/

  • Point to actual locations instead of shortcuts or keywords. This makes it much easier to track down links when a site is moved.

Linking to External Sites

  • Only link to permanent locations if possible. Avoid linking to content that may be moved, or removed. Also choose links at the upper levels of a site, since they are less likely to be changed often. For example: Link to http://www.adobe.com/reader vs. http://www.adobe.com/products/acrobat/readstep2.html. If needed, extra instructions can be provided: Click on the "Get Adobe Reader" icon.

  • Encode URL Variables. When linking to a dynamic page which requires URl data, the ampersand ("&") must be encoded as & The page will not validate if this is not done. Learn more...

Anchors

  • Anchors should not be empty. Just like regular links, they should enclose some relevant fragment of text. For example, place the anchor tags around the full text of a heading to create an anchor for that section.

Popup Windows

Links intended to open in a new window should make use of the linksSetup function of PCC's JavaScript Library. By attaching one of the defined classes to the link it will automatically be setup to launch a new window on click. For example, the class popup-form should be used for all links that point to a web contact form. See the documentation for the JS Library for more info.

Email (mailto:) Links

All links to pcc.edu addresses with the mailto: prefix will have click event handlers automatically attached to them to launch the PCC email form in a new popup (popup-form) window. It is possible to override this behavior by attaching a custom onclick (attribute) handler. Non-pcc.edu addresses will act as normal and invoke the users mail client.

Images

  • Meaningful images must have a text equivalent, namely an alt attribute. Alt text should be brief but descriptive. If the image requires more than a single phrase to describe use a separate text file linked to the image through the longdesc attribute.
  • Purely decorative images should contain an empty alt value (e.g. alt="").
  • Need a photo? The Marketing Communications (x4390, pccpubs@pcc.edu) has a collection of professionally taken photographs of the campuses and students available for college publications, including websites.
  • see Images and Documents under Directory Structure for information about where to store images.

Forms

ID's, Names, and Labels

You must specify both an id and name on all form fields. Though they are not required to be the same it is often the most logical, except in the cases of radio buttons and checkboxes where name acts as a control (or group) name and must be the same on all in the group, while ID's must always be unique. Label all <input>, <textarea>, and <select> fields using the <label> tag.

<label for="comments">Your Message:<textarea id="comments" name="comments"></textarea></label>

Required Fields

If information is required both it's label and field should be given a class of required. The label will be given special formatting to denote its importance and a validation function, part of pcclib.js, will scan all fields on submit of the form and prompt the user on missing required fields. Note: by also assigning a class of email to an input field the validation script will check to make sure the entered data is a valid email address.

<label for="email" class="required">Your email address:<input id="email" name="email" class="required email" /></label>