Category Archives: Mobile

The Art of Food

For months I’ve had nothing to really post about. First I was project-less and mostly bored to tears, and who wants to write about that, much less read about it? Then I was TOTALLY SWAMPED and there was no extra time (or energy) left at the end of the day to type something up.

But last week we launched the two big projects that have been filling all of my hours, and I’m extremely proud of both. One was #GettyInspired, which I’ll share more about in another post. The other is the Art of Food Mobile Tour, a web-based hunt designed specifically to complement The Edible Monument exhibition at the Getty Research Institute, and the manuscript exhibition Eat, Drink, & Be Merry at the Getty Museum, both of which opened on October 13th.

The Art of Food Mobile Tour
The Art of Food Mobile Tour

As a scavenger hunt (with prizes!), the content really only makes sense when you’re physically in the galleries, so it has no social media sharing features, and we have yet to figure out how to amend it to make the content evergreen after the exhibitions close in 2016. But I still like sharing it because it was so much fun to build, and its interactivity makes me giddy, remembering all the trials and frustrations I went through to make it work so well.

screencap-voilaOur team–Liz McDermott and Alicia Houtrouw from the GRI; Laura Hubber, Karen Voss, and Cathy Bell from the Museum; and me, from the Web Team–spent about ten months meeting and planning the content for this “tour”, but for my part, I spent about two months building and debugging it. Even though it was specifically built to be used only on mobile devices, and therefore didn’t need to be responsive, I still chose Foundation 5 as its base, so I could use Foundation’s pre-built classes and its sliding menu module.

My favorite function of the site is how it tracks every.single.thing you click on, and adjusts accordingly. Thanks to jQuery’s super-easy management of localStorage and the gazillion and a half unique IDs throughout the site that are tracked at all times, the site knows when you’ve finished each object and each character, and when you’ve finished all the characters for each exhibition, and it remembers until you reset the game. (The reset link is only on the winner pages.) Probably the hardest part of the build–and certainly the most frustrating–was making the custom jQuery, the animatedCollapse plugin, the auto-scrolling functions and the timers all play well together. It was a rare day when fixing one thing didn’t break something else.

screencap-em-charactersBut it all came together beautifully, and in plenty of time for the launch date. I learned a LOT about jQuery’s syntax and methods during this project, and I had fun doing it, which is really the best kind of project.

(Cranach Comparison tool would’ve been sooooo much easier with jQuery, 10+ years ago.)

Featured Works from WWI Exhibition

It’s finally here! We have officially launched the mobile-optimized highlights “tour” for the new World War I exhibition opening next week!

Featured Works of WWI Exhibition at the Getty Research Institute (a.k.a. the one I’ve been slaving on)
World War I: War of Images, Images of War (a.k.a. the official exhibition website, which I did not work on but which my awesome colleagues built)

Screencap from Featured Works of the WWI Exhibition
Screencap from Featured Works of the WWI Exhibition
I have learned so much on this project, about Foundation 5 and responsive design, and about customizing sharing options for the most popular social media communities. I was lucky to work with great people from the GRI, and with a beautiful design from one of our talented Museum designers, and I’m so glad we finished it on schedule. I’m still sad we had to lose some of the features from the earliest iterations of the project, but the skills I’ve learned on our little mobile tour means that next time I can spend time on building more complex interfaces.

Congrats to my team Liz, Alicia, and Cathy, and to the early architects, Annelisa and Molly! We all rock!

Browser chrome on mobile devices

Today I’ve been trying to solve the problem of the header and footer chrome on mobile browsers. Our project designer came up with a beautiful grid homepage for the small mobile website we’ve been working on, but the chrome definitely detracts from it.

So far I have tried the code here and here. They looked promising, but neither worked as indicated, i.e. the page would move down, but the chrome wouldn’t disappear–at least, not on my 4S.

At the moment I am stuck. Building an amazing fullscreen mobile experience seems to indicate that it’s a bad idea to hijack a user’s browser anyway–API is where it’s at. Unfortunately I don’t think this app provides enough content to make it worth anyone’s while to save it to their desktop. So right now, looks like I’m going back to the designer to give her the bad news.

I’m still looking for a way around it, though. I don’t believe anything is impossible, it’s just not yet known to me.