Delivering Responsive Web Design via the Library OPAC - a literature review

I recently had an article published in the ‘Journal of Web Librarianship’. Below is a longer literature review that than included in the article. Article details are at the end.

Introduction

This literature review covers three phases: a pre-project review, an ongoing review during the project, and a final literature review undertaken when composing this article. The findings of the literature review are presented here thematically. There is still very little written in the literature about the application of responsive web design to the OPAC of a small academic library. Case studies about similar activities are most frequently about larger libraries with more resources, staffing, and training available to support the project.

The Argument for Responsive Design

The pre-project literature review identified very few library and information science-specific publications dealing with responsive design in a library environment, and even fewer of a case study nature. No instance was identified where the responsive site was hosted on the WebOPAC platform. Contributions of interest include: Marcotte (Marcotte 2010) who focused on the initial concept of responsive design, Fox (2012) and Riley-Huff (2012), who discussed responsive design in the library context. Dalton (Dalton 2013), a college liaison librarian at University College Dublin (UCD) argued that while responsive design can reduce the need for mobile apps, interactive content may still need an app to be deliver the full benefit of rich content.

A good outline of the pros and cons of mobile apps versus web apps is found on mobiForge, self-proclaimed as the “world’s largest independent mobile web development community” (mobiForge 2010). In question and answer format this piece explained much of the jargon and technology used in delivering apps and highlights how the introduction of new standards such as HTML5 narrow the gap between what mobile and web apps can do.

Several experts inspired the Library Institute of Technology Tallaght to explore responsive design as both a service improvement to our users and to save money. According to Google’s Developer Programs technical lead Maile Ohye, a motivating factor for many sites to move toward to responsive design was the fact that Google’s new algorithm moved poorly mobilized sites down search results, as was the increasing level of site traffic in non-desktop screen sizes (Ohye 2015). Ohye also outlined the process used to identify areas to be the focus of responsive design, as well as the tools used for emulating the finalized pages such as Google Developers’ Mobile Friendly Test. Marshall Breeding, a noted independent consultant in the field of library technology and systems (Breeding 2015, 23-26), further underscored the argument for libraries to adopt responsive design.

Constant Change

User expectations, web standards, and web technologies have constantly evolved over the past decade. This creates a challenge for smaller libraries where staff resourcing for online services may be part of a greater set of responsibilities, and it is unlikely a staff member can be allocated to the development of online services full time. Marcotte, the web designer who coined the phrase “responsive design” (2010), pointed out that working on the web is transient in nature, and noted how mobile access will likely outstrip desktop access by 2015. His core argument was that the greater number of devices, inputs, and browsers than ever before causes a rise in demand for websites which work with these devices. While initially compatibility was achieved using separate sites or subdomains, a more flexible approach to design is more future-proof. While being layout-independent is sufficient for the needs of desktop users, a more optimized approach is needed for other devices.

Responsive Design as a tool

In light of the importance of responsive design in future-proofing web designs, it is important to evaluate it as not only as a new technology but also as a useful tool. To this end (Wisniewski 2013, 74), current Web Services and Communications Librarian at the University of Pittsburgh, discussed responsive design activities as a set of tools which allow a website to be designed so that they respond to the context of the user and the device accessing the web site at hand. He reported that responsive design solves the problem of not knowing what screen sizes will dominate in the future. He provided a brief outline of CSS coding for basic responsive functions, and the control of image resolution and size. Fox (2012, 119-125), current Manager of Web and Software Engineering at Hesburgh Library, University of Notre Dame, outlined how HTML5 and CSS3 provide tools to respond to the different devices which may access a site. The key benefit of responsive design is, according to Fox, the ability to maintain the content on one site only.

A useful case study was undertaken by Gayhart, User Experience Librarian at the University of Toronto Library and colleagues (Gayhart, Khalid, and Belray 2014). They described the how the development of a new catalog discovery layer used responsive design principles. Leveraging their experience and knowledge of user interactions with existing catalogs to inform and plan improvements allowed the team to concentrate on retaining the desktop web site as-is while developing a responsive design to limit the amount of divergence from the main design. The article detailed device testing processes, navigation menu decisions, accessibility to WCAG 2.0 AA testing tools, and back-end design considerations. The responsive design was paired with the redesign of the application and server infrastructure. An open source load balancer was introduced to improve load times. The Toronto team also discussed communications strategies for users and staff in addition to library staff as an important part of feedback solicitation and change management.

Snell, web librarian at the Mechanics' Institute Library and Chess Room in San Francisco, provided a history of the evolution of differing screen sizes culminating in the explosion of the tablet market in 2010 (2013, 12). He argued that sites should be viewable across multiple screen resolutions. He discussed the change from using pixels to percentage to control the size of design elements, and cautioned developers to pay attention to the sizes of nested content areas as the screen gets smaller. The article also described the use of CSS Media Queries.

Moving towards mobile services

As responsive design becomes standard, it is important to consider many mobile devices in planning projects, not just smartphones. To this end Fox (2012, 119-125) offered a theoretical discussion of the philosophy behind the responsive design trend. Efforts to support the move towards the use of mobile devices have led to the duplication of content across platforms, and Fox proposed responsive design as a solution to avoid duplication of effort.

Bohyun Kim, current Associate Director, Library Applications and Knowledge Systems, University of Maryland, Health Sciences and Human Services Library (Kim 2013, 29-30) pointed out that mobile users have expectations of library’s web sites, and that libraries need to be creative and skilful in their adaption of these technologies. Such exceptions include access to the same amount of information and the ability to complete the same tasks on a mobile device, all content and services flowing smoothly from one device to another, a mobile ‘view’ of the web site, menu customization, and more mobile friendly information resources. Kim used images of library web sites to illustrate the advantages of responsive design, and warned that poorly designed responsive sites are as cumbersome to use as non-responsive sites. Changing the placement of content on the mobilized pages can lead to confusion for users familiar with the non-mobile site. The load speed of a responsive site can take longer than a separate mobile site. Kim urged designers to keep the site uncomplicated, offered steps to begin the process, and suggested tools such as  CMSs. Kim noted that marketing the final web site and any additional mobile-optimized services is essential to the overall success of such projects.

Because the key aim of responsive design is to enable access to the same content via multiple devices, it is essential that case studies applying these technologies are identified and examined before commencing similar projects. It is especially important that any project lead applies lessons learned during the planning stages to save time and effort.

Lessick (Librarian Emerita, Grunigen Medical Library, University of California) and colleagues (2013, 239-243) discussed responsive web design at the University of Iowa’s Health Sciences Library. For this team, having a responsive web site meant having only one site to maintain, saving staff time and using best-practices for mobile device-optimized sites.  They noted that it might have been easier to use a pre-existing theme rather than adapt the previous year’s redesign.

Librarians Hannah Rempel and Laurie Bridges (2013, 8) outlined the history of mobile web services at Oregon State University, the theoretical debate surrounding them, and  mobile usability studies, including those focused on library web sites. The methodology and results of their study of tasks undertaken via an online, voluntary survey on the library’s mobile site are presented. Their online survey was quite detailed, ran for 12 weeks and netted 115 responses. They found that multiple user groups access the mobile web site, and top reasons to visit the site were to check opening times, find a book, research a topic, make study room reservations, and check computer availability. They also found that tasks undertaken were similar irrespective of the time undertaken.

Rempel and Bridges also analyzed Web analytics (Google Analytics) for the survey period. The desktop site was used more frequently than the mobile site by mobile devices for practical tasks, such as computer or study room availability. Survey respondents identified a disconnect between what users did and what they wanted to do, highlighting the need for the website to support more complex tasks. A new, responsive design, including the use of Drupal modules and themes, allowed the library to avoid supporting a separate mobile site. Some information sources outside of the library’s design control could not be included in the project, including study room bookings and the library catalog.

Accessibility

Any web design project should support accessibility and inclusivity from the beginning. For libraries this is especially important as many are publically funded, and are often obligated by guidelines or legislation to provide accessible services online. The illustrative case studies outlined below are very useful in this context and provide examples of academic libraries’ experiences, giving the reader a good overview of the types and importance of undertaking the implementation of accessibility in library web design projects.

Riley-Huff (2012, 29), Head of Web Services at the University of Mississippi Libraries, asserted that web site accessibility should be a given and that accessible web sites are more usable for everyone. He noted there are limits related to human resources and the size of website. He recommended compliance with local web standards, and offered tools for the testing of sites, including the Web Accessibility Evaluation Tool (WAVE). He urged readers to know their constituent communities and design to their needs, and to solicit library staff for feedback about where they experience users with problems using the website. Riley-Huff also cautioned readers to be aware of any accessibility software or tools that the user might be using and to take them into account in the design process. He provided design advice, including examples and warnings against using Flash content and requiring JavaScript or jQuery for full functionality. Riley-Huff also included concerns about CMSs and accessibility, and gave an overview of WAI-ARIA (a set of HTML attributes for dynamic content or highly developed interfaces to make them accessible).

Baker, Systems / Institutional Repository Librarian at Western Oregon University (2014, 118-136) argued that is it essential to embrace accessibility and universality, including responsiveness in web design projects. He concentrated on design philosophies and summarized recent updates to WCAG 2.0, HTML5, CSS3, and WAI-ARIA. Baker noted that while the four principles of WCAG 2.0 (perceivable, operable, understandable, robust) have no legal standing, they remain the clearest guidelines for accessible design. Baker advised project planning and recommended a comprehensive series of steps to provide a framework. These included beginning with content stripped of layout then arranging it in a logical manner. Next, semantic mark-up using HTML should be added. Styling the site using CSS via an external file rather than the inline method makes later CSS and design changes easier to apply globally. JavaScript and other technologies can then be added once these steps are complete, as long as they are made accessible by good scripting practices, use of WAI-ARIA, and are used in an unobtrusive manner. Finally, testing the site is important so that if it does not work as expected, time is available to rectify any issues (Baker 2014).

Technological Methods

An examination of the literature allowed the project lead to identify the methods available to deliver a responsive web site and demonstrate that several technological methods are combined in order to do so. These newly emerged technologies are summarized thematically below.

HTML 5

In web design, the period 2010-2013 saw a move towards using HTML5 (the standard was only finalized in October 2014) and CSS3. HTML5 brought major changes to web application development. HTML5 aims to solve compatibility issues and support multimedia access on mobile devices. Baker (2014, 118-136) reviewed HTML5’s new features, such as the expanded selection of elements and support for embedding video and audio especially via APIs.

CSS3 and the media queries file.

CSS3 is used to control the layout of web pages separately from page content, while a separate CSS file entitled “media queries” contains the instructions for how the web page should respond to different screen sizes and devices (Baker 2014; Marcotte 2010), control elements of the page beyond layout, including, but not limited to the target area for links, Fitt’s Law compliance on touch devices, showing and hiding page elements for navigation purposes, and responsive typesetting (Marcotte 2010). Several authors discussed the importance and application of CSS3 and the media queries file in particular. For each screen size and device, entries specify the CSS layout styles necessary to successfully produce a web page that fits the device’s requirements. Media queries also allow break points to be inserted into page layout: Baker provided code examples for doing so (Baker 2014, 118-136). Kim (2013, 29-30) offered further code examples comparing traditional and responsive CSS, along with a discussion of the functionality CSS makes available to the designer.

Frameworks

CSS frameworks to control display are used to create standards-compliant, cross-browser compatible websites. Frameworks described by Snell (2013, 12) and other include the following:

• BASE: BASE is a lightweight responsive HTML5 and CSS3 framework with minimal code.
• Bootstrap: A HTML, CSS, and JavaScript framework for developing accessible, responsive, mobile-first projects (Baker 2014, 118-136).
• Foundation: provides a family of accessible, responsive front-end frameworks while being semantic, readable, flexible, and completely customizable. Works on any device.
• Titan: Provides configurable settings for WordPress themes and plugins with a few lines of code.
• Drupal: An open source content management system that allows for the creation of integrated digital frameworks with thousands of add-ons, modules for functionality, and themes for customizing presentation.

This review of the literature provided a limited number of examples of noteworthy responsive web design projects in libraries and supported the argument that library web sites should implement responsive design as one component of a universal web design strategy. This approach also provides web services and content to mobile users that mirrors their desktop experience. To this end, responsive web design can be used as a tool to future-proof library web sites against the current online environment of constant change, at least to a certain extent. The technological methods to do so provide a good starting point for any project lead about to undertake a project of this nature.

Bibliography

Baker, Stewart C. 2014. "Making it Work for Everyone: HTML5 and CSS Level 3 for Responsive, Accessible Design on Your Library's Web Site." Journal of Library & Information Services in Distance Learning 8 (3/4): 118-136. http://web.b.ebscohost.com/ehost/detail/detail?vid=5&sid=5fba75c5-d6b6-4f8f-9435-6bc281951cc6%40sessionmgr112&hid=109&bdata=JnNpdGU9ZWhvc3QtbGl2ZQ%3d%3d#AN=98681921&db=a9h.

Breeding, Marshall. 2015. "The Systems Librarian. Going Mobile: How I made My Own Site Responsive." Computers in Libraries 35 (4): 23-26. http://web.b.ebscohost.com/ehost/detail/detail?sid=2bdd1c0d-135b-4c42-b081-ff3ede76d7a3%40sessionmgr113&vid=1&hid=109&bdata=JnNpdGU9ZWhvc3QtbGl2ZQ%3d%3d#AN=102711035&db=a9h.

Dalton, Michelle. "Could 2013 be the Year of Responsive Design? ~ Libfocus - Irish Library Blog." http://www.libfocus.com/2013/01/could-2013-be-year-of-responsive-design.html., last modified 30 jan, accessed 12 aug, 2015, http://www.libfocus.com/2013/01/could-2013-be-year-of-responsive-design.html.

Fox, Robert. 2012. "Being Responsive." OCLC Systems & Services: International Digital Library Perspectives 28 (3): 119-125. doi:10.1108/10650751211262100. http://ittdublin.summon.serialssolutions.com/2.0.0/link/0/eLvHCXMwlV1La9wwEB5KAm0vTdKHs00XfGmhBRtbD0s-JmnSQB9Q2MDejPWChdRNsk5_f2ds7abZJIeehNAg2RprXp5PA8BZXmQbMsFwbRnHQ-7pgipVG1fKYJD9wtRSWYI_z3_I83l1-JN9uY1kDEmWY3Bm0S3JWx2Ed8xexxbtCyXpljJWoe9CrjuXiio4zL7P1gKZVXzMs69khuTz-HPzwRnuqKcNjO6tnB6Uz-nOGhBYZA8_aU6lgyhL5eZXvuiznmLjNLTwj7_DLryItmh6OH48e_DEdy9hGpEM6Yc0QpWIdWmUAa9g58ijtkuvY27tH_8azk9PZsdnWSyrkFlGZWaEQzOgNLiqE4UPCgUcY8poIXzgwmnVWl0jZ4PUXFit21IobVDvO9sWQXj-Bra6351PYDvgEcEW1VaCe5LA03n97bM--3o8dvdW3Xw5QMjyqz5BpgwnLKtytQ9pEG0hDdo4QVihndCGuWCt53XFWvS1JvBpxY_mcrx_oxn8lkI397ZuAu8jD_6h3aBpLl2YwMf7dI_OOV3xvmkNhZ9sv0QyzhUpknICyXrcXVw0BHUS6APL8u1_rHIAz9ESYxSsLtU72Oqvb_wUni363lE0svsLNR3nKg.

Gayhart, Lisa, Bilal Khalid, and Gordon Belray. 2014. "The Road to Responsive: University of Toronto Libraries’ Journey to a New Library Catalogue Interface." The Code4Lib Journal (23). http://journal.code4lib.org/articles/9195.

Lessick, Rumsey, Pearson, Roksandic, Gillum, Garcia-Milian, and Samsundar. 2013. "Moving Beyond the Bookshelves." Journal of the Medical Library Association : JMLA 101 (4): 239-243. http://www.ncbi.nlm.nih.gov/pmc/articles/PMC3794676/.

Marcotte, Ethan. "Responsive Web Design · an A List Apart Article." http://alistapart.com/article/responsive-web-design., last modified 25 may, accessed 14 aug, 2015, http://alistapart.com/article/responsive-web-design.

mobiForge. "Mobile Applications: Native V Web Apps - what are the Pros and Cons?" https://mobiforge.com/news-comment/mobile-applications-native-v-web-apps-what-are-pros-and-cons., last modified 8 spe, accessed 12 aug, 2015, https://mobiforge.com/news-comment/mobile-applications-native-v-web-apps-what-are-pros-and-cons.

Ohye, Maile. "Official Google Webmaster Central Blog: FAQs about the April 21st Mobile-Friendly Update." http://googlewebmastercentral.blogspot.ie/2015/04/faqs-april-21st-mobile-friendly.html., last modified 21 apr, accessed 13 aug, 2015, http://googlewebmastercentral.blogspot.ie/2015/04/faqs-april-21st-mobile-friendly.html.

Rempel, Hannah Gascho and Laurie Bridges. 2013. "That was then, this is Now: Replacing the Mobile-Optimized Site with Responsive Design." Information Technology and Libraries 32 (4): 8. doi:10.6017/ital.v32i4.4636. http://go.galegroup.com/ps/i.do?id=GALE%7CA357591771&v=2.1&u=tallaght&it=r&p=AONE&sw=w&asid=831acff9ae9cbbca8a0c1ee1be64b493.

Riley-Huff, Debra A. 2012. "Web Accessibility and Universal Design: A Primer on Standards and Best Practices for Libraries." Library Technology Reports 48 (7): 29. http://go.galegroup.com/ps/i.do?id=GALE%7CA308435301&v=2.1&u=tallaght&it=r&p=AONE&sw=w&asid=d836b6cc621603d942950b700a00341b.

Snell, Jeremy. 2013. "FLEXIBLE EVERYTHING: Getting Responsive with Web Design." Computers in Libraries, 04/, 12. http://go.galegroup.com/ps/i.do?id=GALE%7CA324982793&v=2.1&u=tallaght&it=r&p=AONE&sw=w&asid=d14eef29cb47a0e34114fbd00235d732.

Wisniewski, Jeff. 2013. "Responsive Design." Online Searcher 37 (1): 74. http://go.galegroup.com/ps/i.do?id=GALE%7CA320732767&v=2.1&u=tallaght&it=r&p=AONE&sw=w&asid=2976851a337a199af445748cffc17478.

 The Accepted Manuscript of the article published by Taylor & Francis in JOURNAL OF WEB LIBRARIANSHIP on 17th October, 2016, available online: http://www.tandfonline.com/doi/full/10.1080/19322909.2016.1229147

Article Citation: Niamh Walker-Headon (2016): Responsive Web Site Development at the Library, Institute of Technology Tallaght: A Case Study, Journal of Web Librarianship, DOI:10.1080/19322909.2016.1229147