Spring 2016 Website Updates
Wider maximum screen width
Our web content used to max out at 1080 pixels wide, showing “wings” on the edges for any screen larger than this. Our analytics show, however, that must users are using much larger desktop screens than 1080px, resulting in lots of wasted space “above the fold”. In response to this, we increased the maximum content with by 33%, to 1440 pixels.
Increasing the screen width gave us room in the templates for a 3rd column of content. This extra column helps keep the main content from going on too long (long lines of text are not very readable), and allows us to provide more actionable and contextual information within the user's initial field of view.
Background image for large screens
In response to user feedback about the site being 'stark', 'unfinished' and 'too much like the mobile verson', we added a background image to the extra “wings” area outside the maximum 1440 pixels. This large, high-resolution image will only be loaded on screens where it will be seen (so not on mobile devices).
The image used is courtesy of graduating senior Abigail Cohn, and licensed Creative Commons 4.0 Attribution-NoDerivatives (used with explicit permission).
Finer tuning for smaller screens
While updating the templates for the increased width, we tuned the media queries and breakpoints to fold the content very smoothly for all possible screen solutions. Boxes and lines shouldn't break, crack, overlap or stretch in ways that break the flow of the content.
The 3rd column on the right will tuck under the left column on medium sized (iPad) screens. All columns will stack on small screens.
Feedback link replaced by Ask Us
Actual website feedback has decreased dramatically over Fall 2015, being replaced instead by a variety of help questions. This indicated that placing Ask Us in the space where Provide Feedback was would be more intuitive for users, and would hopefully get their questions answered more directly.
Website feedback can still be provided from the Site Contact link in the footer.
4 Main Action buttons simplified to “My Account”
User focus groups indicated some confusion about the meanings of the icons on the top bar, as well as a feeling of “garishness” or “childishness” due to the 4 colors. These buttons were also redundant with the 4 buttons on the homepage. Now, we only show My Account, with textual label, as our analytics showed users were not accessing Course Reserves or Research from pages other than the homepage, and Ask Us has been moved to above the top bar (on small screens, Ask Us moves into the top bar, next to My Account, to conserve space). This not only makes the actions available from the top bar clearer, but removes the redundancy on the homepage.
Refworks link on homepage
Focus group results showed a strong, particular desire for Refworks to be on the homepage. This replaces the My Account button which now lives solely in the top bar.