On November 17th we released a major version upgrade to the Nou website with tons of new features:
New events schedule page
The events schedule page is our second most visited site and we wanted to make sure you can find all the info you need there quickly. Instead of the classic weekly schedule for three weeks in advance, you can use our custom date range picker to select just about any day or period you want to see classes and other events for within the next three months. If you have ever struggled with a date range picker on booking site, you know how hard it is to get these right. We hope you will use ours with easy. It even comes with range highlighting, so you can always see what you are about to select. On mobile, we revert to two standard date inputs for better usability. The new events table now includes all the info you need to see immediately.
Compact single views as slide-outs
Want to learn more about a class, workshop, or dance event? You can now quickly pull out details for any listed event and don’t need to navigate to an extra site anymore. The slide-outs are much more compact and than the previous single views with their multiple dropdowns for event details. If you like an event, you share it with the button at the bottom.
Even though event slide-outs are fully integrated with the browser history API — which means you can use the back/forward browser buttons — we still keep the traditional single views as permalinks too. You can link to them with the button at the bottom of every slide-out. The single views are the permanent version of all our events. They don’t disappear even when the event is over. Custom routing redirects you to a permalink version, if you use the slide-out link after an event has expired.
New navigation
The new navigation comes with quick action links for our most-wanted pages and a full menu that slides out in a (for lack of a better description) “coming together” animation that has also received lovely feedback from people who seem to enjoy it. Our slide-outs use the same motion.
Faceted filtering for the video library
While the events schedule uses date ranges to filter events, our video library for learning tango at home now comes with drilldown filters that update after every choice. This means you will never see a “sorry, no videos in these categories” message anymore. Under the hood is a new custom filtering system that works for all filter setups on the page. Check the page sources to see how it works. We currently still use isotope as engine but are planning to release our own updated version of it soon. Isotope is one of the best pieces of legacy software out there but we would like an ES6 pure vanilla version with built-in filter updating and uses css grid too.
Optimised for accessibility
We took an accessibility-first approach towards designing the new features and updating the pages. The new body font improves readability — we have already received positive feedback for this from a student with Usher syndrome! All relevant images and videos now have captions and even the webgl gallery images on the booking page can be focussed and navigated to like normal images. All dropouts and slideouts can be accessed by keyboard navigation. Last but not least, the site has a universal escape handler that closes whatever is open on whatever page in the order you opened it when you use the escape key.
Our new date range picker is based on two native date inputs for start and end dates. You cannot navigate the actual range picker by keyboard since that would be a bit involved when using a screenreader. But when you change the input values, the picker reflects your choices.
The booking page features a webgl image gallery that is tied to HTML elements. Try focussing an image — it works! (Of course, the page takes bit of hit performance-wise on load if you need to track the scrolled html elements instead of just moving some planes in webgl. If we had not done this, however, the gallery would be completely invisible to screenreader users and unreachable for keyboard users.
User-friendly front page
Our home page is now geared towards dance newbies and beginners addressing their questions, thoughts, and wishes. We hope this page encourages you to take your tango first steps!
A little bit of fun with webgl
Check out our two landing pages for dance classes and booking 🙂
What didn’t quite make it this time
We also updated the custom cursor, throttled it to 30fps, and made it much more performant. But that feature someone slipped out of the release. Maybe the time for custom cursors is over? If you miss the quirky little red dot, let us know 🙂