The goal: Ease of use, customization and flexibility

When 15 Finches, our startup-focused creative studio, started building a marketing website for our startup partner, Rapidly, its team asked for the ability to easily make large-scale changes to the new website. Rapidly, a quickly growing startup, provides full-service virtual tax and accounting software. Its team requested to have the ability to update copy and images, rearrange sections of the website and create new pages without designers or developers.

We knew our solution had to balance ease-of-use and flexibility without giving an inch on design in order to maintain the brand style guide we had developed for Rapidly. It would be a bit misleading to say an exact binary exists between ease-of-use and flexibility — a robust solution can be tailored to provide flexibility where necessary and enough structure to make updating content simple.

The content platform Contentful works like a headless content management system (CMS) and integrates with industry-leading tools. Its user interface lets editors make significant changes after the site is built, and its structured content makes omnichannel delivery a snap.

What is a headless CMS?

A headless content management system (headless CMS) is an online repository for storing and organizing all of a website’s content (text, images, etc.). The “headless” part means that the repository doesn’t define how the content actually looks or behaves on the website. Additional code generates web-page elements from the data stored in the headless CMS. This separation of content and implementation means content editors only have to worry about one thing — the actual content of the website — while the designers handle the website design and the developers handle the coding, optimization and browser compatibility.

We used Contentful for this particular Rapidly website in addition to more than 25 other projects. In Contentful, from a developer’s perspective, you organize your content into customizable “content types,” which act as the building blocks of your website. For example, let’s say you want a section of your website to display a heading and a few of your customers’ logos. You might create a content type named “Logo Section” that has a text field for the heading and a media field for the logos. Once the content type is defined, you can use it as a template to create as many Logo Sections as you’d like.

The developers’ code then pulls in the data from all these sections and generates them on the website, styling the text to match the website design, placing the logos into different numbers of columns depending on screen size and even animating the section when a user scrolls to it. The possibilities for customization are endless and are sometimes quite complicated on the development side, but from a content-editing and client perspective, everything just works.

Building with flexible components

With Contentful, a website is composed of content types — a type for every section on the website: a video section, a quote section, a pricing section, etc. Imagine that you could drag and drop to reorder these sections, flip the content left and right, add in new sections, toggle through different background colors/gradients/patterns, and create entirely new pages with a few clicks. In addition to the power of the simplicity of this setup, imagine always knowing that no matter how you arranged them or populated their content, the pages and sections would come out the other side looking just how the designers intended: on-brand with an emphasis on user experience, SEO and web design best practices.

This was exactly our approach for Rapidly. Our design team defined a specific set of user-interface section types that would act as a kit of parts, which enabled the downstream benefits of our flexible CMS setup. Once each section’s code was completed and integrated with our CMS, we were able to quickly enter the site’s content. In under two hours, we had the populated, fully functional website ready to launch. Making edits is just as easy.

Integrating other tools with Contentful

While Contentful provides many built-in fields for defining content types (see the text field and media field from our Logo Section example), sometimes the field you’re looking for doesn’t exist.

For example, Contentful doesn’t provide a built-in field for editing tabular data, which we required for one of Rapidly’s sections. There were some ways to get around this using the pre-existing field types, but the results were a bit clunky and confusing to edit. Thankfully, Contentful offers a way to modify their interface with a UI extension.

Using this extension framework, we developed a table-editing interface that relies on an underlying JSON field. (JSON is a standardized format for storing structured data.) Our extension provides a straightforward way of editing tables: rows can be edited, added, deleted, or reordered by clicking and dragging. Adapting the content-editing interface in this way helped to maintain an effortless editing experience consistent with the rest of the CMS.

Creating a product to build customized websites

Of course, not every project requires this level of flexibility. For those that do, this system of design and development has many benefits. Our approach maintains useful boundaries between content editors and web developers, ensuring consistent website layout and performance without sacrificing adaptability.

It’s possible to use this approach with just about every project because of its flexibility and ease of use. We’re beginning to offer this website and development process as a kit of tools that integrate with Contentful. This product offers rapid client-side website building and management with design and development best practices, fully integrated headless CMS, optimized SEO and customization tools that ensure high-quality final website output.

15 Finches partners with inspiring startups that solve important problems. We’re a creative studio with a rich history of executing high-quality branding, marketing campaigns, web design, web development, UI/UX and product strategy for B2B and B2C startups.

Interested in working with us? Let’s build something awesome together.

Want to get early access to our professional website builder? Just send us an email!