Skip to content
Log InSign up
;

How we build and publish content at Nutmeg

We hope you enjoy this article from our archives. As investment, pension and tax rules change a lot over time, the information in this post may not be current, but we hope you still find it interesting.

The Nutmeg team

2 July 2020|3 min

At Nutmeg we use a headless content management system to cut down on development time whenever we build or publish content. So for those of you interested in tech and coding, let’s take a brief look at the mechanics behind it all.

Because rules around money are oftentimes complex and always changing, when it comes to building and publishing content we need to be able to adapt – and quickly. Imagine our frustration then when, in the past, even small changes to Nutmeg webpages required a lot of development effort.

In order for us to make swift changes to the website and free up time for developers to work on other, more exciting projects, we decided to use a headless CMS (content management system).

What is a headless CMS?

Loosely speaking, a CMS is a software application used to manage the creation and modification of digital content. A headless CMS, instead of web page rendering, treats content as data over an API.

For our headless CMS we chose Prismic, which, as stated on their own homepage, “makes your webpage editable for the whole team”.

We decided to use Prismic for the following reasons:

  1. It’s easy to manage as it provides an ideal API for fetching content.
  2. It’s compatible with our Javascript library, React, and has a good integration with Gatsby.js
  3. It features a preview mode, meaning content editors can view changes before deploying
  4. It allows us to use the same content and content models across many applications/platforms
  5. It has release scheduling support
  6. It has a user-friendly UI (user interface)

How we build and publish content

To give you a sense of how this all works in practice, let’s look at the Nutmeg homepage.

Let’s first define a key term: ‘Slice’, an API response unit that we fit into a UI component. Each slice has a Repeatable and Non-Repeatable zone, the former being a model for unique content that is presented once only, the latter being one that can be reproduced several times.

This is how the hero slice looks on the homepage.

This is the same slice within Prismic.

This then generates an API response.

Many options to change look and feel

On this slice, the non-repeatable zone is represented by the banner, the text and the hero image. The repeatable zone is represented by the button inside the Hero image.

As you can see, we have many options available to us when changing the look and feel, for example, text alignment, imagery slots, heading sizes, etc. For each webpage we’ll use a number of slices, and in various combinations, to build the page. Below are just a few of the slices we use.

Since our CMS is headless we have no way of using the usual WYSIWYG systems. However, we believe this to be an advantage in that it gives us more flexibility in how content is displayed.

So how can a content editor be sure that what they’ve created is as intended before publishing? Well, Prismic includes a preview mode that automatically updates as and when our editors make changes.

And finally, when all is correct, we can publish.

What does this mean for Nutmeg?

Mechanics aside, the switch to Prismic has empowered our marketing team to take greater ownership of the content at Nutmeg. What’s more, our engineers can now spend time they otherwise would’ve spent tweaking webpages on new and exciting projects.

We’re always looking for new and novel ways to improve our systems and processes. Anyone with great ideas is welcome to bring them to our platform. And if you’re interested in joining us, you’ll find Nutmeg job vacancies on our careers page.

Risk warning

As with all investing, your capital is at risk. The value of your portfolio with Nutmeg can go down as well as up and you may get back less than you invest.