Hunt Video Walls

Related Projects

• Listen to Wikipedia in the iPearl Immersion Theater
• Visualization Wall Digital Collections Explorer
• HTML Templates

Designing for the Walls

The projects I designed for the Hunt walls had the challenge of having to design it two very different modes. Creating complete interactive applications involved designing for two distinct device types. One piece needed to work on a huge wall and another would likely be used mostly on mobile devices. I found switching between working in these two design modes to be challenging at first. I was designing for very large displays, on my relatively small desktop monitors, and for mobile, on my relatively large desktop monitors. Responsive design and how desktop browsers respond when made narrow works well enough as a stand-in for a mobile device during development, but what about designing for a wall?

Luckily the same tools that help with responsive design testing are of help here as well. The Chrome screen emulation tools not only allow you to emulate a smaller device but also a much, much larger one. There is a checkbox to “shrink to fit” which allows for seeing a shrunk down version of what would go on the large display. This is particularly convenient as we currently deploy Web-based content to the Hunt walls within Chrome. I found the screen emulation good enough for doing most development for the walls, though once you finally see something up on the intended wall there are always tweaks that need to be made.

To help ease this for other content creators I’ve begun work on creating HTML templates for each of the Hunt Library video walls.