Julie Hardesty is the Metadata Analyst/Librarian at IUB Libraries. She is interested in many aspects of digital libraries, particularly those pertaining to making it easier to find and do things on the Internet. She is reachable at jlhardes at iu dot edu.
This blog post is based on a recent Digital Library Brown Bag presentation I gave, which is based on a poster I presented at the Digital Library Federation Fall Forum in 2012 in Denver, Colorado (and somewhere along the way, the old lady swallowed the fly and I don’t know why and… well, you get the idea). Back when all of this started I was a User Interface Design Specialist at Indiana University so don’t judge based on my current Metadata Analyst/Librarian job title – this post really does contain mobile design info. If you prefer to listen rather than read, you can review the Digital Library Brown Bag presentation recording (guaranteed to be less succinct and interspersed with a lot of “um”s and “where did my cursor go?”s).
There’s a lot of interest in how to deal with mobile and how much we should be considering mobile in our effort to provide online resources through the Indiana University Libraries. I don’t have all of the stats but I do have the following: we’ve seen a steady increase in mobile use over the last 2 years, at least, for the web site that provides access to the IU Libraries digital collections and services. The following charts reflect user agent strings that identified mobile devices (like iPhone, iPad, Samsung, Nokia) gathered from web server logs.
And it’s a definite increase when compared to overall use of that same site (please ignore the October-November 2011 blip – our server administrator was using a monitoring program from his desktop that spiked our usage stats on the site for those months).
There are 2 things I would like to point out here: 1) overall use of this site over the same 2-year time period was steady or even declined a little and 2) everyone went on vacation in August 2012, regardless of the device they were using – congratulations, you’re doing it right!
So we have mobile users and it’s worth it to consider what those users are experiencing when they arrive at our digital collections and, more importantly, what they need. And since this blog post is all about action, I’m just going to run with it and tell you what I did.
The technique I chose to apply was the single CSS media query. This technique causes devices up to a certain screen size to display our collection sites differently then everything else. I focused on handheld mobile phone-sized devices (iPhone size and smaller). The digital collections to which I applied mobile optimization worked well with tablet-sized screens already so I made the call to treat tablets and desktop browsers similarly and smaller handheld devices differently.
There are multiple techniques for providing a different mobile experience:
- Mobile application (think Angry Birds or Bejeweled) – mobile device-specific applications that are downloaded through an app store and are installed to run on your iPhone/Android/Windows phone/whatever.
Yes, this is me killing it at Bejeweled with a super-gem on Level 2. I’m that good.
- Mobile version of a web site – this involves creating a separate site with different programming (and a different URL) to provide a mobile user experience. Out in the world, examples include Best Buy’s mobile site and Amazon’s mobile site. Within IU, you can find examples such as IU Mobile and IUB Libraries Mobile. I do not guarantee that these examples will stay valid for very long as mobile delivery changes quite often, but for the most part you can notice these by a different URL (with m.domain or domain/mobile) and the fact that you can often view these mobile versions in a desktop browser.
You can see this same IUB Libraries Mobile site in your desktop browser.
- Responsive Design – What I consider the ultimate goal in mobile optimization, this technique takes a single site and uses CSS to change the design as the screen size changes (from full desktop browser to mid-size tablet to small-screen mobile phone). Many implementations of this technique allow you to see its effect just by changing the size of the browser window on your desktop browser: About.com is an oft-cited responsive design from “out there,” A List Apart provided an early example of how this can work to show text and images, and here at IU, the IU Communications department has implemented a responsive design for its site. Templates with a grid-style layout are available to help create this type of design.
IU Communications shown on a desktop browser and on a handheld mobile device.
- CSS Media Query – This technique could be thought of as the first step towards Responsive Design or a single view of a responsive-ly designed site. It involves checking for a certain device size and then applying a set of pre-defined styles or an additional external style sheet. This is the method I can really talk about since this is what I did.
The mechanics to apply a CSS media query are pretty easy, in HTML/CSS terms. The first necessary part is the <meta name=”viewport”> in the HTML header:
<meta name=”viewport” content=”width=320, initial-scale=1.0, user-scalable=yes”/>
Generally referred to as the viewport, it was something that Apple came up with for Mobile Safari to allow developers to control the size of the window being viewed (very simplified short story here, follow the viewport link for a great explanation from quirksmode.org). In the above example, the mobile browser sets the window to a width of 320px, initial scale is full size, and the window is zoom-able by the user. Most other mobile browsers have latched onto the viewport and it is now pretty much essential for mobile optimization. Non-mobile browsers (i.e., desktop browsers) ignore the viewport because they don’t know what to do with it, so it doesn’t cause any problems and can be included in the header of a site without any concerns.
The viewport is also the easiest piece to forget because it just needs to be there and there’s nothing else to be done with it. If you ever think you have everything in place and the mobile browser is still showing a screen that is way too zoomed out – 99% of the time you forgot the viewport.
The next necessary part is the actual media query and it can be included a couple of different ways – either in the call to an external style sheet or within the style definition itself. Here is a media query within the style definition:
@media only screen and (max-device-width: 480px) { }
This can be used inside the <style> element in the HTML of a page or it can be used for a section of styles within an external CSS file. Another way to accomplish this definition is to use the media attribute on a link to an external stylesheet:
<link type=”text/css” rel=”stylesheet” media=”only screen and (max-device-width: 480px)” href=”small_device.css” />
This only applies small_device.css in the event that the media attribute (the media query) is true. This particular media query is checking that the media type is screen (as opposed to print, braille, or other media types that can interpret HTML and CSS) and that the width of the device is no larger than 480px. Include this as your final CSS and it will effectively apply your mobile styles.
The combination of the above viewport and media query is to apply a particular set of styles to mobile devices up to a width of 480px. Setting the initial width to 320px fits well in the portrait mode of most iPhone, Android, and Windows mobile smartphone devices. Applying the mobile styles up to 480px then covers landscape mode. Beyond those two pieces of HTML/CSS are a series of design and usability decisions that can turn a site into a functional thing (like Pinocchio, only completely different).
My first round of mobile optimization happened for a set of digital collections of TEI-encoded texts: Victorian Women Writers Project (VWWP), Brevier Legislative Reports, and Indiana Authors and Their Books. Each of these sites is distinct, but all are based off of the same software (eXtensible Text Framework (XTF) from the California Digital Library) and all offer basically the same access (full text-encoded access with searching and browsing). We combined the development of these sites as much as possible in a move to create an electronic text service at the IU Libraries for encoded collections such as these, and the mobile optimization worked the same way. I figured out what worked for one collection site and then applied the same changes to the other two collection sites.
I also worked out mobile optimization using CSS media queries for Image Collections Online (ICO), an online exhibit site for library and archival image collections, and War of 1812 in the Collections of the Lilly Library, another online exhibit using Omeka to bring together various digital collections to accompany a physical exhibit of War of 1812 archival materials. These are both sites with image-based content as opposed to text-based content. Keep that in the back of your head for a sec.
Caption: Corelli, Marie. The Mighty Atom. London: Hutchinson and Co., 1896. Victorian Women Writers Project. Indiana University Libraries, Web. 15 March 2013. <http://purl.dlib.indiana.edu/iudl/vwwp/
VAB7104>
Caption: Brevier Legislative Reports. Vol. 5. Indianapolis, Ind.: W. H. Drapier, 1861. Brevier Legislative Reports Digitization Project. Indiana University Maurer School of Law Library and Indiana University Libraries, Web. 15 March 2013. <http://purl.dlib.indiana.edu/iudl/law/
brevier/VAA8558-05>
Caption: Stratton-Porter, Gene. A Girl of the Limberlost. New York: Doubleday, Page & Company, 1909. Indiana Authors and Their Books. Indiana University Libraries, Web. 15 March 2013. <http://purl.dlib.indiana.edu/iudl/
inauthors/VAA2373>
Caption: Image Collections Online, Indiana University Libraries, Web. 15 March 2013. <http://www.dlib.indiana.edu/collection/
images>
Caption: War of 1812 in the Collections of the Lilly Library. Indiana University Libraries, Web. 15 March 2013. <http://www.collections.libraries.iub.
edu/warof1812>
My first thought when considering mobile is, “What do people want to do on this site from a mobile device?” Mobile users aren’t in the same situation as someone sitting at a desk in front of a computer. They are holding the device in one hand and either using the other hand or – if they are more digitally dexterous – the same hand to select and scroll and type. These are skills that make creatures without opposable thumbs super-jealous, but it also means they have their hands full. And it’s not just with the device either. Mobile users on smartphones and smaller mobile devices are often on the move, possibly distracted, probably in a hurry. Or bored and standing in a line. Either way, they are not in a situation where they want to learn – they want to do. They aren’t interested in research, they want access and quick answers (or quick entertainment). This is supported by recent Pew Internet Research findings from December 2012 that report most mobile connections to libraries are to look for items, find basic information about the library, or renew, reserve, pay fines, and download e-books.
In terms of these digital collections, I think this translates to focusing on the content for mobile users, either the text or the images. In the case of the electronic text collections, I considered what I was doing as the equivalent of making an e-reader – providing the full-text display in an easy-to-read font size and with simplified searching and browsing. This meant no page images and making it easy to ignore things that are not the full-text (like the table of contents – I kept it there but it’s collapsible).
For ICO and War of 1812, my dream was to make them as easy to flip through as the photos on your phone. I didn’t have quite that kind of time to devote to mobile optimization, but I did make a choice in ICO to push the facets menu below the images that display on search result and browse pages. That keeps the images top and center on the mobile version of the site. I also lucked out that our preset thumbnail size for image derivatives just happens to be 200px wide – big enough to be nicely viewable in portrait mode but not too big for my layout goal (320-480px). My dream also didn’t take into account context, which is important for the War of 1812 site. The likeliest mobile use case for that site is when patrons are in the Lilly Library walking through the physical exhibit. A patron encounters an item on display among hundreds of, say, a map of New Jersey. Jumping on a mobile phone and visiting the War of 1812 web site, one can potentially find more information about that map from the narratives presented on the site and the digitized version of the map than from standing directly in front of the physical object.
Since the narrative and text of the exhibit site are just as important as the images and information provided with them, the navigation for the War of 1812 remained above the main content. Additionally, Omeka added some software wrinkles that I couldn’t iron out in time so the navigation menu does not collapse. It’s better than not having a mobile-optimized version of the site, but it didn’t quite come together like I wanted.
Other design decisions that were common across all of these sites were removing features that were too cumbersome to use on small devices: multi-field search forms (Advanced Search) and the Simile timeline that we added to both VWWP and War of 1812. Removing images can also improve performance over slower network connections, so home pages were simplified this way as much as possible.
So a single (somewhat determined) person with a good understanding of CSS can make mobile meaningful. But more is involved than just the technical details. Understanding what mobile users need from a site makes the difference between a mobile site designed for a device and a mobile site designed for a person.
Leave a Reply