The term responsive web design was popularized by an article that web designer and developer Ethan Marcotte wrote in 2010.¹ The goal of responsive web design is to make a web page look equally good regardless of the screen size of a device. Before the introduction of responsive web design, web designers and developers created most websites by following the principles of pixel-perfect web design. Pixel-perfect web design treats a web page like a page from a magazine. In this approach, the mock-up of a web page is first created in Photoshop, and then a developer recreates that design to fit a web browser. The goal of pixel-perfect web design is to make a web page resemble the original mock-up as much as possible. But a web page is not printed on a piece of paper but viewed in a web browser. Unlike paper, a web browser is a dynamic medium (see figure 4.1). It allows a user to re-size the browser window itself, and users can also change the size of the font as well. And when this happens, web pages created with pixel-perfect web design principles often break. If a web page was optimized for a 1024 × 768 pixel screen size, for example, that web page will look quite wrong in a smaller or bigger screen.

As the number of mobile devices that have a variety of screen sizes grows, pixel-perfect web design has become problematic. Responsive web design is an attempt to solve this problem with the following three tools:

• a flexible, grid-based layout
• flexible images
• media queries²

Flexible grids are created by using percentage (a relative unit) instead of pixel (an absolute unit). Media queries make it possible to apply different cascading style sheets (CSS) depending on the media type and the maximum width of the device screen. With cascading style sheets, one can control images and other fixed-width elements so that they stay contained in their container blocks (see table 4.1).

Responsive web design makes a web page adjust itself in response to the screen size of a device. This means that there is no longer one fixed layout in which the elements of a web page are permanently placed. Instead, as the size of the screen changes, the layout of a web page adjusts itself and rearranges the elements of the page.

If you are interested in the technical details of implementing responsive web design, Ethan Marcotte’s book Responsive Web Design is a great resource full of examples and details.³ “Responsive Web Design for Libraries: Beyond the Mobile Web” by Matthew Reidsma discusses how to implement responsive web design in a library context with many examples.⁴

Responsive web design is most easily understood by visual examples. Here we will take a look at the Starbucks website as an example.⁵ In figures 4.2–4.4, you can see how the Starbucks website home page responds as the web browser changes its size. The desktop layout (figure 4.2) displays the full menu next to the Starbucks logo image. When you hover your mouse over a menu item, a drop-down menu appears. Above the main menu, there are three quick links and a search box. In the middle of the page, a large image is presented, and on the side, four small thumbnail images appear with captions. These thumbnail images determine which large image is displayed. Below the image, there are two columns. The left column has more links and texts while the right column has six thumbnail images displayed in two rows. Each thumbnail image functions as a link to a different post. At the bottom, there is a footer that includes more links.

Now, let’s try to make the page smaller (figure 4.3). The top part of the web page changes to accommodate the narrower width of the browser. The search box disappears from the top and is sent to the top of the footer area, and one of the quick links goes away. The main menu items now move below the logo image. The small thumbnails next to the large image also move down, forming a separate row. The two columns under the large image also become separate rows.

The most drastic change takes place when the web browser is made even smaller, close to the screen size of a smartphone (figure 4.4). The main menu completely disappears, leaving a tiny square icon on the top right corner. Now the main menu items show up only when this icon is pressed. The large image shrinks to fit the width of the small screen, and the small thumbnails that appeared to the right of the large image on the desktop screen (figure 4.2) disappear except for the one that corresponds to the large image. The dots below are used to view and choose different images on the screen. Elements in the two columns under the large image are now stacked vertically.

Some libraries have already redesigned their websites to be responsive. Eric Rumsey, a librarian and web developer at the Hardin Library for the Health Sciences at the University of Iowa, compiled a list of notable responsive websites in higher education and libraries.⁶Figures 4.5–4.7 show examples of three responsive library websites seen on screens, which are each 320px, 700px, and 1280px wide.

The greatest advantage of responsive web design is that a library does not have to maintain and update more than one set of content. Another advantage is that there is no need for additional promotion of the library’s mobile website, since whenever a library patron accesses the library website on a mobile device, the website automatically adjusts its layout to be mobile-friendly. This is a great plus considering that libraries often experience difficulty in promoting their mobile offerings such as downloadable e-books, tablets for borrowing, and a mobile website.

From the library patron’s perspective, a library website with responsive web design presents all the information found in the full website. This content-parity enables patrons using a mobile device to find and do almost everything that they can do on the full desktop site as long as their mobile devices support the features in the full desktop site. (Flash on the mobile Safari web browser would be the example of an unsupported feature. The blank space in the header image area on figure 4.8 is such an example of Flash not properly displayed on a mobile device.) A responsive website is also much easier for visitors to navigate and browse than a nonresponsive desktop website; they do not have to zoom, pan, or pinch the desktop site scaled to fit the width of the tiny screen of a smartphone. Figures 4.8 and 4.9 show two library websites on a mobile device. If you were a library user, which site would you prefer to use on your mobile device?

While responsive web design has some great advantages, it does not by itself guarantee a satisfactory mobile experience. We have seen several examples of responsive websites so far. At first, just the fact that the text in the responsive websites appears in a legible size is a relief. However, this excitement soon wears off when we discover that poorly-designed responsive websites can be just as cumbersome to use as nonresponsive websites.

Let’s take a look at McGill University’s Life Sciences Library home page (figure 4.10) as an example. The home page of this library on the full desktop site consists of a header area with a search box, a main menu, and three columns under it. The left column is navigation; the center column is the main content; the right column has more links for services and resources. As the screen size becomes smaller, the top header, which includes the logo, the search box, and the main menu, adapts itself to fit the narrower width of the screen. But the rest of the screen turns into an extremely long page filled with too many navigation items, links, and more links.

Compare this page with three other responsive pages from Brown University Library (figure 4.11), the University of Kansas Medical Center Dykes Library (figure 4.12), and Grand Valley State University Libraries (figure 4.13). These three home pages start with much less content and present the content in an easier-to-navigate and less overwhelming manner. This approach makes these pages much more mobile-friendly. For great mobile experience, simply making elements flow into a long strip is not enough.

The restricted space on a small screen requires us to rethink what the most important items are on a page and how the rest of the content can be presented in a streamlined and uncluttered way. If you have bloated content and your desktop website is already too dense and cluttered, this issue must be addressed before making your website responsive. Matthew Reidsma, who redesigned the Grand Valley State University Libraries website to be responsive, blogged that he cut over 70 percent of the content and nobody noticed for eight months.⁷ As he pointed out, what we consider a design issue in a library website may well be a content issue instead.

Another potential problem with responsive web design is that it usually does not give users an option to go back to the look of the full desktop website. For those who are familiar with the existing library website and know exactly where to go to get the information they want, the automatic change in the website layout on a small-screen device can be disorienting and confusing. Until they get used to the new mobile layout, they are likely to prefer the familiar layout, even though they have to pinch, zoom, and pan to get to where they want to be.

Each library needs to carefully consider if responsive web design is the right solution for its patrons and their use cases. But it is technically possible to provide an option for mobile device users to opt out of responsive design by removing or changing the viewport meta tag.⁸ A demo page for one such solution is found at the URL in the gray box.

The demo page that allows visitors to opt out of the responsive layout from Creativeandcode.com

http://creativeandcode.com/demos/responsive-view-full-site (Access on a mobile device)

Lastly, the responsive website is likely to take much more time to load than a simplified separate mobile website. The CSS may hide some of the content, but all the content and other files, such as JavaScript libraries, that are used for the full site still get downloaded. In 2012, Smashing Magazine compared the mobile websites of the two presidential candidates, the separate mobile website for Mitt Romney and the responsive website for Barack Obama (see figure 4.14).⁹ The result showed an interesting contrast between the two mobile sites. A typical page on Romney’s mobile website was about 687 KB and loaded in about 8.75 seconds. By contrast, the size of a typical page on Obama’s responsive website was about 4.2 MB and took a whopping 25 seconds to load.

Slow performance is a common problem in responsive websites, which use the same code base for all devices, including the desktop PC and the smartphone. Web performance researcher Guy Podjarny reported that his performance test on 347 responsive websites showed that as many as 86 percent of them had little to no performance savings when loaded in the smallest window compared to the largest one, thereby making the page load painfully slowly.¹⁰ Furthermore, latency—the amount of time it takes for the host server to receive and process a request for a page object—is much greater on the mobile Web than on the desktop Web. This makes a web page load even more slowly on a mobile device.¹¹

Considering that people will have a variety of network speeds and devices with diverse capabilities, the large footprint of a responsive website can cause a serious accessibility problem. Back in 2009, Google experimented with slowing down the speed of its search and found not only that users ran fewer searches the longer they had to wait for the result to load but also that those who experienced the longer delay did not return immediately back to their previous usage level even after the experiment was over.¹² We certainly do not want library patrons to start avoiding a responsive library website because it takes too long to load on a mobile device. Conditional content loading, suggested by Jeremy Keith, is one of the strategies that can help with the performance issue of a responsive website.¹³

Conditional Loading for Responsive Designs

http://24ways.org/2011/conditional-loading-for-responsive-designs

If your library uses a content management system (CMS), it is highly likely that there are already some themes for your particular CMS that can make your site responsive. An open-source CMS, WordPress, has a number of responsive themes such as Responsive.¹⁴ Another popular CMS, Drupal, also has many responsive themes.¹⁵ There are also boilerplates that can help you develop a responsive site quickly, such as Bootstrap, a front-end toolkit for rapidly developing web applications, and JQuery Mobile, a touch-optimized HTML5 UI framework. Responsinator is a very useful tool for testing how your site appears in different mobile devices. For more resources for responsive web design, see “50 Fantastic Tools for Responsive Web Design,” which appeared in .Net Magazine.¹⁶

WordPress Responsive theme

http://themeid.com/demo/responsive

Bootstrap

http://twitter.github.io/bootstrap

JQuery Mobile

http://jquerymobile.com

The Responsinator

www.responsinator.com

Whether you pick a responsive site or a separate mobile site for your library, the greatest challenge is how to deliver comprehensive content and features in an uncomplicated way that is also appropriate to the mobile context. The advocates of responsive web design try to achieve this goal by providing the same set of content and features regardless of the screen size of the device. On the other hand, the proponents of stand-alone mobile websites argue that desktop computers and mobile devices are so different that the only way to offer a great user experience is to create two separate designs with fewer features for mobile.¹⁷

Some libraries offer both a responsive site and a separate mobile site. As you can see in the screenshots of the Penn State University (PSU) Libraries home page (figures 4.15 and 4.16), the responsive site is much more complex than the separate mobile site, and the mobile site is much simpler than those of other libraries that do not have responsive sites. PSU Libraries’ stand-alone mobile site focuses on three key features: search, library account management, and mobile-friendly databases.

Whether a library decides to start a responsive web design project or instead opts for a separate mobile website (or a native app) depends on a variety of factors, such as organizational resources, staff expertise, usability, and site performance. Whichever choice a library makes, however, there are some steps that can be taken to improve mobile library patrons’ user experience:

• Eliminate unnecessary content from both the desktop and the mobile websites (especially the home page), so that the most essential content and popular services can be more easily discovered.
• Once all the unnecessary content is winnowed out, provide comprehensive content and full features on the mobile site so that mobile users will not miss any essential information or feature.
• While keeping the parity of content and features between the full desktop site and the mobile website as much as possible, prioritize and organize content differently on a small screen based upon mobile use cases so that mobile users can easily navigate and use the content on a small screen.
• Provide a user-friendly way for mobile users to perform complex tasks. Do not overwhelm them by presenting all the information and services at once. Instead, reveal more when asked, thereby giving users a sense of progression.
• Provide additional features for mobile users based upon the extra capabilities of the mobile device (e.g., accelerometer, location detection, touch interface, local storage, camera, etc.) to deliver enhanced mobile experience.
• Make each of your mobile pages clear and easily interactionable.
• If your mobile page becomes too long even with the most essential content, make sure to provide a quick way to jump to the top, the bottom, and the different section headings of the page.
• Make your site load fast on a mobile device and still be aesthetically pleasing.

If your library has a mobile site, how discoverable is it to your library patrons? It would be a shame if the library’s mobile site were difficult to discover after a lot of time and effort were spent on its creation. Historically, libraries have experienced difficulty in marketing their services,¹⁸ and a library mobile website seems to be no exception. This report focuses on the library’s presence on the mobile Web and does not discuss many other mobile offerings from libraries. But today’s libraries have mobilized many areas of their services beyond their websites. Many libraries offer downloadable e-books, audiobooks, and music; circulate e-book readers; and provide mobile-friendly online databases and e-book collections. And one of the major venues where libraries advertise these mobile offerings is their mobile websites. If library patrons are unaware of the library mobile website itself, then they are likely to miss out on other mobile services from the library as well.

Unfortunately, many libraries seem passive in promoting the presence of their mobile websites. Let’s take a look at several examples. On the Ball State University Libraries home page (figure 4.17), a green icon in the center links to its mobile website. But when this page is viewed on the smartphone’s small screen, it is hard for library patrons to notice this tiny icon and to guess what it does. Onondaga County Public Library also has a mobile website, but the link to it is too small to make out even though it is placed right under the top banner image on the desktop site (figure 4.18). The link to San José Public Library’s mobile website is hidden in a tiny icon in the footer of the desktop home page (figure 4.19). If a library patron does not already know about it somehow, it is unlikely that he or she will be able to discover the library’s mobile website while visiting the desktop site on a mobile device. The University of Pennsylvania Libraries has a great mobile-optimized website, but the link to its mobile website is also hardly noticeable, being hidden away at the bottom of the left column in its desktop home page (figure 4.20).

This problem can be easily corrected, however. One easy solution is to add an auto-redirect to the desktop home page. Libraries can use either a server-side or a client-side script to detect a user’s device type and redirect mobile device users to the mobile-optimized library website. The result is instant promotion targeting all library patrons who at least once visit a library website on a handheld device.

For many libraries, the opt-in strategy comes from the intention of not forcing their mobile web apps onto library patrons. But the case of Montana State University (MSU) Library shows that the mobile Web has now reached a tipping point where people expect to see a mobile view when visiting from a mobile device and that the opt-in strategy does not serve well the needs of mobile users.¹⁹ The web development group of the MSU Library discovered that their Google Analytics data started to reflect the library’s true mobile audience only after they implemented the mobile redirect.²⁰

If you think that more mobile library patrons prefer the desktop version to the mobile version, however, you can also give a choice to mobile device users. For example, Oregon State University (OSU) Libraries website (http://osulibrary.oregonstate.edu) prompts mobile users to choose between the mobile site (http://m.library.oregonstate.edu) and the full desktop site when they try to access the OSU library website on a handheld device. Whichever version mobile device users pick, this approach makes them aware of the library’s mobile-optimized website. Even when mobile device users are automatically redirected to a mobile website, as long as there is a link to the desktop site in the footer area, people can easily visit the full site instead.

In this report, we have discussed the recent developments in the mobile Web and how library websites have been responding to these developments. In the previous chapters, we have seen that mobile library websites have been making progress in accommodating the evolving needs of mobile device users and working towards providing the mobile library experience that library patrons want. Responsive web design is one of the most recent trends that can help libraries meet their patrons’ high expectations in the mobile-first culture of information consumption.

This, however, does not mean that responsive websites are always better than stand-alone mobile websites or that the library mobile experience is solely determined by a library’s mobile (web or native) app. As a middleman between library patrons and the third-party content providers such as publishers and database aggregators, libraries need to promote and advocate more mobile-friendly interfaces for many separate library systems, including the library catalog, the link resolver, course reserves system, licensed databases, and downloadable e-book and music products.

The direct effect of the growth of the mobile Web is the deeper penetration of the Web into our daily lives. Libraries witness the direct result of this mobile shift and the expansion of the Web in more distracted users, an unprecedented level of information abundance and overload, and people’s increasing reliance on news articles and other information content that are curated by humans and shared in social media. Libraries need to reconfigure their role to stay relevant in this drastically different information landscape.²¹ The following are some ideas that can help libraries take a step in this direction:

• Provide more mobile-friendly solutions for the content that is generated by either the library or a third-party content provider.
• Instead of waiting until library patrons come to libraries to seek resources and help, create, or curate relevant, high-quality information content and distribute it into the information streams that people interact with daily and that are often closely connected to social media.
• Enable patrons to curate and share information content that they obtain from their libraries as much as possible.²²
• Motivate library patrons to be more involved with library resources and services by tapping into emerging trends such as gamification and game-based learning.

In these times when people’s attention spans can be short, it is crucial for libraries to come up with smart ways that will make people notice libraries’ resources and services. One of the emerging trends that can help is gamification. According to the 2012 Horizon Report, game-based learning will become increasingly widespread in higher education over the next few years,²³ and the 2013 Horizon Report predicted that institutions in higher education would adopt games and gamification within two to three years.²⁴ Gamification means applying game thinking and game dynamics to a non-game context for the purpose of engagement and problem solving. Commercial video games have been popular for years. But the rapid adoption of handheld devices and the expansion of the mobile Web transformed games into portable activities that are interwoven with reality. Adding the elements of gamification to the library’s mobile presence can have a powerful impact in engaging library patrons and directing their attention to valuable library resources and services.

A web designer, Stephen Hay, tweeted, “There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you.”²⁵ All mobile devices help us consume information and interact with the content and services on the Web, and mobile users expect all content and services to flow smoothly from one device to another regardless of different device types and platforms. In this sense, there is only one Web. But the prevalence of the mobile device makes the mobile Web a crucial part of the Web, and in the mobile-first culture of information consumption, success in the mobile Web naturally leads to success on the Web. By optimizing and enriching patrons’ library experience on mobile, libraries can bring success to the physical library space as well as to its online presence and activities.