Refactoring a user interface for bigger, broader use cases
We released Open Atrium Beta 1 in July knowing that a wider audience would lead to more real world testing, feedback, and problems. In the latest release this week, we've incorporated some of the responses we've gotten from the community, as well as our clients' experiences into key changes in Open Atrium's UI.
Fluid width
The first major change is switching from the previously 960px fixed width theme Ginkgo to fluid width. Open Atrium is now usable on screens from 800px wide to as-big-as-your-budget-allows. Aside from meaning that the page layout stretches and shrinks when you resize your browser window, it also means slightly bigger/more readable fonts overall.
1. Breadcrumbs
One usability problem we often deal with is people not recognizing the site / group / user space architecture of Open Atrium. One approach to this in the past was to color-code different space types. With the color-customizations made possible by spaces_design, this is no longer necessarily a reliable indicator of where you are. We first introduced breadcrumbs in Open Atrium on the Communicate project for the World Bank and have since merged it into Atrium HEAD.
2. Consolidate blocks, user info, and help
The global tools in Open Atrium's first row of navigation have been consolidated into distinct blocks. Previously, some header links were inserted into the page template through custom preprocess_page() calls, while the togglable help text was inserted via a custom theme function and dropdown blocks were added into the header region. All of these components are now provided by blocks, making it straightforward for themers and developers to adjust, remove, or add to these components.
