A behind the scenes look at developing flexible Craft CMS page builders for Measure Meant

Measure Meant is a U.S. based consultancy firm that guides brands through the process of climate action planning. Founded out of a desire to build a positive legacy for generations to come, the Measure Meant team works tirelessly to lead and champion organizations of all stripes to become socially and environmentally responsible agents of change.

In web development, empowering clients with intuitive and flexible tools for content creation is paramount.

That’s why at Foster Commerce, we choose to build with Craft CMS. Craft CMS is both flexible and powerful when it comes to giving site administrators a good authoring experience.

But if developers don’t consider content modeling well, Craft builds can also pose problems for authors.

Websites that aren’t developed with authors in mind can have rigid structures that create an ongoing reliance on developers, or scattered content builders that don’t ultimately serve marketers' needs.

Recently, Measure Meant came to us facing these very issues.

Frustrated by their website’s rigid page builders and content structure which resulted in a poor authoring experience, Measure Meant embarked on a project to improve the experience and asked Foster Commerce to make it happen.

In this tech drop, I will delve into the journey we took to transform the Measure Meant website’s previously rigid data models into fluid and adaptable page builders that empower content creation.

Today, I’m happy to say that the Measure Meant team’s ability to manage their content has been unblocked with fluid page builders in place.

However, when they first came to us, Measure Meant team members grappled with disparate "content builder" fields scattered across different sections of their website. This limited their ability to seamlessly integrate diverse content types into cohesive pages.

Ultimately, being blocked in this way meant the team couldn’t implement changes to the website that they wanted to make as part of a recent brand refresh.

As the lead developer for this project, my job was to empower the authoring experience and make it more intuitive and enjoyable. To do this, I led the development of a unified solution that consolidated once fragmented builder fields into a single, versatile content builder.

In addition, we helped the team gain control over creating their own hierarchical structured pages and URLs — freeing them from a dependence on developers in the future.

Central to the transformation of Measure Meant’s authoring experience was creating a main content builder field. In direct contrast to the disconnected builder fields the website initially had, the main content builder field we developed now serves as the nucleus of the website's content creation process.

By amalgamating various builder fields into this centralized hub, we were able to unlock a host of new content options for the Measure Meant team. Now, they can effortlessly mix and match content block types in craft in as many engaging and dynamic pages as they need.

After creating the main content builder field, we needed to restructure the Twig template partials (used on the other page builder fields) so they would work correctly with the new builder field and output correctly on the front end of the site.

This harmonization ensured seamless integration between the new content builder field and the website's front end, delivering a cohesive and immersive user experience. Restructuring and reorganizing the partials will also make it easier for developers to work on them in the future.

A key challenge in enhancing flexibility was accommodating diverse content layouts without compromising design integrity. To address this, we introduced a suite of features, including a "Content Width" field and a "Width" field for content blocks.

The “Content Width” field sets the overall width of the page's content, while the “Width” field provides control for each content block. This allows authors to override the overall width on specific blocks if necessary.

These granular controls empower Measure Meant team members to tailor content layouts to suit their unique design preferences, fostering creativity and expression.

To transition from the existing “one-column” design to multi-column layouts, we leveraged the power of Neo and introduced a new entry type featuring predefined rows of content and customizable column options.

With multi-column layouts, Measure Meant’s authors can now easily craft sophisticated layouts with ease, transcending the constraints of traditional one-dimensional design paradigms.

For example, team members can now include multiple columns of content and content blocks within these columns, as well as set some styles for the column containers like a “color theme” or the amount of padding they should have.

Empowering the Measure Meant team to shape their digital narratives without reliance on developers was central to the project's success.

Originally, Measure Meant’s Craft setup had different sections for the site's various pages. This prevented them from creating hierarchical structured pages and URLs themselves and made them reliant on outside help.

We changed that by creating a new “Pages” structure section that included the new main content builder field, allowing them to build pages however they like.

Introducing hierarchically structured pages through the new "Pages" structure section has empowered the Measure Meant team to take ownership of their website's architecture, fostering autonomy and agility.

At Foster Commerce, we routinely prioritize the authoring experience in our Craft CMS development. We strongly believe that this is key to a successful build.

Measure Meant’s journey to enhance page builder flexibility underscores the transformative power of user-centric design and collaborative problem-solving. By structuring data models thoughtfully and prioritizing client usability, developers can create intuitive solutions that empower clients to manage their content effectively.

While this project presented various technical challenges, such as repurposing existing content block Twig partials, our team found immense satisfaction in overcoming these hurdles. The opportunity to refine the data model and provide a more logical and flexible page-building solution was enriching.

When we as developers prioritize flexibility and usability, we empower businesses to realize their digital ambitions, encouraging their creativity, autonomy, and growth. This larger vision is what drives the passion I and my colleagues at Foster Commerce bring to client projects.

If you’d like to learn more about how we consider entry types and their usefulness for clients, I encourage you to watch our CEO’s 2021 Dot All talk on the topic.