A project I’ve been continuously developing is a decorator (or navigational wrapper) that pairs with the Amber styles and tools. It’s built on top of bootstrap and JQuery, and the first version is completed and in production. I have the pieces broken into a custom JSP tag library so they can be easily wrapped around a page!
Collapsible developer info panel
This tab shows up only when rendering anywhere except the production server. It includes info about the dev environment and a link to the live version of a page. Collapsing into a small button at the top of the page keeps this info non-intrusive.
Custom top-level navigation
This part is not new, but we are doing a refresh of our resources, so I am setting up the infrastructure to make this more data-driven and possibly adaptable based on the type of user (e.i. faculty and staff will see a different set of menus for some contexts)
Page identity icon
Like a piece of flare, each page gets an icon for the top right corner to help the user identify the page. Because many of the reports have similar info on them, any extra clues we can put out there to help people tell them apart may be helpful. It also gives the pages a bit of personality!
User options toolbar
For data reports that BCS creates for division personnel specialists, and other similar data lists, we are making an effort to provide a consistent set of tools in addition to tablesorter, which allows the user to sort and filter by column. These additional tools hang in the top right side of the page.
Queries the DOM for the data currently displayed and downloads it as an excel file (so it captures only non-filtered data)
This is not implemented yet, but the idea is to include with each report a list of definitions for technical terminology (database or vocation-specific)
To give our users a consistent way to give us feedback on any page, I’ve implemented the tried-and-true footer feedback button, which pops up a simple comment form in a modal dialog. The form gets emailed to our case-tracking system with the URL of the page and some basic info about the user.
A CSS3 loading animation overlays the main content panel while the data is loading from the server to prevent a flash of unstyled content.
The goal of this effort is to create brand consistency, streamline implementation, and most importantly, to equip our users a reliable set of tools for getting the info they need.