Under the bonnet of True
We created a media-rich, motion-oriented website for the UK’s leading brand-focused investment and consulting firm. Designed to live, breathe and grow alongside True’s stellar portfolio, the site showcases the beautiful brand work of Friendly Giants.
The task
We were tasked with the redesign and redevelopment of the user interface of the client’s website and also to migrate the client’s website CMS (content management system) from a coupled or monolith architecture (WordPress) to a more reliable and maintainable solution.
Our solution
Technology choices have a big impact on being able to develop high-performing, scalable, and successful websites and applications. Asides speed and performance of the website, we were looking for a content management solution that will be seamless and won’t be difficult for the client to work with. After extensive research, we opted for the Jamstack + Headless CMS approach as our goto solution. Here’s a quick breakdown of the chosen approach and how it fits into our objectives.
What is Jamstack? First coined by the Netlify’s co-founder and CEO Matt Biilmann, Jamstack is a cutting-edge approach to website development. The “Jam” in Jamstack is derived from three components: Javascript, API and Markup. With its core principles of pre-rendering and decoupling, this approach enables developers to deliver more secure, fast, performant and seo-friendly websites. It also allows developers to build fully dynamic websites while getting the advantages of static websites as files and assets are pre-generated/pre-built, deployed and served from a CDN (Content Delivery Network). Any other dynamic part of the website is handled using client side javascript usually using serverless functions.
Developers make use of static site generators to quickly build a Jamstack’s application frontend. According to Cloudflare
In order to achieve pre-rendering, we use static site generators to create static assets that can be served from a web server or better still from a CDN. There are numerous static site generators available for use today. Some of popular names include : Gatsby, Jekyll, Hugo, Eleventy and Next.js. We chose to go with Next.js to build this project. Next.js is a framework built on top of the React library. The advantages of using this framework are numerous, both for our clients’ websites and applications and for our development team. Some of its features include Static Site Generation (SSG), Incremental Static Regeneration (ISR), file-based routing, automatic code splitting and hot module replacement (HMR). This framework also has a large developer ecosystem and lots of plugins that can be easily integrated. Overall it offers an improved development process for developers and better performance and improved SEO for client websites and applications.
Unlike traditional CMS (WordPress, Drupal) that bakes frontend, backend and database into one container making it tightly coupled, a headless CMS is entirely decoupled from the presentation layer or frontend of your website or application. The term “headless” stems from the decoupling of the “head” (the front end) and the body (the back end). Content stored in a headless CMS is usually delivered through APIs for seamless display across different devices. This type of content management system allows for a “content-first” approach where you can focus solely on structuring, creating and managing content without worrying about how or where it is presented. Headless CMS usually have a low learning curve and are very easy for clients to get a grasp of the working processes. Some other benefits of headless CMS can be found here.
After extensive research and exploring different headless CMS options, we chose Storyblok as our preferred headless CMS. Storyblok offers all of the features and benefits of a headless CMS and more. It also supports a wide range of technologies (Next.js included). One of the features that influenced our decision is the visual editor which allows content editors to view changes made in real time.
In Summary, we choose the Jamstack + Headless CMS approach because:
- It’s easier to build fast, performant and secure websites that scale
- With modern tools and frameworks, you can have a better developer experience.
- Easily deploy in minutes with platforms like Netlify and Vercel (authors of Nextjs and our preferred platform).
- You can access content in a variety of ways including Rest and Graphql.
Curious? Get in touch
If there’s anything we can do for you, or you can do for us, or even if you’re just curious, we’d love to hear from you.
