Toolbar Test

The sandbox is currently being used to test out the toolbar within the header.

Due to some pretty significant browser compatibility issues with the first iteration, it had to be pulled down and is now being rebuilt. Its core is the Queness Tabbed Interface (although, I don’t use it for the tabs so much) jQuery plugin.

Goals for the toolbar:

  • Smooth, enjoyable UX
  • Access to major sources of information (catalog, course pages, e-journals, databases, IM)
  • Usability is key – the expanding area helps keep the usability by not trying to cram everything into a container with a tiny height
  • Unobtrusive to the rest of the page (there if you need it, not if you don’t)

Current Issues:

  • Some browser compatibility quirks (see below for specifics)
  • Gradient header isn’t smooth with a background color, will need to create a 768px high at most repeat-x background
  • Descriptions could be revised
  • If you click too many times on a tool choice it will repeat the animations
  • Some form discrepancies across browsers

Potential Future Additions:

  • Expand course page from a list of courses to a search for courses

Browser Checks:

Mac

Safari 4.0.3:

  • Everything works and looks good

Opera 10.00:

  • Radio button labels are black and not white
  • LibraryH3lp Widget chat history has shrunk for some reason
    • When content is entered it expands properly

Flock 2.5.2:

  • Input boxes (catalog/ejournal) are resizing by 2-5 pixels after animation has completed
  • Radio button labels are black
  • Radio buttons aren’t matching with the labels

Firefox 3.5.3:

  • Input boxes (catalog/ejournal) are resizing by 2-5 pixels after animation has completed
  • Radio button labels are black

PC

Safari 4.0.3:

  • Everything works well
  • The gradient color is just ugly
    • NOTE: remove color profiles from ALL images to fix this issue
    • It’s only a Safari for PC issue

Firefox 3.0.7 & 3.0.14:

  • The database list and the LibraryH3lp widget in the navigation area tends to pixelate when these two areas scroll up and down
    • It’s mostly the database list, but some of it is caused by the LH widget
  • Radio button labels are black and aren’t matching with the radio buttons
  • Input button padding top/bottom isn’t equal (more on top)

Opera 10.00:

  • Radio button labels are black and not white
  • LibraryH3lp Widget chat history has shrunk for some reason
    • When content is entered it expands properly

IE 7:

  • The animation is a bit jittery – this could be due to IE 7’s inability to handle the newer JS libraries as quickly as modern browsers
  • The select buttons look magnified
  • Find Books & Media is pushed down due to hidden fields in the form
  • In Choose a Database everything after Academic Search Complete is hidden until you scroll
  • Input:focus color does not change to navy
  • Last tool choice is lacking its gradient background (:last-child)

IE 8:

  • Radio button labels are black and not white
  • Last tool choice is lacking its gradient background (:last-child)

Last edited November 18th, 2009 at 10:11 am by

Read the comments...

Jump into the discussion...