Making the Evergreen catalogue mobile-friendly via responsive CSS

Posted on Mon 22 April 2013 in Libraries

Back in November the Evergreen community was discussing the desire for a mobile catalogue, and expressed a strong opinion that the right way forward would be to teach the current catalogue to be mobile-friendly by applying principles of responsive design. In fact, I stated:

Almost all of this can be achieved via CSS, possibly with some changes to the underlying HTML (e.g. tables to divs or whatever so that "Place Hold" appears under the bib info instead of way over to the right).

I have this bad habit of talking more than doing. So when I saw the Beanstalk mobile catalogue resurrected again at the Evergreen 2013 lightning talks, it bugged me that I still hadn't put any effort into a proof of concept of what was possible with CSS media queries. Thus, today, on the last day of my holidays, I spent a few hours trying things out on our development server and came up with this *rough* branch to work towards making the exact same HTML that we serve up for desktops provide an experience similar to that of the Beanstalk generation of catalogues for mobile, just via CSS.

As you can see from the commits, I made one change to the HTML to define a viewport, and added one set of CSS rules wrapped in a media query; in essence:

...<head>...<meta content="initial-scale=1.0,width=device-width" name="viewport"><style>@media only screen and (max-width: 600px) {    #header {        padding: 0px;        margin: 0px;    }    .facet_sidebar {        display: none;    }    ...}</style><head>...

Results and trade-offs

Here are a few example URLs from our test server (which is slow, and might get wiped any day, so test them quickly if you have a mobile device around!):

Search results - sacrificed facets, per-item actions, and the language picker
Record details - sacrificed per-item actions, flattened the item table vertically

In general, I removed a lot of the frippery from the header, while trying to retain the most valuable pieces. However, some bits are broken: Another Search doesn't actually let you do another search because the search bar is totally hidden. Other bits haven't been touched (Advanced search is still overwhelming, and My Account, while functional, could be much prettier.

What I've done so far is oriented towards our 2.3-ish lightly customized Laurentian skin (we force full details in search results, for example) but the principles should be applicable to an out-of-the-box Evergreen catalogue. In working through some of the challenges, I've determined that I was pretty much on target back in November; with a few HTML tweaks that would improve the layout for desktops as well, we could keep the per-item actions and facets around, but just move them to a different location.

Less talk, more action

So who's with me? What we have to gain is a single set of HTML to support for TPAC, and a single set of CSS, all available from the same URL, rather than trying to maintain overlays and monkeying about with mobile-vs-desktop URLs and the like. Feel free to dig in and start pushing branches with improvements over my rough attempts and let's make this thing happen for Evergreen 2.5.

With thanks to Firefox...

I would be remiss if I did not mention the marvellous Responsive Design View introduced in Firefox 15, along with the Style Editor; together, these tools (built into Firefox) made my developing and testing work so much easier.

If you want to live on the cutting edge of Firefox, you want Aurora - go and get it