Documentation for a historical release of Infusion: 1.4
Please view the Infusion Documentation site for the latest documentation, or the Infusion 1.3. Documentation for the previous release.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Working With UI Options On Your Site

Once User Interface Options (UIO) is incorporated into your website, it's important to ensure that the site continues to transform correctly as new features are added. As you update your site you will need to test your changes and note how they respond to UIO transformations.

High-Contrast Themes

The one thing you're probably least accustomed to thinking about is ensuring support for UIO's high-contrast themes. These themes transform the user interface into one of four high-contrast colour combinations:

  • black-on-white,
  • white-on-black,
  • black-on-yellow and
  • yellow-on-black.

The themes attempt to remove any other colours from the interface, along with gradients, shadows, background images, etc. This type of high-contrast interface can be extremely helpful for users with different forms of low vision.

UIO applies high-contrast themes by adding a special class to the body of the document and providing styles that are scoped to that class. You will likely need to create a few more special classes, scoped to the themes, for some areas of your site.

Support for these high-contrast themes can be ensured by following a few basic guidelines:

How to define special styles for high-contrast themes

UIO will do a pretty good job of transforming your site into high-contrast, but some parts might need special attention to ensure that they look. If you do need to define styles for something that doesn't transform automatically, here's how:

Scope your styles to the theme name

UIO add the theme name as a class to the body element. Scope your selector using the class name as shown in the following example. This example is for the yellow-on-black theme, which uses the class name fl-theme-uio-yb:

/* high-contrast background icon for button */
.fl-theme-uio-yb .toolbar .saveButton {
    background-image: url('images/save-yellow.png');
}

Make sure you have styles for all the themes

UIO defines four high-contrast themes:

  • yellow-on-black (class name fl-theme-uio-yb),
  • white-on-black (fl-theme-uio-wb),
  • black-on-yellow (fl-theme-uio-by), and
  • black-on-white (fl-theme-uio-bw)

If you need to define a style for a high-contrast theme, you'll most likely need to define if for all the themes. The styles will likely look very similar to each other, with differences only related to the colours:

/* high-contrast background icon for button. these images have a transparent background */
.fl-theme-uio-yb .toolbar .saveButton { background-image: url('images/save-yellow.png'); }
.fl-theme-uio-wb .toolbar .saveButton { background-image: url('images/save-white.png'); }
.fl-theme-uio-by .toolbar .saveButton,
.fl-theme-uio-bw .toolbar .saveButton { background-image: url('images/save-black.png'); }

Avoid image tags if background images can be used

If you're using images to give your buttons or menu items a unique look, follow these guidelines:

  • don't use <img> tags; use semantically appropriate tags with background images. Background images can easily be replaced with high-contrast versions using CSS only.
  • ensure background images are sized to scale to fit their container (for more info, see https://developer.mozilla.org/en-US/docs/CSS/background-size)
    • contain and cover preserve proportions of image
    • a percentage will stretch image
    • use background-size: 100%;
  • don't build the label text into the image; put it in the tag
  • if the 'image' is a gradient, consider using CSS gradients

Testing Your Changes With UIO

Enlarge the font

Open the UI Options interface (be it the Fat Panel or the Full Page version) and use the "Text Size" control (in the "Text and Display" tab) to enlarge the font. Check the site:

Increase the line spacing

Open the UI Options interface (be it the Fat Panel or the Full Page version) and use the "Line Spacing" control (in the "Text and Display" tab) to increase the line spacing. Check the site:

Try each of the themes

Open the UI Options interface (be it the Fat Panel or the Full Page version) and use the "Colour &Contrast" control (in the "Text and Display" tab) to select each of the high-contrast themes. Check the site:

  • is all of the text in the correct colours?
  • do buttons and links appear in high-contrast?
  • do icons and logos appear in high-contrast?
  • does anything still have shadows or gradients in the wrong colours?
  • are hover and focus styles reasonable?

Try each of the fonts

Open the UI Options interface (be it the Fat Panel or the Full Page version) and use the "Text Style" control (in the "Text and Display" tab) to select each of the different font families. Check the site:

  • is all of the text in the correct font?
  • is the layout of the page still reasonable?
    some fonts take up more room than others, and sometimes selecting a different font might affect the overall layout of the page.

Enhance links and enlarge inputs

Open the UI Options interface (be it the Fat Panel or the Full Page version) and use the controls in the "Links and Buttons" tab to enhance links and buttons. Check the site:

  • are links underlined, bolded and enlarged?
  • are inputs (such as text fields and buttons) enlarged?