One Page Love Logo
  • Need Hosting? We highly recommend Bluehost
  • Reviewed: June 7, 2015
  • Template? No, this is a custom built website
  • Built by: Nimble Division
Get your One Page website inspiration straight to your inbox!
Get One Page Website Inspiration straight to your inbox! Only the best, once a month: Subscribe Free
One Page Website Review

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 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 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
Rob Hope

This original One Page website was reviewed by Rob Hope

I founded One Page Love back in 2008. It's come a long way but I want to continuously add value to your experience. Please tweet or email me with any questions or suggestions.