Webflow to Kirby CMS

We’ve now reached a significant milestone with the project: the logo, typography, and colour palette are all in place. This means we’re ready to move into the content, design, and development stage of the website. Before jumping into visual design, we take a critical step: fleshing out the site’s structure and content in a simple text editor.

Whether it’s a cloud-based solution or an offline tool, we prefer to start with a straightforward collaborative tool. In this case, we used Proton Docs. The benefits are clear: it’s private, end-to-end encrypted, and allows our clients to join the document, make suggestions, or directly tweak content. This gives us a central way to collaborate and have a source of truth going forward.

At this stage, we focus on mapping out the possible pages and creating a basic site map. More importantly, we outline what content will go on each page. What’s great about this process is that it keeps both the client and us focused purely on the message and the effectiveness of the language, without getting distracted by design of elements. The goal is to clearly communicate the essence of the brand.

Working collaboratively in this way is highly effective, especially since this project belongs to the client. It’s essential that the tone and language truly reflect her personality and brand. This is particularly important here, as it’s a personal brand using her actual name as the business. Using her language throughout ensures authenticity and helps the website feel genuinely hers, not a 'front'.

Once we had a solid draft in Proton Docs, I started building out these pages in Figma. Which allowed us to quickly visualize layouts and typography, creating a template we could adapt across multiple pages. Only if a specific page required unique styling did we create a custom design for it. This served as a reference for the next stage - building the actual website.

Given our agency’s previous workflow, our first instinct was to build the site in Webflow. We’d used it for many projects before, so version one of this website was created there. It was a smooth process, and we were able to implement all the base styling and layouts we’d prepared in Figma.

However, we soon noticed several issues that led us to reconsider our choice of platform.

There were a few key reasons for our decision to leave Webflow behind before the site went public:

To address these issues, we downloaded all the code from 'Webflow' and set up the site on our own server in the UK. Our VPS provider is Digital Ocean, which offers several advantages:

This approach not only gave us more control but also saved the client a considerable amount of money compared to hosting everything on Webflow.

One of Webflow’s main benefits is that clients can easily edit content. We wanted to keep this advantage, so we transitioned all content, titles, subtext, and images, to work through Kirby CMS. Kirby is a flat-file, lightweight CMS that’s extremely flexible. We customized it to fit our needs perfectly, and it’s now our go-to solution for all projects.

As a privacy-conscious company, we also decided to self-host our email service provider for the client’s mailing list. This gives us full control over where and how data is distributed. For this specific project, we used Sendy to create campaigns and set up drip sequences which has proved very effective so far, but we are exploring other options with other clients so haven't settled on one yet. For some of our clients, we are using Plunk, which is a very promising system and likely to become our standard platform going forward.

Moving away from Webflow was a big step, but it aligned perfectly with our principles and the client’s needs. We now have a more flexible, efficient, and private infrastructure that supports both current and future requirements. Every platform has its drawbacks, but for us, the benefits of self-hosting and using Kirby CMS far outweigh the convenience of all-in-one solutions like Webflow, especially for projects as personal and unique as this one.