Common Look & Feel (CLF) definition February 14 2008

CLF definition sub-group

Meeting

Date: February 14, 2008 Time: 3pm-4:15pm, Location: MC 2009

Attendees: Guillermo Fuentes, Glenn Anderson, Megan McDermott, Kevin Paxman, Matt Regehr, Heather Wey, Pat Lafranier, Andrew Smith, Jason Greatrex, Eva Grabinski, Alan Kirker
Regrets: Isaac Morland, Paul Snyder, Kelley Teahen

Agenda:

  • Continue discussion of Web Advisory Committee CLF Sub-Group Report - Draft

Discussion

  • Recommended changes and additions made to the Web Advisory Committee CLF Sub-Group Report (attachment below).
  • Discussion continued from "Additional Items - Item: Browsers render differently ...." to the end of the report.
  • Pat will schedule another meeting to review the entire report (Post meeting: No convenient time available so will collaborate without having a meeting)

Additional items section of the draft report

  • Dreamweaver Template Only Provided | Observation | Added: approximately 25% of campus sites have implemented the CLF using other solutions. Some areas have partially or completely re-written the default HTML and CSS with varying results.
  • Dreamweaver Template Only Provided | Recommend | Added: 2.Strongly recommend that sites only use the provided template code and link to the central CSS. 3. If re-coding is necessary, the result should match the CLF as closely as possible.
  • Browsers render Differently When Implementing CSS | Observation | Added: browsers will render differently
  • Browsers render Differently When Implementing CSS | Recommend | Replace: 1.inline comments should be documented as to why this is happening
  • Browsers render Differently When Implementing CSS | Future Considerations | Added: have a progressive method to serve different CSSs, if necessary
  • Right Navigation Forces Itself Into Footer Space | Observation | Added: right navigation areas overlap into the footers when right navigation area is too long
  • Right Navigation Forces Itself Into Footer Space | Recommend | Added: current way to fix is adding carriage returns at the bottom of the main content area
  • Right Navigation Forces Itself Into Footer Space | Future Considerations | Added: make allowance in template to correct
  • Central Custom Style Sheet (Central CSS) | Observation | Added: some have copied central CSS to own servers; some using own CSS
  • Central Custom Style Sheet (Central CSS) | Recommend | Reworded: although capitalization of navigation menu items is supposed to be enforced by the central CSS , currently not doing so. Recommend not implementing as it has the potential for branded navigation items ie. iPhone, eCommerce to be incorrectly displayed. (also noted under Left Hand Main Navigation Item)
  • New item added: Item: Custom CSS | CLF Standard: is there one? | Observation: noticed custom CSSs over-riding Central CSSs | Recommend: define degree of CSS as it shouldn’t dramatically alter the University of Waterloo template structure | Future Considerations: Have two CSSs: mandatory default; customizable but with noted restrictions.
  • New item added: Item: Print Style Sheet | CLF Standard: Template settings have "print.css" as the only stylesheet that is applied when printing | Observation: This means that all settings in all other stylesheets must be recreated in "print.css" (a maintenance headache as changes are made, and I'm not sure that the current print.css actually is recreating everything). A particular problem is with "custom.css" as this is user-edited and many are unaware that they have to copy style changes, leading to pages that look different on screen vs. printed. | Recommendation: In template, change media type of non-print stylesheets to "screen, print". If necessary, add additional rules to print stylesheet to override any newly-inherited settings that adversely affect printing. Do not remove now-redundant declarations, as this would break printing from old versions of the template. | Future Considerations: Call main stylesheet with media type "all", and call additional stylesheets for specific media types such as "print" and "handheld" that override the main stylesheet only as necessary
  • Back Button | Observation | Added: new windows opening without a need to do so; redirects that break the back button
  • Back Button | Recommend | Added: do not break the back button unless your third-party application prevent you from doing so
  • What is a top level site? | CLF Standard | Added: shown in the CLF Standard Appendix
  • What is a top level site? | Observation | Added: varying degrees of what is considered a top level site. The CLF Standard Appendix mentions what it could look like but doesn’t mention what it “must” look like
  • 404 Error Message (Broken Links) | CLF Standard | Added: friendly version not included
  • 404 Error Message (Broken links) | Observation | Added: current default is neither friendly nor useful
  • 404 Error Message (Broken Links) | Future Consideration | Added: provide a friendly default with the template
  • Toolkit | Observation | Added: duplication of efforts and inconsistent implementation of the CLF
  • Toolkit | Recommend | Added: provide link to CPA’s Style Guide: http://communications.uwaterloo.ca/ > Resources section
  • Toolkit | Future Considerations | Added: Official Toolkit, including Style guide, analysis tools, common scripts, plug-ins for browsers
  • Areas exempt from CLF but encouraged to adopt if possible | Observation | Added: some sites that are not exempt are not following the standard, which causes confusion as to what’s allowed and what’s not. Others then follow these “non-standard” websites.
  • Areas exempt from CLF but encouraged to adopt if possible | Recommend | Added: official enforcement
  • New Item added: Authentication | CLF Standard: none | Observation: no standard or consistency | Recommend: authentication should be done over https | Future Consideration: see following item
  • New Item added: https | CLF Standard: none | Observation: IE produces error message if style sheets are linked “as is” | Recommend: make available an https style sheet and template | Future Consideration: make allowances in future
  • New Item added: Font and Font Sizes for Body Text | CLF Standard: not stated that can’t modify | Observation: noticing different fonts and sizes being used so no uniformity | Recommend: should use the default of the CLF template | Future Consideration: none
  • New Item added: Colour schemes | CLF Standard: none | Observation: Some websites implement colour combinations that do not comply with common website usability-and-accessiblity guidelines and standards for colour use on websites. Examples include: (1) red-green and blue-yellow colour combinations--such as red font on green background--that result in web content that is impossible or difficult to see with colour blindness; and (2) insufficient contrast between foreground and background colours--resulting in content that is impossible or difficult to see particularly with certain visual impairments. | Recommend: Adherence to website usability-and-accessiblity guidelines and standards on colour use results in websites that are more usable for all users especially those with visual impairments. Adherence to W3C 'Web Content Accessiblity Guidelines' is recommended. Main recommendations for University of Waterloo CLF include: (A) ensure sufficient contrast between foreground and background elements (i.e. dark font(s) on light background recommended for content area; use light font(s) on dark backgrounds sparingly--for example, navigation areas and feature sections); (B) avoid placing content on textured or complex-image/graphics backgrounds (i.e. content-area font on top of a patterned--instead of solid-colour--background makes the content much more difficult to read); (C) verify that colour combinations can be viewed with people with visual impairments (such as colour blindness). | Future Consideration: provide samples in a provided Toolkit

-- PatLafranier - 20 Feb 2008