Skip to content
Menu

Building the new Mutual site

We've just launched our new site! Our aim was to make a site that was fast, accessible and clearly showcases everything we do at our agency.

Here are a few of the awesome tools and techniques we used to build it -

Craft CMS

Craft is our CMS of choice at Mutual. With the release of version 3.3 (including GraphQL and Headless Mode) it fits perfectly into our JAMstack setup for developing sites whilst still providing a great content authoring experience.

The native GraphQL tool makes it really easy to query our CMS to fetch only the data we need. For example, getting the title and introduction text for our homepage -

{
  entries(type: ["home"]) {
    title
    ... on home_home_Entry {
      introText
    }
  }
}

With the reveal of Craft Cloud and Craft 4 we're confident we'll be using Craft long-term to power our websites.

Gatsby

Gatsby is one of our favourite tools at Mutual and works wonderfully when using Craft CMS as a data source. It generates static files which can be deployed anywhere and has the power and flexibility to build any kind of site we need.

  • Awesome performance out of the box 📦💯
  • Pull data from anywhere 🔌
  • A great experience for developers and users 🎉

Based on React, we can use it to create componentised pages and templates which are stable, semantic and maintainable. Here's a snippet from our homepage template -

<Slab>
  <Container>
    <HeadingLink text="Serve people well" to="/serve-people-well" />
    <Copy markup={entry.servePeopleWellIntroduction} />
  </Container>
</Slab>
Google Audit of page performance, best practices, SEO and accessibility

Using Gatsby also means it's incredibly easy to turn the site into a PWA (Progressive Web App) and hit high performance and audit scores. The above image shows an audit of this page.

Theme UI

Theme UI is a great tool which helps to build themed web applications with ease. Colours, typography and layout styles are sourced from customisable scales and design tokens in a single theme file to help build a consistent UI.

Firstly we create our theme -

export default {
  colors: {
    text: "#000",
    background: "#fff",
    primary: "#0062ff",
    muted: "#E2E2E2",
    secondary: "#191919",
    accent: "#ffff00",
  },
  fonts: {
    body: "'Mutual','Helvetica Neue', Helvetica, Arial, sans-serif",
  },
  fontSizes: ["0.8em", "1em"]
}

…and we can then reference our theme values when creating components to style the UI -

export default props => (
  <h1
    sx={{
      fontSize: 1, // 1em
      fontFamily: 'body',
      color: 'text' // #000
    }}>
    Hello
  </h1>
)

Netlify

Netlify provides us with a platform to host the static files that are generated when we build our Gatsby site. By pushing new commits to our repository or saving an entry in Craft to trigger a webhook, Netlify will automatically build our site and deploy the updated files with the latest content. 🚀