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
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.
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
