UI Options Experiments

Here are some screenshots illustrating our experiments using the Fluid Skinning System to personalize the UI for some Sakai and uPortal markup. These styles have been applied without any awareness of the underlying markup or styles, and as such is an example of our worst results, rather than our best. This shows how we can, at least coarsely, restyle any arbitrary markup to add high contrast support to a web page.

Authors will have a range of options for improving the results of this transformation. They can choose to provide us with additional information, or "hints," about their markup and stylesheets, allowing us to more subtly perform the transformation. Alternatively, authors may choose to implement our whole skinning system, in which case they will get high-quality transformations out of the box.

For these examples, we concentrated on showing the results of the high contrast skin applied to unfamiliar markup.

Sakai Examples

1. Sakai example with no customization:

2. Sakai example with high contrast, font-size 140%, Verdana, wide text spacing:

3. bSpace example with no customization:

4. bSpace example with high contrast, font-size 140%, Verdana, wide text spacing:

uPortal Examples

5. uPortal example with no customization:

6. uPortal example with high contrast, font-size 140%, Verdana, wide text spacing:

Older Examples

This is an archive of older attempts at restyling Sakai and uPortal, intended to show our progress to date.

Fluid