Our brief was to build a simple online directory for The Trade and Public Policy Network.
The TaPP Network aims to connect academic researchers with civil servants, parliamentary researchers, campaigners and journalists searching for expert input on UK trade policy.
We distilled the brief into 3 headline requirements…
- Users need to be able to quickly and easily find executive summaries and contact details for the most relevant, trusted experts in specific areas of policy.
- The network is expected to grow steadily with the potential for more content and services to be developed over time.
- The product owners have full-time academic roles and have limited resource for managing content.
These led us towards creating a bespoke Single Page App (SPA) solution driven by headless Wagtail. Here’s what we did…
A zippy frontend
The frontend of the site is built using fast, lightweight framework called Vue.js. Not only is it quick to load and responsive to user selections, it provides amazing potential for scalability as the network grows and more content and services are added over time.
This approach gives it an app-like feel, with smooth page transitions and live filtering for a sleek, modern touch.
What could have been a clunky, dull directory instead is a super slick web app providing a friction-free service across desktop, tablet and mobile devices, thanks to a few reactive animated flourishes. A bit of delight goes a long way.
Wagtail makes life easy for content editors
Everything about the way website content is organised and edited in Wagtail makes total sense so first time users tend to need very little training – if any. It’s the perfect for choice for pro and novice content editors or for teams who share editorial responsibilities. Features like moderation workflows and commenting tools make it perfect for collaboration. There’s loads more reasons why we believe Wagtail is the best CMS.
What is headless?
For the non-techies, headless simply means the website pages (frontend) are separated from the CMS (backend) – sometimes referred to as Decoupled Architecture. The two can exist on completely separate hosting infrastructure and talk to each other the way your CRM might talk to your email marketing platform – over an API.
Why go headless?
Typically, Wagtail websites work as a single, integrated application, so why separate them?
As the directory grows, so will the channels its content is published on. By separating content from presentation, we can allow it to be consumed on different channels. For a directory, this could be extremely powerful when it comes to scalability, integrations with other web services and for creating more slick, app-like user experiences.
Headless solutions can be great for:
- Ecommerce platforms
- Single Page Apps (SPAs)
- Immersive / interactive experiences
- A large database serving multiple consumers
- Managing intranet content
Our tech stack
Back to Wagtail…
Wagtail is built on Django which has an in-built API based on Django REST Framework. This means we can offer our client the amazing editing experience Wagtail offers AND have complete flexibility over the way content is presented; now and in the future.
Long term gains
While life expectancy of websites and web apps is getting longer, apps like this will inevitably need a makeover at some point. Who knows, it may even need a page-one rewrite. But the good news with a headless solution is you can replace the frontend any time you like, leaving the backend to carry on doing its thing.
Rob and his team have been great to work with and we are delighted with the result.
