Webster Hall Timeline

‘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.

The core of the WebsterHallHistory.com is the jQuery Masonry plugin, created by Dave DeSandro, which is normally used to create an โ€œuneven gridโ€ where elements of varying heights are aligned to form columns with uneven rows. The most well-known usage of this layout is Pinterest and its many clones, but we did some things to set it apart from this common style. Each node is connected to the central timeline, giving visitors a linear path to follow down the page. We used Skrollr for the parallax images that float above the timeline. The page uses Waypoints to change the colors in each section as you scroll, along with custom Javascript to reveal each imageโ€™s caption and details as small, shaded boxes over each image, as opposed to a fullscreen lightbox. We were honored to find the page featured on DeSandroโ€™s own masonry page as an example of one of the most unique uses of his plugin.

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.
Categories Informational
Landing Page Hot Tips Ebook
Strengthen your Landing Pages with 100 Hot Tips, audiobook and interactive launch checklists ๐Ÿ”ฅ
Email Inspiration? Introducing Email Love ๐Ÿš€