Guidelines for the FOE UBC CLF are defined in three categories:
- Minimum Requirements;
- Highly Recommended; and
Please see reference image below
There are parts of the CLF that are mandatory or required for all FOE UBC websites. This ensures that FOE UBC websites have a minimum level of uniformity in visual presentation and functionality, hence the term “common look and feel”. The parts defined as minimum requirements are marked in red.
These parts of the CLF, while optional, are critical elements we highly recommend that you keep intact and incorporate into your site.
The CLF Templates have been designed following best practices in usability and have been rigorously tested for compatibility across multiple browsers, operating systems, devices, and screen resolutions. Furthermore, the design and code meets web accessibility standards. Any modifications to the highly recommended parts may result in undesirable effects and compatibility issues. The parts defined as highly recommended are marked in yellow.
Finally, the optional part of the CLF is the area where units have the freedom to create and incorporate custom design styles. The part defined as optional is marked in green.
The Faculty of Education banner is a visual element that is meant to accent the web page and not to overwhelm. The banner can be solid color or a gradient. Some muted images are welcomed as seen in the image below .
Purpose and Function
The chevron’s purpose is to maintain a units/departments brand on every page without taking up too much header space. The chevron “is not” meant to be a logo and should not include imagery or illustrations of any kind.
The shape of the chevron has been styled to respond to the viewer’s device size, and therefore, should remain the same shape on every site using the Faculty of Education CLF.
The Hoeffler & Frère-Jones font Whitney is the institutional typeface used in all UBC Brand Signatures. The Whitney typeface is not yet available as a web font, and the main web font used for the CLF is Arial (Regular and Bold).
Note that a change to OpenSans font is proposed for June 2014. This change will bring us closer to the Whitney look and will also provide a more open, cleaner, looking feel to the sites
Units are encouraged to use Arial as a first choice throughout content areas, but they can also opt for other handsome typography that is appropriate for their website.
The default body text size is 14px with a line-height of 20px. The default type sizes, spacing and alignment have been carefully selected to ensure strong contrast and legibility on various screen sizes.
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Color Contrast and Web Accessibility
With approximately 20% of people being affected by some form of disability and a growing population of older people with changing abilities due to aging, making UBC’s websites accessible is a high priority for us. That’s why we’ve designed the UBC CLF to meet Web Content Accessibility Guidelines (WCAG) 2.0 , an internationally recognized standard for Web Accessibility.
Color Contrast Considerations
We ask that this be taken into consideration for a current and future web projects. For more information in this matter please read WCAG 2.0 and Link Colors
Color Contrast Tool
To help aid web designers and content managers an online contrast tool has been created. This tool will help you see if your text and background color contrast properly and whether it is WCAG AA or AAA compliant.