Common Look & Feel (CLF) - WEB

From SFU_Public
Revision as of 16:49, 30 September 2011 by Runnals (Talk)

Jump to: navigation, search

SFU's common look and feel (CLF) standards for web design are found here

There are no plans officially to update the CLF, but we would like to gather up the issues and make some reccomendations to be carried forward to the CMS steering committee.
The information below is taken from (but not limited to) internal discussions and emails from sfu webmasters.  It is being recorded on this wiki to encourage discussion and contributions from all in the SFU community. Please feel free to add your issues, complaints, suggestions below, or make comments and ask questions on the discussion page.  Sept 28 2011.


The navigational elements of a website are mostly concerned with the menu system, its organization and placement. Also, it may include problems with the SFU search, and key navigation or "landing" pages. (eg, A-Z)

  • Search improvements - USABILITY - How to deal with SFU search vs. sub domain search and search the web options.
  • Left hand menu for sub pages - Colors and typographic states could be re-thought. Indentation reduces menu width. Animated menus may be a solution.
  • SFU logo link - Where should the SFU logo in the top left corner link to? (SFU HOME? Sub Domain home?)
  • Resolve usability issues with Burnaby, Surrey, and Vancouver "home" sites. Do campus home pages add more confusion? What do users think? How do we resolve Faculty and program sites that have services on multiple campuses.
  • A-Z list  - should it be contextual to the sub domain you are on?
  • The A-Z list is an old 'stop-gap' solution from before there was a CLF.  Does it make any sense to promote it at such a high level? it is essentially the site map page, which is common on most websites, but usually not made such a big deal of (drop down menus etc.).
  • Related to navigation issues, a larger font size could improve a users sense of where they are

Look and Feel


Can further be broken down into; Graphics, Photography, Branding, Page layout, etc. 


  • Can the search results page LOOK like an SFU page? (ie, include CLF)
  • Labelling for department name in top banner. 
  • SFU LOGO - does it even look like a link?


  • Related to navigation issues, a larger font size could improve a users sense of where they are
  • Better standard typography across sites with web fonts

  • Standard widgets (Rotating images on home page, recent news, etc. )
    - Yahoo! Design Pattern library is a good reference


  • Right column width needs to be larger (for why?)
  • A clear grid system

Search improvements - BRANDING -

Better integration with social media sites or at least let all use the same icons
- even better would be an iconography library

Technical implementation

The stuff you don't see. The technologies used to build the banner and its navigation system. The CLF project will have the most impact on the CQ5 content management system and its templates.

  • Search improvements - RESULTS - How is search implemented: can a new infrastructure make it as good as an actual google search?
  • Fix 404 error on searches made from search page

Information/ Content

  • We need a campus-wide recommended house style guide for website content. (This relates to the "F" part of "CLF.") Design and navigation are important but so is consistent use of terms and tone.

Recommendations for ongoing support

  • SFU should assign responsibility and adequate resources. That means someone having responsibility for the CLF in their job description, reviewing issues as they arise, and modifying the CLF when needed.  And yes, I suppose someone should be the CLF police as the university's brand and perceived professionalism are important.
  • Testing for usability should be done at intervals, done in a statistically meaningful way, and redone when new devices raise issues (as with mobiles in the last couple of years).

Other possible activities:

  • Include SFU search page in the CLF. Run new project to improve results and the searching experience in general.
    * Review page stats, identify most common pages and user paths - where are users going? what are they looking for?