When we partnered with Théâtre du Nouvel-Ontario as agency of record, we took the opportunity to overhaul their website. Aside from designing a new site that reflected the evolution of the brand, we spent a lot of time focused on improving UX. One aspect of improving UX was incorporating a JavaScript library known as Barba which uses pushState and Ajax (sometimes referred to as PJAX) to create a unique and smooth user experience.
What It Is
Barba is a small (4.4kb), flexible and dependency-free library that helps create fluid and smooth transitions between website pages. It helps reduce the delay in navigating between pages, minimizes content requests and enhances the overall user experience.
How It Works
Barba overwrites the default browser behaviour of links on a website. It allows all static resources like CSS Styles, Web Fonts, Images, and JavaScript to be loaded just once. When a user clicks a link, it grabs only the basic HTML structure and elements of the next page and swaps them into the current one, while also maintaining browser history.
It allows developers to control how content leaves and enters the browser window and, with some clever animation, elevates the brand and brings it to life online.
What if the user doesn’t have JavaScript enabled? No problem! The site will function as it normally would without Barba.
Benefits
Increase speed in page navigation
Since the browser only needs to grab static resources once, when a user clicks to another page, the browser doesn’t have to load everything all over again. This can shave seconds (a.k.a. years, in web terms) off of page load times.
Control how content enters and leaves the screen
As designers and developers, we love fun websites that feel good. They make us want to stick around longer. There are plenty of great examples of Barba powered websites here.
Only run JavaScript code when necessary
A lot of developers who start using Barba are accustomed to a plug and play experience, but with Barba, planning needs to happen to make best use of its features. This might not sound like a benefit, but it is! It allows developers to write better, more optimized code, that only runs when the website needs it to run. Developers can also create routes for the user and integrate different transitions to different areas of the site.
How We Applied It to TNO
The TNO website takes advantage of Barba as well as an animation library known as Anime. We created an SVG curtain drop transition between pages to keep it simple and tie it back to what they do.
Does Barba Work With WordPress?
Yes! TNO is a WordPress-powered website. Since WordPress already handles a lot of the routing and permalinks, Barba can be implemented quite easily, especially if it’s implemented in the early stages of a project.
One caveat to note is that JavaScript code that is pulled in through an Ajax call cannot be re-run. So, WordPress plugins can sometimes conflict with Barba, and some additional work may need to happen for them to work together. Luckily, this is a rare situation, so it’s simply good to know.
Overall, the benefits of Barba are impressive. The ways it can be integrated allow designers to design websites that feel more like applications, modernizing the way a user browses a site. With version 2 of the plugin in beta right now, we’re expecting it to become an even more common modern web development practice. Heck, even Marie Kondo’s new site uses it!