Sakai Style guide

Richard Schwerdtfeger schwer at
Fri Jul 6 14:43:14 UTC 2007


We will also need to consider the layout semantics and navigation between
sections of your web page. For example we need to delineate navigation
sections, main content sections, sections that are documents vs.
applications, etc. It would also behoove us to define what the "AT
navigation style" guide should be. For example, how would a screen reader
or navigate the parts of the UI.

Do we imagine content being pulled in from RSS feeds, etc.?


Rich Schwerdtfeger
Distinguished Engineer, SWG Accessibility Architect/Strategist
Chair, IBM Accessibility Architecture Review  Board

             "Aaron Zeckoski"                                              
             <aaronz at>                                               
             Sent by:                                                   To 
             fluid-work-bounce         "Daphne Ogle"                       
             s at fluidproject.or         <daphne at>,        
             g                         fluid-work at,        
                                       "Gonzalo Silverio"                  
                                       <gsilver at>                 
             07/06/2007 06:58                                           cc 
             AM                        Sakai UI UI                         
                                       <sakai-dg-ui at collab.sakaiproject.or 
                                       Re: Sakai Style guideぃ             

This sounds like it is heading in generally the right direction for it
to be useful for developers, however, I am not sure so I will lay out
what I think you need for a style guide to be helpful to developers so
they will actually use it.

What developers need from a style guide:
1) Needs to have general controls (like design patterns I think) laid
out and also examples of full pages that cover the 80% use cases (I
will call both of these "pieces" here)
2) Every piece should include an html snippet as an example
3) Every piece should include the recommended CSS styles OR (even
better) the class tags OR a combination
4) Widgets should be included which also have examples showing how to
invoke them for the common display technologies

Making the style guide readable and usable for developers:
1) It should be available online and google indexed (probably in a
wiki or editable online text of some kind)
2) It should also be available as a PDF (maybe as an export)
3) It should be "prescriptive" (to quote Colin), and should lay things
out as being the right way to do things (people will ignore it if they
really want to, however, it should presented as "the Sakai way" or
something like this.

The goals of the style guide related to developers:
1) Demonstrate the consistent way to display "things" in a Sakai tool
2) Demonstrate the correct way to form HTML which is accessible
3) Demonstrate the proper CSS classes and styles to use
4) Demonstrate the usage of widgets and where they are appropriate to use

I would recommend taking the stuff Gonzalo started on his pages (HTML
and CSS) and using that to bootstrap the guide. I forget the link but
I will copy him and hopefully he will paste it.

On 7/2/07, Daphne Ogle <daphne at> wrote:
> Hi there,
> I just ran across this definition of a style guide on the IXDA list:
> "Many companies provide a "Style Guide." This is often a few branding
> standards (the logo goes there) combined with a number of general design
> guidelines. The document is saved to a hard drive and promptly never
> seen or
> read by anyone.
> A standards guide is successful if the end user moves from one page to
> another and has the experience that "Yes!  I have seen a page like this
> before. And it works the way I expect." To have this happen we must
> identify
> the 10–20 types (roughly, could be more or less) of pages that
> account for
> 85% of the pages that will be designed. We then create standard page
> templates for each of these. It is like having good DNA in the system/
> site,
> which brings unity and sense to the end result.
> The guide is used in the building of actual HTML/CSS templates and in
> making
> sure that scope or feature creep does not muddle the clear design of the
> system/site."
> Perhaps this could be useful in our conversations around design
> patterns vs style guide.  This definition seems in line with previous
> discussions that design patterns and a style guide compliment each
> other.  The style guide informs visual styles and layouts while the
> design patterns focus on types of interactions.
> Daphne Ogle
> Senior Interaction Designer
> University of California, Berkeley
> Educational Technology Services
> daphne at
> cell (510)847-0308
> [see attachment: "message0.html", size: 5027 bytes]
> Attachments:
> message0.html

> ----------------------
> This automatic notification message was sent by Sakai Collab ( from the DG: User Interaction site.
> You can modify how you receive notifications at My Workspace >

Aaron Zeckoski (aaronz at
Senior Research Engineer - CARET - Cambridge University
Sakai Fellow - []
fluid-work mailing list
fluid-work at
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: graycol.gif
Type: image/gif
Size: 105 bytes
Desc: not available
URL: <>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: pic11393.gif
Type: image/gif
Size: 1255 bytes
Desc: not available
URL: <>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: ecblank.gif
Type: image/gif
Size: 45 bytes
Desc: not available
URL: <>

More information about the fluid-work mailing list