Hammer Museum

The Hammer Museum is a vibrant intellectual and creative nexus located in Los Angeles. The Hammer Museum’s mission—"to illuminate our lives and build a more just world"—resonated strongly with Cast Iron’s values, and we were thrilled when Hammer’s design agency, One Long House, came to us in 2014 to take on the development of a complete site redesign. The end result of the collaboration was a beautiful, responsive site that has received praise from the design community.

Wide shot of white and gray-striped Hammer Museum with sykscrapers behind it.

Beautiful, Responsive Design

One Long House, an interactive design agency with which we frequently partner on projects, oversaw a mobile-first design process that led to the creation of dozens of design comps showing the site at various breakpoints. Cast Iron’s frontend team implemented the design using Sass, HTML5, and Javascript. The deep frontend build-out involved setting up breakpoints and creating a flexible grid that could degrade gracefully on all common devices. Because visual media is such an important part of the site, our developers created interfaces in the CMS backend that allow content editors to determine the focal point of every image displayed on the site. We developed corresponding image handling mechanisms that use server-side rendering to produce low-resolution variants of each, which speeds up the browsing experience on relatively low speed mobile networks.

Smartphone, tablet, and desktop computer lined up with Hammer Museum website showing on their screens.

Managing Content with TYPO3

Hammer chose to go with TYPO3 as its content management system on the new site. Before the redesign, content editors were very limited in terms of how they could structure content. Each main record type—programs, exhibitions, collections, artists—contained a fixed number of fields that could contain data. In building out the site in TYPO3, Cast Iron took an approach that treated each record type as a stand-alone page in the CMS, which means that content editors can mix and match the various kinds of available content elements for each record type. With the mix-and-match content flexibility provided by TYPO3, editors can now easily build out new types of pages as Hammer’s content management needs evolve.

Integrated Rich Media

One of TYPO3’s advantages is its file abstraction layer (FAL). Where many content management systems assume that all media will be stored locally, TYPO3 understands that content editors need to be able to integrate content from many different respositories. Hammer, for example, frequently shoots video of its public programs and makes those videos available on Vimeo. Rather than requiring editors to look for embed codes on Vimeo, Cast Iron implementd a Vimeo FAL driver in TYPO3. When a content editor wants to embed a video on a page, all of Hammer’s vimeo channels are available and can be browsed directly in the TYPO3 backend. Smart integrations like this save valuable time for content editors.

Hammer website navigation menu with close-up photograph of sound mixing board.

Enough Content to Fill a Museum

Hammer’s existing site had been run on top of a proprietary, custom content management system created by a large L.A. digital agency. Their site had been running on this platform for close to fifteen years, and making simple changes to the site had become, for all practical purposes, impossible. The design was outdated, and the agency was no longer responsive. Moreover, they had amassed over five thousand pages of content and as much video, audio, and visual media over the past decade. Always up for a challenge, Cast Iron dove into their legacy CMS and built out content migration mechanisms that exported existing content into the new CMS. In the end, relatively little manual work was required to translate the content into the new design. Users of the site can browse fifteen years worth of content on any device.

Faceted Search with Solr

Effective search is extremely important on a site of this size. We utilized Solr/Lucene to index all of the content on the site. Search results are faceted, which allows users to see what type of content is being returned in the results. Our development team wrote custom indexers that include image, audio, and video content from the site’s file abstraction layer. This means that users of the site can also search the museum’s external content, such as it’s Vimeo channels, in one place on the Hammer website.

Hammer Museum website search results page.

More to Come

Thanks to the recently awarded $500,000 grant from the Andrew W. Mellon Foundation, in the coming months the Hammer Museum will expand its digital offerings and provide multiple points of access for its online audience from first-time museum visitors to researching scholars. We’re excited to see what the museum comes up with, and looking forward to continued collaborations with the Hammer team!

Hammer Museum