Headers, menus and feeds - A quick update

As you may have noticed from our last blog post “People Looking at Art at SFO (1982 - 2019)” we are in the thick of processing the back catalog of installation photos for all the exhibitions SFO Museum has done since 1980. I am already thinking about a second “People Taking Pictures of Art at SFO” blog post but in the meantime we’ve made a couple additions and few changes, improvements hopefully, to the Mills Field website itself.

First, we’ve created a dedicated web page for recently processed images. By default we sort images by the date they were taken, in descending order, to more closely reflect the state of the airport and the museum “today”. That can make it hard to see images that have been newly processed since most of these photos were taken years ago. Now it’s possible to browse those images in the order that they’ve been added to the Mills Field website.

We also added syndication feeds in both the Atom and RSS formats for recently digitized images.

We are processing images in batches so it’s not unusual for there to be a couple hundred new images to look at all at once. Rather than publishing a syndication feed with too many (all the new images) or too few (only the last 15 images) things we split the difference.

Each time the feed is requested we pull the 200 most recent images and return 25 of them randomly. Assuming your feed reader is filtering out things you’ve already seen this should allow for a steady, but manageable, stream of updates.

Another change we’ve made is an update to the header and navigation elements on the Mills Field website. Specifically we have begun using the handy HTML details element for most navigation items. The documentation on the Mozilla Developers Network site says that:

The HTML Details Element creates a disclosure widget in which information is visible only when the widget is toggled into an “open” state. A summary or label can be provided using the summary element.

A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. If the first child of the details element is a summary, the contents of the summary element are used as the label for the disclosure widget.

I am not sure when the details element was first introduced but I didn’t become aware of it until I saw Mu-An Chiou’s presentation on how GitHub is using it so thanks, GitHub!

Using the details element has allowed us to “tighten up” the header which works better across a range of device sizes and is supported natively in modern web browsers, without the need for JavaScript to render collapsible menus on tiny mobile screens.

We’ve also moved image titles and metadata below the images themselves. This change was coupled with another update to use HTML picture element now that we produce multiple thumbnails for every image. We can list each thumbnail inside the picture element and more accurately tell the browser which image size to fetch relative to a device’s screen size.

All of which gets a little closer to simple and elegant pages for images where image itself is (almost) always “above the fold”, meaning you don’t have to scroll down the page to see the whole image.

On tiny screens this sometimes means the browser will choose the smallest available image, particularly for images of a certain aspect ratio. As a consequence it can be difficult to see the details in some images so we’ve included links to all the different sizes “below the fold” and we’ll add the ability to zoom in to images soon enough.

Finally the random image button is still there in the header but has been replaced by the 🔀 symbol in the top right-hand corner.

Ultimately, this may not be the best way to signal things the ability to see random images on the Mills Field website, at least not for new visitors. For now though it acts as a place-holder for the kind of functionality we want (a discrete, easy and consistent way to find something new in the collection) and help us understand how that needs to work relative to everything else on the site.