I've for some time been intrigued to figuring out what (Common) Look & Feel can be defined as. In this post I'll have a look at an real life example from University of British Columbia. Here's first their own definition of it:
The UBC CLF, or "common look and feel", is a web design framework that supports the visual identity and online reputation of the University of British Columbia by providing a common look, feel and functionality to UBC websites.
with the stated goal to:
- Create a predictable user experience across the web at UBC (e.g. allow users to easily navigate from one UBC site to another, provide some consistency in user interface elements across UBC sites)
- Provide easy access to high-frequency-use UBC web tools (e.g. Search, Directories) and key UBC web properties
- Ensure that UBC websites consistently support the visual identity of the university.
These goals are achieved through standardization of university-wide website elements in terms of:
- visual appearance
- interaction behaviour
I like this definition as it is clear and understandable. It would not be fair to start dissecting it before having a closer look at how it's defined in practice, in the Design Specifications of the CLF.
The CLF Framework is devided into Primary- and Secondary-CLF Elements.
The Primary-CLF Elements are:
- Required content, design, links and functionality that
- Warrant placement in every UBC website across the university due to their high level of use or their strategic value from a web communications perspective, and
- Are relevant to all campus locations.
- Optional content, links and functionality that adhere to a university-wide standard.
- Reserved space for these required and optional university-wide elements.
The Secondary-CLF Elements are:
- Required content, design, links and functionality to mark campus location where appropriate.
- Site-specific content, design, links, and functionality that can be customized on a site-by-site basis to accommodate localization of unit-level needs (e.g. Campus location, Faculty / Departmental-specific information etc.).
- Reserved space for these site-specific elements.
Honestly I don't really understand what this distinction is except the difference between global and site specific elements. Anyway they have defined two levels of compliance. First the Minimum CLF require the following elements:
- UBC CLF Background
- Global Utility Header
- Visual Identity Header
- Visual Identity Footer
- Global Utility Footer
and it's visualized in this graphic where the required elements are highlighted in green:
The Full CLF requires the following elements:
- UBC CLF Background (Minimum CLF Element)
- Global Utility Header (Minimum CLF Element)
- Visual Identity Header (Minimum CLF Element)
- UBC CLF Primary Navigation
- UBC CLF Secondary Navigation
- UBC CLF Content Space
- Sub Footer
- Visual Identity Footer (Minimum CLF Element)
- Global Utility Footer (Minimum CLF Element)
The difference is explained as:
The Full CLF consists of the Minimum CLF elements and the optional content areas of the templates including CSS styles and layouts. The area highlighted in red in the graphic image below indicates the optional content areas which together with the green areas make up the Full CLF.
UBC has a list of complying websites: websites have completed CLF implementation. I've picked some of these sites to have a closer look for one to see the variation and to ensure that it actually runs on different servers/setups.
Board of Governors
The Board of Governors has the URL: http://www.bog.ubc.ca/. Fetching the index pages gives the following headers:
$ wget -S http://www.bog.ubc.ca/ --15:08:57-- http://www.bog.ubc.ca/ => `index.html.1' Resolving www.bog.ubc.ca... 126.96.36.199 Connecting to www.bog.ubc.ca|188.8.131.52|:80... connected. HTTP request sent, awaiting response... HTTP/1.1 200 OK Connection: keep-alive Date: Sun, 07 Feb 2010 14:14:38 GMT Server: Microsoft-IIS/6.0 X-Powered-By: ASP.NET Content-Length: 361 ETag: "baf57961e646ca1:663" Last-Modified: Wed, 07 Oct 2009 00:37:42 GMT Content-Type: text/html Length: 361 [text/html]
and the page looks like:
Engineering has the URL http://www.engineering.ubc.ca/. The sites respond with the headers:
$ wget -S http://www.engineering.ubc.ca/ --15:10:40-- http://www.engineering.ubc.ca/ => `index.html.2' Resolving www.engineering.ubc.ca... 184.108.40.206 Connecting to www.engineering.ubc.ca|220.127.116.11|:80... connected. HTTP request sent, awaiting response... HTTP/1.1 200 OK Date: Sun, 07 Feb 2010 14:12:16 GMT Server: Apache/2.2.9 (Debian) PHP/5.2.6-1+lenny4 with Suhosin-Patch mod_ssl/2.2.9 OpenSSL/0.9.8g X-Powered-By: PHP/5.2.6-1+lenny4 Vary: Accept-Encoding Connection: close Content-Type: text/html; charset=UTF-8 Content-Language: en-US Length: unspecified [text/html]
Ombudsperson for Students, Office of the
Office of the Ombudsperson for Students has the URL http://www.ombudsoffice.ubc.ca/.
$ wget -S http://www.ombudsoffice.ubc.ca/ --15:12:49-- http://www.ombudsoffice.ubc.ca/ => `index.html.3' Resolving www.ombudsoffice.ubc.ca... 18.104.22.168 Connecting to www.ombudsoffice.ubc.ca|22.214.171.124|:80... connected. HTTP request sent, awaiting response... HTTP/1.1 200 OK Date: Sun, 07 Feb 2010 14:18:31 GMT Server: Apache X-Powered-By: PHP/5.2.11 X-Pingback: http://www.ombudsoffice.ubc.ca/xmlrpc.php Set-Cookie: PHPSESSID=9da99fe72307b2b27fd6d5fb3d515af8; path=/ Connection: close Content-Type: text/html; charset=UTF-8 Length: unspecified [text/html]
The President's Office has the URL http://www.president.ubc.ca/
$ wget -S http://www.president.ubc.ca/ --15:14:30-- http://www.president.ubc.ca/ => `index.html.4' Resolving www.president.ubc.ca... 126.96.36.199 Connecting to www.president.ubc.ca|188.8.131.52|:80... connected. HTTP request sent, awaiting response... HTTP/1.1 200 OK Content-Length: 15234 Content-Type: text/html Content-Location: http://www.president.ubc.ca/index.html Last-Modified: Fri, 15 Jan 2010 00:23:45 GMT Accept-Ranges: bytes ETag: "10007995ca1:663" Server: Microsoft-IIS/6.0 X-Powered-By: ASP.NET Date: Sun, 07 Feb 2010 14:20:12 GMT Connection: keep-alive Length: 15,234 (15K) [text/html]
Wayfinding at UBC
Wayfinding at UBC has the URL http://www.maps.ubc.ca/
wget -S http://www.maps.ubc.ca/ --15:16:18-- http://www.maps.ubc.ca/ => `index.html.5' Resolving www.maps.ubc.ca... 184.108.40.206, 220.127.116.11, 18.104.22.168, ... Connecting to www.maps.ubc.ca|22.214.171.124|:80... connected. HTTP request sent, awaiting response... HTTP/1.1 302 Found Date: Sun, 07 Feb 2010 14:22:01 GMT Server: Apache X-Powered-By: PHP/4.4.4 Location: /PROD/index.php Connection: close Content-Type: text/html Location: /PROD/index.php [following] --15:16:19-- http://www.maps.ubc.ca/PROD/index.php => `index.php' Connecting to www.maps.ubc.ca|126.96.36.199|:80... connected. HTTP request sent, awaiting response... HTTP/1.1 200 OK Date: Sun, 07 Feb 2010 14:22:01 GMT Server: Apache X-Powered-By: PHP/4.4.4 Connection: close Content-Type: text/html Length: unspecified [text/html]
Without knowing the effect or cost I still want to congratulate UBC for their work and making the material availble online.