MIT List Visual Arts Center

MIT's List Visual Arts Center is the contemporary art museum and visual art lab at the Massachusetts Institute of Technology in Cambridge. After completing a comprehensive rebrand of the List, we set out to bring that brand to life online. TOKY — the team behind the site's design and development — is a full-service branding and design consultancy with offices in St. Louis, Chicago, and Boston.

Why Drupal was chosen: 

We selected Drupal for several reasons, the first being that the List's original site was created in Drupal, and their staff was familiar with the structure. Drupal offered flexibility that allowed us to customize different modules, making it easier for them to make updates. We were also attracted to the flexibility of Drupal's entity system, which allowed us to present content in different ways across the site, whether lists, text, audio, or images.

Describe the project (goals, requirements and outcome): 

The goal of this project was to incorporate the new branding into a site that encourages visitors to explore the List's rotating selection of programming and exhibitions. With events and offerings constantly changing, another primary goal was to create a site that could be quickly and easily updated by staff members. We were also tasked with developing a device-agnostic Public Art Map to showcase pieces found around campus. While the original site already had a Public Art Map, it was built in Flash, which made it inaccessible via phone or tablet.

In terms of development, this project took between two and a half to three months to complete. We used agile project management, and had milestones every two weeks to review and test specific sections of the site.

This site has several noteworthy features. The Public Art Map helps visitors explore the dozens of pieces of art scattered throughout MIT's campus. The map not only pulls in basic information like medium, size, and credit, but also integrates with the Acoustiguide Audio Tour of the collection, so that visitors can tune into commentary from artists, architects, scholars, and curators. The redesigned Exhibition and Events pages offer a massive, interactive record of everything the List has ever done, making it a great resource for scholars, students, and casual art lovers.

For the Public Art Map, once our designers stylized and simplified each of four zoom levels, we sliced the background into tiles using MapTiler Pro by Klokan Technologies. We then used a custom module to pull all Individual Works with geographic coordinates (provided by the geolocation module), and output the resulting JSON data to populate the map. Using Leaflet.js and the Leaflet.markercluster plugin, we were able to display all of MIT's Public Art visually on the map and also in a slide-out list.

To keep visitors up-to-date with social conversation concerning the List, the footer of the site and the Connect page automatically pull the latest Twitter and Instragram content marked with the hashtag #mitlist. The public nature of this created a problem in the unfortunate event that someone would post something inappropriate or hateful with the linked hashtag. To solve this problem, we created a custom module that — after caching the recent Tweets and Instagrams — allows site administrators to disable the display of any individual Tweet or Instagram and immediately remove it from across the site.

In terms of project outcome, the site can now be managed more easily, making it more convenient to update and add upcoming events and exhibitions. The new site also integrates with Constant Contact, so that email signups are automatically added to their email database. This allows the staff to keep their marketing cycle moving without the hassle of manually uploading contacts.

Why these modules/theme/distribution were chosen: 

The theme we created for the List sits on top of a base theme we built to combine our favorite parts of the Zen, Zentropy, Boron, and the Boilerplate themes.

Advanced CSS/JS Aggregation (advagg): Along with the installation of Varnish, we also used the Advanced CSS/JS Aggregation module to further ensure we were creating the fastest front-end possible.

Automatic Nodetitles (auto_nodetitle): The Event Detail and Individual Work content types both have a title and a subtitle. We wanted to save these separately in the back-end, but also combine them to form the page title. Instead of having the page author type this information twice, we used the Automatic Nodetitles to automate this process.

Constant Contact (constant_contact): The List wanted to use Constant Contact for their CRM and this module allowed us to connect and submit sign-ups from the Join The MIT List Mailing List form we created.

Date (date): The Exhibitions, Events, Publications, and Press entries all have a specific date or year, and the date field was what we used to save this information. The date module functions also helped us create the iCal downloads used on the Event pages.

Entity reference (entityreference): The Entity reference module is used to connect Individual Works to their parent Collection, to associate featured Exhibitions on the Exhibition Landing page and Home page, to relate other Events on an Event Detail page, and also to relate Exhibitions on an Event Detail page.

Field collection (field_collection): The Field collection module is always a cornerstone of our Drupal development and was used for the Publications page for each individual publication, the Press page for each press entry, all of the slideshows, and many other portions of the site. The module allows us to choose if individual form entries should have their own edit page instead of a monolithic node edit form, or if a collection of fields should be associated together and output together. This allows the site authors to use the actual site front-end to find which field collection they want to edit and jump right there to edit.

Geolocation Field (geolocation): The Public Art Map was originally based on X/Y coordinates, and we made the switch to specific latitude and longitude to improve accuracy as visitors navigate the campus. This module had the nice form field widget we needed for that.

Google Site Search (gss): After major search engines had enough time to index the new site, we added our own search functionality through Google's Custom Search.

ImageAPI Optimize (or Image Optimize) (imageapi_optimize): On the back-end we wanted to further optimize every image uploaded to the site. Using the ImageAPI Optimize module we run PNGs through OptiPNG and JPEGs through JPEGTran for the smallest file size.

Media (media): The media module is the backbone for all media management throughout the site from the slideshows to media added through the TinyMCE WYSIYWGs.

MediaElement (mediaelement): Once we decided on MediaElement.js for our front-end solution, we selected the MediaElement module to ensure that all audio files would work on touch devices.

Remote stream wrapper (remote_stream_wrapper): One client requirement we had was that some of the site's audio files (mp3) would have to be hosted elsewhere and simply linked to from the List website. This module allowed exactly that functionality.

Sub-pathauto (Sub-path URL Aliases) (subpathauto): The Sub-pathauto module allowed us to create valid paths for iCal downloads for the Event + Programs nodes in the form of node/*/ics. Basically, if the path ends in /ics, the site will check if a date field is present for that particular node. If it is, then an iCal template file is used and a download is initiated.

Typogify (typogify): Typography is something we pay close attention to, and the Typogify module helps convert all of the pesky dumb quotes to smart ones.

Organizations involved: 
Project team: 

Eric Thoelke, Executive Creative Director 
Jay David, Interactive Creative Director
Melissa Allen, Senior Web Producer 
Daniel Korte, Developer
Robert Paige, Designer

Team members: 
Connect page
Public Art Map
Exhibition Detail page


skatheeth’s picture


I was going through the site and no doubt its made with excellence. However I just found out that we when we enter an anonymous word in the search bar, the site redirects to an empty page as if it shows up a white screen of death. And if I search for a word that exists in the site, it gives you a proper result.

The purpose of this comment is not to hurt someone, but just to inform about it, so that if its a mistake then it can be rectified or else, if it was under your requirement, then its my mistake :)


Daniel Korte’s picture

Hi Shraddha — Thanks! We're glad you like it. We do too! I wasn't able to reproduce your issue, but we'll try to keep an eye out for it. Appreciate the comment — Daniel

diomede’s picture

very nice website; but just a question:
are you running Varnish, Memcache and/or APC as cache modules?

Daniel Korte’s picture

Varnish is running but we are not using any of the Drupal contributed modules like Varnish, Memcache, or APC.

diomede’s picture

Thanks Daniel for the reply.