Staff and volunteers at Central Connecticut State University’s Burritt Library responded to the surging demand for a Library website readable on many mobile devices. An intern and a core group of individuals with common understanding of the goals and needs undertook the development process, starting with the recognition that a library’s mobile site should and could not replicate the full content of the existing website. They focused on basic library information, library catalog search, and an instant messaging link to the reference desk. Developers adopted packaged mobile frameworks to first create a simple static mobile site and subsequently took the further step to develop a dynamic library app, distributable through an app market. The app design supported expanded features and functionality, including an interactive library map and QR code scanner. The Burritt Library experience illustrates important lessons about the process and that, with determination and a modicum of skills, developing a mobile website and app is achievable and timely.

websites
mobile applications
libraries 
software engineering

Bulletin, October/November 2011


Mobile Website Development: From Site to App

by Edward Iglesias and Wittawat Meesangnil

The Burritt Library at Central Connecticut State University is part of a consortium consisting of four universities and the Connecticut State Library. All of the institutions have separate websites allowing for a great deal more freedom in approach to user experience and information architecture. Burritt has no formal developer position, and web duties are taken on by different individuals, including the systems librarian and the electronic resources librarian. Our department was fortunate enough to obtain an intern who had a great deal of computer experience and was completing a masters in computer science. He made creating a mobile web application for the library his capstone project, which worked out very well for the library.

Library and Mobile Technology
The need for a mobile presence for the library’s resources is well documented. Interested readers can refer for a good introduction to a recent issue of Library Technology Reports on the libraries and mobile web services by Cody Hanson [1]. When developing the library’s mobile web presence, it is critical to focus on design that displays well on mobile devices such as cellphones and tablet devices.

The library environment faces certain challenges in displaying mobile information primarily because we control so little of it. Libraries are increasingly dependent on database and library software vendors for providing mobile software solutions and mobile access to prepackaged content. However, homegrown, third-party solutions and custom code can go far to manipulate the display into a mobile friendly environment, as was our experience at the Burritt Library. One key consideration is understanding that all of a library’s website simply cannot, and should not, go into a mobile website. Emphasis should be on the content of most use to offsite users, such as library hours, the online public catalog, research guides and directional aids.

Mobile Site Development at Burritt Library
If you have experience building websites, it’s actually not that hard to create a mobile version of a website. You can develop a mobile website from scratch using HTML and CSS with some extra knowledge specific to mobile, such as viewport, CSS media queries and mobile usability. Creating a more interactive version of a mobile website that more closely resembles a web application – for example, one that provides transition between pages – requires more complex coding involving JavaScript, CCS3 and AJAX. This more complex coding can be daunting for an average webmaster.

The initial decision to create a mobile-friendly website was based on a review of current trends in how users access library content both within Burritt Library and on the web as a whole. Michael Ricci [2] summarized his reaction to the importance of a recent Forrester Report encouraging mobile development [3] as follows:

  • First, because it highlights the fact that consumer adoption of mobile and advances in carrier network technology are driving explosive growth in mobile browsing, app downloads and consumption of new rich media content as well.
  • Secondly, it highlights the increasing sophistication of smartphones and tablets and advances in device usability & functionality that are taking place and explains how this is driving increased enterprise usage.
  • And finally, because it underscores the fact that measurement of this channel is either token at best or absent altogether with most brand practitioners and this is odd given the increasing importance of digital eCRM programs.

One might think that the third point does not really apply to libraries, but as we increasingly move into an era of brand awareness it is important to realize that our websites are often the only part of the library many users see, and it is vital that we use this as an opportunity to build loyalty to the library.

What made our mobile project possible was having an intern who was willing to take it on and devote considerable time to it. The library provided very few resources other than a supportive environment and access to the server. The rest was based on skill. The other advantage we had was a fairly small core group that made most of the decisions. Nothing ruins a website quite as much as a large committee. Having a core group that shared an understanding of what was needed in a mobile website and not having to seek permission made for a very successful project.

One approach to building mobile websites is the framework approach. Software frameworks are collections of tools that let the user accomplish tasks more easily. They often work by providing a library – a list of often-used commands that can be included instead of writing the code from scratch. The main advantage of this approach, besides saving time, is reliability and repeatability of the code. This code is also usually vetted so that security risks are minimized. Like other web development tools, there are many options available to help make the development process more efficient, such as the jQuery library for JavaScript that helps make working with JavaScript a lot easier. In mobile development, currently there are many mobile frameworks. The following are of particular interest and freely available:

We chose to go with the jQuery Mobile approach since using a framework allows us to create an interactive mobile site. The framework also provides default sets of user interface elements that are also a good starting point to ensure the usability of the mobile website.

You can get your mobile website up and running in just a few hours using frameworks. The basic concepts of using these frameworks are very similar. First, you need to include the code in the <head> section of your HTML file. Secondly, parts of the mobile page must be defined such as top menu bar, content and footer, in different <div>s in the HTML file. By using a framework, you can create a simple, static mobile website with frequently used information about the library in less than 80 lines of code. For an example, the code available at jQueryMobile Documentation (http://jquerymobile.com/demos/1.0b1) or at jQuery Mobile Tutorial (www.codeforest.net/jquery-mobile-tutorial-basics) will create a static but decent looking mobile website with basic and frequently used information without extensive coding (Figure 1). 

Figure 1
Figure 1
. Basic library mobile website using a mobile framework (jQueryMobile).

Mobile Site Content
From the start, as we mentioned, it must be acknowledged that the library’s mobile site simply cannot contain all of the information found in the regular site. Therefore, it should contain only crucial, frequently referenced information for users on mobile devices. The most concrete way to find out the most frequently used information in your website is to use analytic data. Google Analytics is a free and very powerful service that works very well for this purpose. We learned from our analytic data, which follows the same pattern as other libraries, that users are looking at basic information such as hours and contacts most frequently. For example, users are searching about hours of the library specifically in search engines: the second top incoming keyword is “CCSU library hours” (5.06%), while the first is “CCSU library” (44.29%).

Professional mobile websites are systematically designed with a complete separation of content and presentation. It is functionally possible to create a mobile version of a page for an entire website by creating unique mobile-optimized style sheets for all existing web content. For an average library website, however, this effort would be too complicated and cumbersome, and it is not necessary. A mobile version of the website is just as easily created as a separate version of the primary website and placed into a sub-directory on the web server (for example, www.mylibrary.edu/mobile). Users accessing the site on mobile devices can then be redirected to the mobile site automatically. Since the mobile version does not represent the whole content of your website, you should always provide another link that allows users to access the full version of the website.

Having a mobile version of the library website as a separate entity creates the problem of having to maintain information in two places. On the Burritt Library mobile website, we have information about contacts and hours. Contact information does not change that often; however, hours of the library can be quite dynamic. Instead of changing the information in two places, we do a data fetch from the regular website. In our case, we use jQuery to populate the data.

When designing the mobile website, keep in mind that you can link to other existing services that have a mobile-friendly interface. Many library catalogs come with mobile interfaces or have them available for purchase. At Burritt, we use Mobilecat (http://code.google.com/p/mobilecat/), an open source project developed by Tri-City College in Pennsylvania, which allows us to create a mobile version of our online catalog. Other services suitable for a mobile library website include chat reference – for example, library h3lp (http://libraryh3lp.blogspot.com/2010/01/improved-mobile-widget.html) – and research guides, such as Lib Guides (http://help.springshare.com/content.php?pid=149687&sid=1271358).

The final product of CCSU’s Burritt Library mobile website (http://library.ccsu.edu/m) consists of three main menu options. First the “Library Info” list provides users with the hours of the library, contacts, directions and news. The second or “Find” list allows users to search the library catalog from within the mobile interface. It also allows users to search database articles by directing them to the mobile version of Academic Search Premiere. The last list is the “Help with Research” list, where users are directed to live instant messaging with a reference librarian. Libraryh3lp provides a very nice mobile widget at the site mentioned above that you can include into mobile website by using the <iframe> tag. Users can access research guides via a mobile version of LibGuides. The mobile version of the CCSU Burritt Library website can be accessed at http://library.ccsu.edu/m (Figure 2).

Figure 2
Figure 2
. Homepage of CCSU library mobile website

Mobile Applications
Since the introduction of Apple's App Store in 2008, one year after the introduction of the first iPhone, the term app has become a popular buzzword. Many businesses have created apps specifically for their organizations, and this trend is not limited to business. Many large public and academic libraries have also developed their own apps. The Apple App Store is a huge success; currently it has more than 500,000 apps available with 10 billion apps downloaded. But do libraries need to have an app?

There are pros and cons to having an app versus a mobile website. Technically, you can develop a mobile website accessible via a smartphone web browser that has almost the same functionalities as an application downloaded from the App Store. Mobile websites are easier to develop across platforms, since every smartphone that has a modern mobile web browser will be able to access the same website. Essentially, you code once and it works for multiple platforms. It’s also easier to update and maintain since you control content and design. Finally, you don’t have to wait a lengthy period of time for an approval process to publish or update an app.

That said, there are benefits of having an application in a centralized distribution platform like Apple’s App Store, or Android’s App Market. Firstly, it helps increase discoverability and has a coolness factor to it. Library users will likely be excited when you tell them that they can now download the library app from App Store, compared to just accessing the library website with your smartphone. Secondly, applications have access to native device functionalities such as cameras and sensors or the accelerometer. These functionalities could be especially useful if you wanted to develop a more complex application.

From Site to App
At CCSU, our first intention was not to develop a library app, but once we started with the mobile site the possibility became appealing. The easiest way to get an application into the App Store is to create a native application out of the mobile website you’ve already built. You will need someone with basic programming skills. The first step is to create a native application with a WebView object that displays your website or web application.

The WebView object is basically an in-app web browser. The users cannot select which websites they want to visit. The URL of the web page is assigned in the code. It displays the exact same thing that your mobile device would display if you were using the dedicated mobile web, however, when users download and start the application they’ll be under the impression that it’s a native app not a web app. With relatively few lines of code, you can also create a native application based on your existing mobile website and then distribute it over an AppStore/Market. See the Android Developer Documentation at (http://developer.android.com/resources/tutorials/views/hello-webview.html) or an Android SDK tutorial at http://mobile.tutsplus.com/tutorials/android/android-sdk-embed-a-webview-with-the-webkit-engine/.

Burritt Library’s Mobile App
At Burritt, we were fortunate to have graduate students from our computer science program who volunteered to do their capstone project developing a mobile application for the library. We decided to develop for the Android platform first since our developers are more familiar with the programming language used to develop Android applications. Android has also enjoyed an astonishing growth in market share, and many predict that it will become the most dominant mobile platform [4].

When designing the app, we decided to expand on the basic functionality of the mobile website and add more features. If we had not decided to add more features, we could have created an application with two tabs: one for the mobile website and the other for the mobile catalog. Instead, we included features such as an interactive map function and QR code scanner. The interactive map allows users to see the library floor plan and interact with each location on the floor. Another map-related function is a book locator (inspired by Wayne State University Library [5]). When users search items in the library catalog they can use the book locator function, which will display the approximate location of items in the stacks (Figures 3 and 4).

Figure 3
Figure 3. Burritt Library Android application

Figure 4
Figure 4. 'Map It!' books locator function

The QR code scanner allows patrons to scan and read content embedded in the QR codes via the library’s app. Our immediate goal was to increase patron awareness of QR codes. In the long term, we plan to use more QR codes in the library and having the QR code scanner built into the library application will add convenience for users.

Testing
Testing mobile applications provides an interesting challenge because the library often doesn’t own the devices being tested. Just as a website must be viewed on a wide variety of browsers to assure compatibility, so will a mobile application need to be viewed on a wide variety of devices. The Burritt Library’s application was developed for the Android platform, making it usable on a wide range of smartphones as well as tablets. We tested the mobile website itself by using a combination of virtual emulators and borrowed devices. The use of a borrowed B&N Nook device allowed testing of an e-reader/tablet format. The mobile website coding held up well due to its simplicity and standards compliance. Usability testing of the mobile website and mobile application was much like usability testing for any website. The tricky part was finding individuals with mobile devices that could download the app and were willing to participate. After sending out an email call we received a good mix of students and faculty. Subjects were recorded being asked to perform a variety of tasks, from downloading the application and installing it, to looking up an item in the catalog and finding the hours the library was open. There was much positive feedback, and this kind of testing was vital as it helped us refine the application, work out bugs and most importantly gave us insight into our users’ expectations.

Conclusion
The promise of mobile applications in the library is quite large. Interactions with other technologies such as QR codes, RFID or GPS are just starting to be explored. Most libraries would benefit from understanding and pursuing the technologies available as users increasingly interact with library resources using mobile devices. There is still much variety in the landscape, including differences in hardware and in the way apps are approved in stores. A baseline of commonality is starting to develop in these devices and with maturity comes standardization. Now is a good time to build an app and get to know the standards that will undoubtedly continue to play a vital role in the years to come. 

Resources Mentioned in the Article

[1] Hanson, C. (March 2011). Libraries and mobile services [Special issue]. Library Technology Reports, 47(2). Brief abstract and online purchase available at www.alatechsource.org/taxonomy/term/106/libraries-and-the-mobile-web

[2] Ricci, M. (May 13, 2011). Mobile measurement and thoughts on recent Forrester report. Webtrends Blog. Retrieved August 21, 2011, from http://blogs.webtrends.com/blog/2011/05/13/mobile-measurement-and-thoughts-on-recent-forrester-report.

[3] Stanhope, J. (April 13, 2011). Mobile measurement is a customer intelligence imperative: Analytics drive mobile website and application maturity. Forrester Research. Brief executive summary and order information available at www.forrester.com/rb/Research/mobile_measurement_is_customer_
intelligence_imperative/q/id/58450/t/2
.

[4] Hamblen, M. (December 3, 2010). Android fastest growing smartphone OS in U.S., survey finds. Computerworld. Retrieved August 21, 2011, from www.computerworld.com/s/article/9199499/Android_fastest_growing_
smartphone_OS_in_U.S._survey_finds
.

[5] Gallagher, P. (June 22, 2010). Map it @ WSU: Development of a library mapping system for large academic libraries. Code{4}lib journal, 10. Retrieved August 21, 2011, from http://journal.code4lib.org/articles/3072.


Edward Iglesias is systems librarian at the Elihu Burritt Library, Central Connecticut State University. He can be reached at edward.iglesias<at>ccsu.edu

Wittawat Meesangnil is a university assistant at the Elihu Burritt Library, Central Connecticut State University. He can be reached at meesangnilwit<at>mail.ccsu.edu