Increased access to web-based resources via mobile devices stands out as one of the most obvious technology trends during the last few years. Statistics vary on the proportions of users accessing library resources through mobile devices relative to those with full-size screens of desktop or laptop computers, but we're past the tipping point. According to Google Analytics, access to Library Technology Guides in February was 63% desktop, 27% mobile, and 10% tablet.
The stakes just increased dramatically with the recent announcement by Google that poor mobile usability will negatively impact search performance. It makes sense that search engines should not include pages on devices that cannot display them. In order to maintain visibility to all potential users, it is critical for web resources to be designed to accommodate the full range of devices. But most of all, it's simply important to ensure that a site can adequately serve all those with an interest in its content or services, regardless of the device they are using.
Full-size desktop interfaces have considerably different capabilities than smartphones, with tablets functioning in between. Each category of device brings different expectations of functionality. On a full-size device, I expect to be able to create content and to use the full-screen landscape to efficiently view information, often in multiple columns or panels. That complexity of presentation exceeds what can be easily used on a smartphone, where content needs to be displayed in a more simplified style, such as in single column, and with ample spacing and readable fonts.
In order to accommodate the different categories of devices, websites need to use responsive design, which customizes the delivery of each page based on the capability of the device making the request. In some cases, responsive design may only alter the presentation elements that can be controlled in CSS, but some sites may want to present an entirely different set of functionality and structure to users with mobile devices. Responsive web design involves understanding the use patterns appropriate for each type of device and optimizing the user experience accordingly.
Placing Concepts Into Practice
I created Library Technology Guides as a content repository, and maintaining it provides me with an opportunity to keep my technical skills up-to-date, as I work through some of the same issues that libraries face in how they present content to their users. Mine is a low-risk environment in which I can experiment with technology without fear of harming a larger organization. Most people who maintain the web presence for a library would generally need to work toward higher levels of usability and interact with a broad set of stakeholders to establish strategic objectives and functional requirements, as well as to explore multiple persona-based use cases. My project is a little different, since I can operate unilaterally. Given my interest in promoting mobile usability for libraries, implementing it for my own site seemed to be a way to gain some practical experience.
Admittedly overdue, I began to implement a responsive interface for Library Technology Guides. Last year, I completed a new design for the site that updated its look and layout. That redesign included upgrading the coding to HTML5, using CSS for page layout instead of tables, implementing a new navigational menu based on jQuery, and introducing more semantic structure through the use of schema.org encoding surrounding selected data elements within each page. I also refreshed the server hardware and operating system as well as upgraded the MySQL version, Perl, and other infrastructure components. Additionally, I implemented a redundant platform as an active backup in case of failure; it is synchronized daily with the primary server.
Library Technology Guides focuses on providing in-depth information to those who are performing research on technology products and organizations. It is geared toward presenting as much information as possible. Pages tend to be complex and dense. While this design works reasonably well for serious work on full-size monitors, accessing the site on a mobile device was frustrating.
At least initially, I wanted to target a different type of use for mobile users. The full set of tools oriented to more in-depth research on technology products is likely to be used mostly through full-size devices. I don't anticipate that those coming to the site via a smartphone would expect to perform complex tasks such as manipulating detailed queries, large statistical tables, and graphs. Rather, I consider my target mobile audience to be interested in general searches of libraries, companies, and texts.
With this outline of high-level expectations for what the site should provide to those using smartphones or other small mobile devices, the next steps included selecting some tools, devising the overall technical strategy, and then performing the coding and testing. The following are some of the tools I used and the techniques and procedures that I followed. These choices may or may not be ideal for other scenarios and are meant only as an example that illustrates some of the steps involved in creating a responsive website.
Tools and Techniques
One needs a few tools to ease the process of optimizing a site for mobile devices. Device emulators allow you to easily view your site on your desktop display as it would be seen on specific mobile devices. Although there are others, I found the "device mode" included in Chrome to work quite well. You can activate this tool by clicking on the utility menu, selecting "More tools," and then "Developer Tools." This opens a new window on the lower part of the page, which includes an icon to "Toggle device mode." Once activated, it's quite easy to view any page from the site how it'd be seen on any of the major mobile devices as presented on a drop-down menu. The emulator adjusts for the pixel size, screen dimensions, and other capabilities of each device.
The Google Webmaster Tools provides some additional utilities that help assess and test mobile usability. In advance of the upcoming inclusion of mobile support as a factor in search engine performance, there is an option called "Mobile Usability" under the Search Traffic section that will list pages it has tested that failed in critical categories. You can select any page from the list and test the live version of it for the categories of errors flagged. This tool provides an easy way to incrementally test pages as you implement coding changes.
Mobile detection-With these tools at the ready, I began the process of making my site responsive. The first task was to have a programmatic way to detect the type of device that's making a page request. CSS3 media queries provide the means to detect device categories and capabilities and alter display characteristics accordingly. The basic technique involves creating and linking to a different CSS based on the media query, for example:
link rel="stylesheet" type= "text/css" media="screen and (maxdevice-width: 480px)" href="mobile small. css"/>
For my site, since it is delivered through a CMS I created in Perl, I have some additional options. The approach I chose was to set a global variable $MobileBrowser through a subroutine that performs string matching on the user agent presented by the browser (ENV{'HTTP_USER_AGENT"]). This approach provides the ability to change the content, style, and structure of pages for mobile devices.
Mobile-friendly menu-The navigational menu implemented for my site, based on the Superfish menu plug-ins for jQuery, was far too complex for mobile devices. Consistent with my strategy to deliver a simplified structure for mobile devices, I opted for an entirely different menu tool, based on JavaScript and CSS code provided through a CC BY 3.0 license (responsivemobilemenu .com). Based on the detection of a mobile device, the header of each HTML page is created with Viewport configuration and style sheets instead of the ones initially created for full-size screens. Mobile detection also triggers a different include file for the navigational menu.
Simplified page layout-The multicolumn organization of many of the pages also needed to be changed for mobile devices. The features presented in separate columns work well for full-size devices, providing facets, additional search options, or supplemental content. Mobile presentation works best through a single, continuous column. Based on the value of the $MobileBrowser variable, each page element can be selectively included. In most cases, the content otherwise presented in the supplemental column was suppressed, and a subset of details was presented on the directory pages for libraries, companies, or products.
Fonts and spacing-Special consideration must be given to the spacing of page elements. The size and style of fonts should be easily read on mobile devices. It's essential to keep in mind that manipulating a page through a touchscreen mobile device is much less precise compared to the mouse or touchpad used with a desktop or laptop computer. To be mobile-friendly, any links, buttons, or other navigational features-called touch elements-must be well-separated. Conformance involves providing generous spacing around icons or presenting links in lists with adequate line spacing or vertical margins instead of bunched together in a paragraph. Links provided in narrative paragraphs tend to trigger a usability error for mobile devices, which could be addressed by selective formatting to include the HTML formatting to present them as an unordered list. Working through these issues is also a reminder that even full-size computers increasingly come with touchscreens, which pose some of the same usability issues as mobile devices.
My site makes extensive use of tables to present statistics, product features, or other complex data. Squeezing these tables into the width available on a mobile device wasn't necessarily possible. The technique that I adopted as an interim measure involves placing these oversized features within a div set to present scroll bars that enable the user to move the excess part into view as needed, using the CSS coding "overflow: auto".
Library Technology Guides includes more than 200,000 pages, although many of them are directory entries generated dynamically from database records. This initial project brings the vast majority into a better state of mobile usability. More work remains in refining the style sheets as well as other tasks needed to make further improvements. From now on, all new content and resources will be created with attention to mobile usability.
The process of reworking Library Technology Guides to use responsive design has been educational. In many of my articles and presentations, I emphasize the need for libraries to develop a strategy that accommodates the increasing levels of use via mobile devices. I've developed a better appreciation for the multiple levels of strategy, design, and technology involved in reorienting a site for mobile usability.
