‘Webster Hall Timeline’ is a One Pager presenting the history of the popular Webster Hall venue in NYC. Not totally feeling the drop shadows and gradient colors but there is a lot more to this site when you dive deeper. Imagery really influences design and you can image how difficult it was to work with 130 years of vintage photos and posters. Cheers for the incredibly detailed build notes, good to know what went behind the planning and building.
“If these walls could talk...”
Webster Hall is a landmarked venue located in the heart of the East Village in New York City that has hosted many historic events. Opening its doors to the public in 1886, the space has been in continuous operation for nearly 130 years and has successfully adapted to significant cultural trends while remaining true to its core mission. Webster Hall provides a communal, judgement-free space for the oddballs, the “lower” classes and other outcasts to gather and/or celebrate.
Nimble Division has enjoyed a long-standing relationship with the landmark’s current proprietors and wanted to share the building’s incredible history in relation to the city to which it calls home. We felt that the context of cultural and historic events that occurred in and around the space itself needed to be shared with modern patrons.
To do so, our creative team planned, designed and developed a one-page, interactive timeline that guides a visitor through many of Webster’s defining moments.
Creating WebsterHallHistory.com did not come without its difficulties. The biggest challenge was making the page’s two-column layout responsive so that the many visitors of the site who use their tablets and phones could enjoy the experience. As a popular event space, it should come as no surprise that a majority of traffic comes from non-desktop sources. At mobile-width, every node in the timeline is stacked on top of the next in a single column. However, on larger screens, the nodes have to move between the left and right side of the timeline depending on how to boxes fit into the masonry grid. This means that the lines connecting each image of the timeline need to adjust which side they’re on based on the current layout. To clear this hurdle, the code goes through each node on the timeline and determines whether the left edge of it is to the left or right of the center line. Then, it simply adds a class to each node that moves the marker.
The second issue involved image loading. In order for the Masonry plugin to properly lay out the images, it needs to know what size they are. Due to the fact that the page is responsive and that the images scale up and down, it is impossible to know their size until they are loaded. We found a work-around by using AJAX to load the content and only add it to the page for final layout once the images were ready. Each section of the site is loaded sequentially, allowing you to see the earliest decades as soon as possible while the later decades load below the fold.
Initially the page used the jQuery Transit plugin to animate each of the colored pieces to the appropriate color on scroll. As we added more elements to the page, this method proved to be too slow and would lock up the page for 1-2 seconds each time we hit a waypoint. We resolved this by simply adding a CSS class to the body of the page that changes on scroll, and using that class to determine the color of all the elements.
In the end, our timeline succeeded at bringing Webster Hall’s historic past to life, proving that age is simply a number.