Monday, January 10, 2011

Olin Library's Mobile Ready Website

Over the last few weeks, Paul Gindlesperger has been building a mobile ready website for us. As readers of this blog know, I think smartphones will play a significant role in the future of access to the digital library, so I am delighted that we can now provide access to our services and information resources for our users from these devices. The big issue for us now is to make sure the vendors we work with are also making their resources "mobile-friendly." This is a work in progress. Frankly, most of the databases and publishers have not made enough progress on this yet as you will see if you try and do any searching and reading of documents on the site. While I am at ALA Midwinter in San Diego, I will talk to vendors about this issue.

In the meantime, in a continuing series of posts from guest authors I have asked Paul to describe the process of developing the site and some of the issues he faced:


The mobile site is intended to provide the most useful content from the main Olin website that you would want to use when you’re not in front of a computer. We tried to make it easy for you to quickly pull out your phone and look for a book, consult with a librarian, see how late we’re open, and perform several other functions. The mobile site loads quickly from any phone and doesn’t require you to zoom in and out or scroll to get to what you need. Imagine how convenient it would be to hear a professor or classmate mention a good book for your research, pull out your phone, check to see if we have the book at Olin, and place a hold or even order it via Interlibrary Loan – all within a couple of minutes. With the increase in online resources, it is becoming less necessary to come to the library to get what you want since we provide so much content to our patrons remotely…this is just another step in that direction.

The first step in the design process was looking at other libraries that already had mobile sites. Jonathan had already investigated and gave me a few to look at, including Smith College, Skidmore, St. Benedict, Bucknell, and NC State. Each of these sites has its merits and drawbacks, but I found the designs of Smith and Skidmore were the most in line with what I wanted to do with our site. Webmasters from these schools graciously offered to assist me if I ran into any problems or had questions; one of the great things about working in the library community is the ubiquitous helpfulness and sense of camaraderie in this profession.

I knew from the start that I was going to design the site based on these principles:
1. The site needed to be as elegantly simple as possible, both in terms of aesthetic design and in the code on the back end. It should load quickly and not overwhelm the user with too many extraneous options.
2. The design should be viewable on nearly any device, in portrait and landscape view. Since phones are very different and users could have their settings configured in ways I can’t anticipate, this was the hardest principle to enforce.
3. There should be an option to go to the full site.

The core of the site is basic HTML – the same language that comprises most regular websites, and a little bit of simple Javascript to make the menu options work. What truly makes the site mobile friendly, however, is CSS – cascading style sheets. The style sheet is the secret to getting the site to display properly on phone screens. I wrote the code the old-fashioned way – writing it from scratch in Notepad. That was the way I originally taught myself to make web pages, so it was kind of fun returning to my roots and doing things low-tech.

I was a little worried at first; I had only taken one day long CSS class over two years ago and hadn’t done anything with it since, but I was now being called upon to write original code from scratch. I wasn’t about to back down from the challenge, though.

My biggest problem in creating the mobile site was a frustrating one….I don’t actually own a smartphone. It has been my experience that people who design things for something they don’t have or use tend to create broken designs, even when they put in a lot of hard work and have the best intentions. The lack of a smartphone also made testing my designs difficult. Luckily I had colleagues with Droids, iPhones, and a Blackberry, but I had to balance my need to preview the site with my desire to not bother them too much to borrow their phones.

Other issues were code-based and would have been funny if they weren’t so annoying. At one point, the header kept disappearing and not coming back when someone switched to landscape mode. The zoom factor would also randomly change on an iPhone for no apparent reason. After a lot of experimentation, I was able to fix these problems.

In the future, I’d like to see the other departments at Rollins create mobile sites of their own. Until then, it’s fun being the first on campus to offer this service to our students, faculty, and staff.

If there are any questions or comments about the mobile site, I can be reached at pgindlesperger@rollins.edu .

2 comments:

Kathryn said...

Thanks for mentioning Skidmore's site!

"The lack of a smartphone also made testing my designs difficult."

You can get around this by using a browser-based mobile emulator. Try TestIphone (http://www.testiphone.com) or the Mobi emulator (http://mtld.mobi/emulator.php).

Kathryn (Systems Librarian at Skidmore)

Paul G. said...

Kathryn,

I had a handful of emulators, but I found that they often didn't exactly duplicate the phone itself. Also, since you're using a mouse and keyboard, it's harder to duplicate the trackpoint/touchscreen/slide-out keyboard experience that users will have on the site with their phones.
So emulators are useful, but should be taken with a grain of salt.