Common Look & Feel definition October 11 2007

Common Look and Feel (CLF) definition subgroup

Meeting

Date: Oct 11, 2007, Time: 1:15-2:30, Location: MC 1058

Attendees: Isaac Morland, Andrew Smith, WebOps team (Paul Snyder, Glenn Anderson, Jason Greatrex, Kelley Teahen, Kevin Paxman, Matt Regehr, Heather Wey, Alan Kirker, Pat Lafranier)

Mandate: Goal is to identify areas in which the CLF is unclear and provide a set of recommendations for areas that should be covered by the CLF.

Agenda: discuss mandate; draft ideas

Meeting discussion

We agreed to first identify the areas in the CLF that are unclear and later provide the set of recommendations.

We understand that we will not be redoing the template in the short term, but we may identify areas we can tweak.

At times during the discussion possible solutions were given, which we can use with the recommendations.

Template and CSS

A wide ranging discussion of the supplied Dreamweaver template and the central Cascading Style Sheet (CSS) took place with the following comments expressed:

  1. Dreamweaver (DW) template is XHTML transitional and some pages are not following standard. Perhaps due to typos when editing the source code. The use of a validator, such as W3C’s, should be mandatory before pages are live.
  2. The XHTML standard is very strict in its compliance requirements. Most browsers are more relaxed in their acceptance of non-compliance.
  3. Non-DW template users would like to know what XHTML components are mandatory, and what components can be over-ridden. A better separation of compulsary and user-supplied parameters would be useful in a future implementation.
  4. We are seeing many Web sites that are none-compliant with the current definition of the CLF. We need to understand the reasons for this non-complicance and determine what actions should be taken. Examples include:
    1. Left navigation customization:
      • when longer nav length required the need for the footer to be automatically moved downward
      • The menus suggested by the actual CLF definition are only two-level, which is not enough for a large site like CS
      • from a usability standpoint have an indicator (such as shading or text bolding) as to which menu item is active.
    2. Page width – valuable space not being utilized. Why not use the full width?
  5. Uses of the Central CSS. Combination of Http images in an Https environment causes user confusion with prompting in IE7. Perhaps images and files should be deployed from the central web server (info) to individual campus web servers is the answer.
  6. Custom CSSs. More options available, such as print versus web css, mobile CSS.
    1. Heading styles, fonts – unclear what can and cannot be used
    2. Need for ready-made tables, lists, sidebars and other structures.

What are the mandatory features of the CLF

Kevin provided a set of questions (see attached) that formed a guide to the discussion of mandatory features of the CLF. Discussed the template components stating whether mandatory or not clear. Clearer guidelines required as to what you can and cannot change.

  1. University of Waterloo logo – mandatory; aligned to the top left of the page; linked to http://www.uwaterloo.ca
  2. Search box – mandatory; aligned to the top right of the page; includes general University of Waterloo search with optional searches
  3. Unit title – mandatory; right-aligned below search but above banner/content; need to specify that it should link back to site’s home page; what to do about multi-level unit titles e.g. School of Computer Science (one line) Faculty of Mathematics (second line)?; need to be clear as to the correct font face and size when not using Graphic’s title generator.
  4. Home page banner – mandatory on first level page; should be clear as to the correct size; confusion with CLF pdf stating 755x145 but Kevin noticed it somewhere as 755x155
  5. Left-navigation required on all pages – needs to be updated to reflect the need for “full view” without the left navigation. An example is the Daily Bulletin. Be more specific as to what you can’t do, such as fly-out menus. Sub-navigation appearing below the unit title
  6. Secondary navigation is allowed – vague as to what is allowed and has become a developer’s choice: breadcrumbs, top navigation, right-side navigation, etc.
  7. No tertiary navigation - ???
  8. Right hand “navigation area” does not have to be navigation – be clearer as to its possible uses
  9. Footer – mandatory; must be bottom of page; must include full unit address; unclear as to whether unit logo may be used as well and to be left aligned? Campaign Waterloo must be included, right aligned and beside address. Must be linked to http://campaign.uwaterloo.ca or unit’s campaign site
  10. Ran out of time and will continue at next meeting.

General comments

Some Waterloo websites have a different look, for example the School of Architecture. Perhaps contacting the web masters as to their reasoning will provide additional information as to where the CLF is unclear.

Mailing list for announcing changes to campus

Toolbox available

Next Meeting (in Bookit): Wednesday, Oct 24, MC 1058 at 10-11:30

Comments received beforehand from Alan and Isaac.

  1. from a usability standpoint the left-hand menu does not have indicators as to which item is active. Such as a background colour behind the item or bolding of the item title to make it stand out from the rest, indicating to the user that this is the page they are on relative to the others. Examples:
    1. University of British Columbia
    2. Stanford University
    3. University of Ottawa
    4. Simon Fraser University
    5. Michigan State University
  2. the downloadable template on webops.uwaterloo.ca certainly appears to provide a fairly precise definition of the CLF. However, this is undermined by the existence of a number of "central" sites, which one would expect to follow the CLF very carefully, which do not actually do so. The most obvious example is the Daily Bulletin. In part, the solution to this may in part simply be for important web pages to lead by example.
  3. The menus suggested by the actual CLF definition are only two-level, which is not enough for a large site like CS.
  4. The CLF specifies a particular page width. This is not and never has been appropriate Web design; the proper approach is to fill the browser window and let the reader decide what size of window they want.
  5. With respect to the implementation method, the CLF is implemented as DreamWeaver templates, with no provision for program-generated or web application pages. Of course, it is possible to write a program to output anything, but I would like to see programs provided to generate the template and an SSI version of the CLF that pulls in the program-generated portions. This can then be easily adapted by anybody writing a CGI. We already have this in CS so it may be easy to adapt what we've already done.
  6. we need more CSS classes defined to provide ready-made tables, lists, sidebars, and any other structures we can think of that would be broadly useful.
  7. It would also be a good idea if form controls had a somewhat University of Waterloo-customized appearance, to enhance the Waterloo-ness of our pages.