ltr: Vol. 49 Issue 6: p. 29
Chapter 4: Responsive Web Design, Discoverability, and Mobile Challenge
Bohyun Kim

Abstract

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. Chapter 4 of Library Technology Reports (vol. 49, no. 6) “The Library Mobile Experience: Practices and User Expectations” provides several examples of responsive library websites, discusses some of the pitfalls of responsive web design, and argues for better discoverability of libraries’ mobile (web or native) apps. Whether a library decides to develop a responsive site, a separate mobile site, or a native app, it is only part of the whole library mobile experience. Libraries’ active presence on the mobile Web is now a must, and libraries need to skillfully and creatively adapt themselves to the new information landscape characterized by the abundance of information and the scarcity of human attention.


If people want to be able to do almost everything on mobile that they do on a desktop computer, what can libraries do to meet such expectations? Should libraries start providing the same content and functionalities on the desktop and the mobile website? Library patrons are already visiting non–mobile-optimized library websites on their mobile devices for exactly this purpose. Those desktop websites may appear tiny on the smartphone. But many of us zoom, pinch, and pan to get to the area we know or assume will have the information we want. As long as the mobile web browser can display the full content of a web page, we grab the information we want and get things done. With responsive web design, however, this process can get much less cumbersome.


What Is Responsive Web Design?

The term responsive web design was popularized by an article that web designer and developer Ethan Marcotte wrote in 2010.1 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 queries2

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.3 “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.4

Responsive web design is most easily understood by visual examples. Here we will take a look at the Starbucks website as an example.5 In figures 4.24.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.6Figures 4.54.7 show examples of three responsive library websites seen on screens, which are each 320px, 700px, and 1280px wide.


Advantages of Responsive Web Design

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?


A Few Problems with Responsive Web Design

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.7 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.8 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).9 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.10 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.11

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

Conditional Loading for Responsive Designs

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


Resources and Tools for Responsive Web Design

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.14 Another popular CMS, Drupal, also has many responsive themes.15 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.16

WordPress Responsive theme

http://themeid.com/demo/responsive

Bootstrap

http://twitter.github.io/bootstrap

JQuery Mobile

http://jquerymobile.com

The Responsinator

www.responsinator.com


Uncomplicate Complexity on Mobile

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

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.


Make Your Mobile Site Discoverable

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,18 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.19 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.20

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.


Conclusion

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.21 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.22
  • 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,23 and the 2013 Horizon Report predicted that institutions in higher education would adopt games and gamification within two to three years.24 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.”25 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.


Notes
1. Ethan Marcotte, “Responsive Web Design, ” A List Apart, May 25, 2010, http://alistapart.com/article/responsive-web-design
2. Ethan Marcotte, Responsive Web Design (New York: A Book Apart, 2011), 9
3. Ibid
4. Matthew Reidsma, “Responsive Web Design for Libraries: Beyond the Mobile Web, ” in Mobile Library Services: Best Practices, ed. Charles Harmon and Michael Messina (Lanham, MD: Scarecrow Press, 2013), 79–94
5. For more examples of responsive web design, see John Polacek, “What the Heck Is Responsive Web Design?” accessed June 5, 2013, http://johnpolacek.github.io/scrolldeck.js/decks/responsive; Lisa Kurt, “Responsive Web Design and Libraries, ” ACRL TechConnect blog, October 4, 2012, http://acrl.ala.org/techconnect/?p=1933
6. Eric Rumsey, “Responsive Design Sites: Higher Ed, Libraries, Notables, ” Seeing the Picture (blog), May 3, 2012, http://blog.lib.uiowa.edu/hardinmd/2012/05/03/responsive-design-sites-higher-ed-libraries-notables
7. Reidsma, Matthew. “Control Issues, ”Matthew Reidsma. (blog), April 25, 2012, http://matthew.reidsrow.com/articles/19
8. For discussions on this issue and a few solutions presented, see Luke Charde, “Should Users Be Forced into a Responsive Design (without the Ability to Opt Out)?” User Experience Stack Exchange, May 1, 2012, http://ux.stackexchange.com/questions/20824/should-users-be-forced-into-a-responsive-design-without-the-ability-to-opt-out; Chris Coyier, “Opt-Out Responsive Design?, ” CSS-Tricks, September 12, 2012, http://css-tricks.com/user-opt-out-responsive-design
9. Brad Frost, “Separate Mobile Website vs. Responsive Website, ” Smashing Magazine, August 22, 2012, http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown
10. Podjarny, Guy. “Performance Implications of Responsive Design—Book Contribution, ”Guy’s Pod (blog). July 11, 2012, www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution
11. Everts, Tammy. “How I Learned That 3G Mobile Performance Is up to 10X Slower Than Throttled Broadband Service, ”Web Performance Today. (blog), October 26, 2011, www.webperformancetoday.com/2011/10/26/interesting-findings-3g-mobile-performance-is-up-to-10x-slower-than-throttled-broadband-service
12. Brutlag, Jake. “Speed Matters, ”Google Research Blog. June 23, 2009, http://googleresearch.blogspot.com/2009/06/speed-matters.html
13. Jeremy Keith, “Conditional Loading for Responsive Designs, ” 24 Ways, December 2, 2011, http://24ways.org/2011/conditional-loading-for-responsive-designs
14. For more examples of responsive web design themes for WordPress, see Kan Tan, “40+ Free Responsive WordPress Themes, ” Hongkiat.com (blog), 2012, www.hongkiat.com/blog/free-responsive-wordpress-themes; Grace Smith, “20 Stunning Responsive WordPress Themes, ” Mashable, March 8, 2013, http://mashable.com/2013/03/08/responsive-wordpress-themes
15. For more examples of responsive themes, see Danny Sipos, “6 Free Responsive Themes for Drupal 7, ” Web Omelette (blog), November 19, 2012, www.webomelette.com/6-free-responsive-drupal-themes; Kayla Wren, “Best Drupal 7 Responsive Themes, ” LevelTen blog, April 25, 2013, http://getlevelten.com/blog/kayla-wren/best-drupal-7-responsive-themes#.UY2viIKBRfk
16. Jacobs, Denise; Gasston, Peter. “50 Fantastic Tools for Responsive Web Design, ”.Net Magazine. April 24, 2012, www.netmagazine.com/features/50-fantastic-tools-responsive-web-design
17. Jakob Nielsen, “Optimizing a Screen for Mobile Use, ” Nielsen Norman Group, March 28, 2011, www.nngroup.com/articles/optimizing-a-screen-for-mobile-use
18. Kathryn Zickuhr, Lee Rainie, and Kristen Purcell, Library Services in the Digital Age (Washington, DC: Pew Research Center, January 22, 2013), http://libraries.pewinternet.org/2013/01/22/library-services
19. Jason A. Clark, “Building the Montana State University Library Mobile Web App, ” in Mobile Library Services: Best Practices, ed. Charles Harmon and Michael Messina (Lanham, MD: Scarecrow Press, 2013, 128, 131)
20. Ibid, 131
21. For a related discussion on this topic, see Bohyun Kim, Patrick T. Colegrove, and Jason Clark, “I Can Do It All By Myself: Exploring New Roles for Libraries and Mediating Technologies in Addressing the DIY Mindset of Library Patrons” (presentation, American Library Association Annual Conference, Anaheim, CA, June 23, 2012), www.slideshare.net/bohyunkim/i-can-do-it-all-by-mysef-exploring-new-roles-for-libraries-and-mediating-technologies-in-addressing-the-diy-mindset-of-library-patrons
22. This is a major trend on the Web that has been accelerated by the increased use of mobile devices and is highly relevant to the library context. For a discussion more focused on the Web, see Cameron Koczon, “Orbital Content, ” A List Apart, April 29, 2011, http://alistapart.com/article/orbital-content
23. Larry Johnson, Samantha Adams, and Michele Cummins, The NMC Horizon Report: 2012 Higher Education Edition (Austin, TX: New Media Consortium, 2012), www.nmc.org/publications/horizon-report-2012-higher-ed-edition
24. Larry Johnson, Samantha Adams Becker, Michele Cummins, Victoria Estrada, Alex Freeman, and Holly Ludgate, The NMC Horizon Report: 2013 Higher Education Edition (Austin, TX: New Media Consortium, 2013), www.nmc.org/publications/2013-horizon-report-higher-ed
25. Stephen Hay, “There Is No Mobile Web, ” The Haystack (blog), January 7, 2011, www.the-haystack.com/2011/01/07/there-is-no-mobile-web

Figures

[Figure ID: fig1]
Figure 4.1 

A page on the website of WBUR, Boston’s NPR news station, appears cropped when a user makes the browser window small. We can see only a fraction of the page and users have to scroll horizontally to see the rest of the page content. On the small screen of a smartphone, the same page appears zoomed out to fit the width of its screen. [http://onpoint.wbur.org/2013/05/07/future-of-libraries]



[Figure ID: fig2]
Figure 4.2 

Starbucks home page on the desktop browser [www.starbucks.com]



[Figure ID: fig3]
Figure 4.3 

Starbucks home page on the tablet [www.starbucks.com]



[Figure ID: fig4]
Figure 4.4 

Starbucks home page on the smartphone [www.starbucks.com]



[Figure ID: fig5]
Figure 4.5 

Website of the Digital Public Library of America on different devices [http://dp.la]



[Figure ID: fig6]
Figure 4.6 

Website of the University of Notre Dame Hesburgh Libraries on different devices [www.library.nd.edu]



[Figure ID: fig7]
Figure 4.7 

Website of the Sacramento Public Library on different devices [www.saclibrary.org]



[Figure ID: fig8]
Figure 4.8 

Florida Atlantic University Libraries’ nonresponsive desktop website on a mobile device [www.fau.edu/library]



[Figure ID: fig9]
Figure 4.9 

Yale University Library’s responsive website on a mobile device [www.library.yale.edu]



[Figure ID: fig10]
Figure 4.10 

McGill University Life Sciences Library home page on a mobile device and on a desktop PC [www.mcgill.ca/library/library-using/branches/lsl]



[Figure ID: fig11]
Figure 4.11 

Brown University Library website on a mobile device [http://library.brown.edu]



[Figure ID: fig12]
Figure 4.12 

University of Kansas Medical Center Dykes Library website on a mobile device [http://library.kumc.edu]



[Figure ID: fig13]
Figure 4.13 

Grand Valley State University Libraries website on a mobile device [www.gvsu.edu/library/]



[Figure ID: fig14]
Figure 4.14 

Romney’s stand-alone mobile site versus Obama’s responsive website [Source: Brad Frost, “Separate Mobile Website Vs. Responsive Website,” Smashing Magazine, August 22, 2012, http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown]



[Figure ID: fig15]
Figure 4.15 

Penn State University Libraries’ responsive site on a mobile device [http://libraries.psu.edu]



[Figure ID: fig16]
Figure 4.16 

Penn State University Libraries’ mobile site [http://m.psu.edu/library]



[Figure ID: fig17]
Figure 4.17 

Ball State University Libraries home page has a green icon (circled) for a link to its mobile website. The meaning of the icon is, however, not entirely clear. [http://cms.bsu.edu/academics/libraries]



[Figure ID: fig18]
Figure 4.18 

Onondaga County Public Library home page. The link to its mobile website (circled) is placed right under the top banner image, but it is too small to make out on a smartphone screen. [www.onlib.org]



[Figure ID: fig19]
Figure 4.19 

San José Public Library home page. The link to its mobile app (circled) is one of the tiny icons in the bottom footer. [http://sjpl.org]



[Figure ID: fig20]
Figure 4.20 

University of Pennsylvania Libraries home page with the link to its mobile site (circled) [www.library.upenn.edu]



Tables
[TableWrap ID: tbl1] Table 4.1 

A simplified comparison of CSS in pixel-perfect design and responsive web design


Responsive Web Design Pixel-Perfect Design
#page {width: 90%;} #page {width: 960px;}
h1 { font-size: 1.5em;} h1 { font-size: 24px;}
img, embed, object, video {max-width: 100%; }
Note: This prevents a large image from overflowing its container if the container is smaller than the image itself. The same applies to other fixed-width elements.
@media screen and (min-width: 1024px) { … }
@media screen and (max-width: 520px) { … }
@media screen and (max-width: 768px) { … }
Note: Media queries allow us to specify different styles to be applied to a webpage depending on the type of media (e.g., screen, print, handheld) and the size of the browser.


Article Categories:
  • Information Science
  • Library Science

Refbacks

  • There are currently no refbacks.


Published by ALA TechSource, an imprint of the American Library Association.
Copyright Statement | Privacy Policy