Optimizing Primo for the Mobile Experience

Abstract

Accessing library resources via mobile devices is no longer a trend but a reality. Users today expect websites to be responsive and to faithfully recreate the full website experience regardless of their device's viewport size - that is, if they can search for resources, renew loans, and place interlibrary loan requests on their laptop, they should be able to do the same on their phone, and that experience should be pleasant. Generally speaking, library services have met this need, as most library websites are built using responsive-ready CMSs like WordPress or Drupal and most third-party applications have decent OTB mobile styling.

The Primo New UI introduced a fully-responsive design to the discovery layer that, in theory, will provide the same quality research experience for every device that access it. However, casual use of Primo on older devices as well as devices smaller than 5" have presented challenges, resulting in elements on the page that are "stacked" on top of each other, or elements on a same row broken into two rows, causing further disruptions lower in the page. This issue is further complicated by introducing branding and third-party widgets to Primo; adding a floating reference chat button may interfere with Primo actions as the screen size shrinks, if no consideration was made for the placement of that button after certain breakpoints. In essence, the OTB Primo New UI experience can work, but we have institutional requirements to enhance the discovery layer with other library resources that might impede or degrade the total experience due to conflicts with existing styling.

OSU has committed resources to overhauling the mobile experience of Primo. This presentation will demonstrate the changes we've made to the default styling in Primo to create more screen real estate for resource information. It will also showcase our development process for a beginner-to-intermediate skill level audience. Users should already understand the following technologies in order to make the most of this presentation: mobile web browsers; desktop browsers; HTML and CSS with specific focus on HTML element identification and basic CSS styling.

This presentation will also include:

-A brief primer on how to simulate mobile experiences using Responsive Design Mode in popular desktop web browsers;

-A walkthrough of breakpoints and how websites are told to reconfigure elements based on viewport size;

-An overview of Primo's mobile experience for a wide range of consumer device screen sizes (iPhone 4+ through tablets) and considerations we made to improve the Primo experience on those sizes;

-Best practices for integrating branding and third-party applications into Primo that will adhere to good mobile experiences.

Users will leave the session with:

-An increased understanding of the reliance students have on mobile devices to access library resources;

-Knowledge and competency of available technologies that aid in mobile website development;

-A toolkit of resources to help them tweak their own mobile experiences in Primo;

-An appreciation for integrating mobile website development into their total website development strategy.