Our rewrite of farbenmeer.de

farbenmeer underwent a major rebranding in 2021 including a full rewrite of our website. We took this as a chance to evaluate possible options for a headless CMS. We ended up using DatoCMS because it ticked all of our boxes and even offered features we did not know we needed yet.

GraphQL-API

For external APIs we love to use GraphQL and the GraphQL-Codegen ecosystem to access information in a type safe and compile-time validated way. At our previous CMS vendor we experienced a choice between a REST-API that did not offer this benefit and a subpar GraphQL-API that did not offer all the options of the REST-API and felt glued on top.

With DatoCMS the GraphQL-API is a first class feature. It is well designed and we love working with it. This enabled fast iterations and trust in the validity of our API models.

Field Validation

DatoCMS offers extensive options for field validation. After years of battling code errors because fields we expected were not included in our data as well as other issues such as low accessibility scores caused by missing alt text, we were more than happy about DatoCMS' field validation options.

Image optimization

By transparently forwarding image optimization to imgix, DatoCMS provides first class image optimization features. Even though Next.js provides built in image optimization as well, there are two imgix features that have turned out particularly nice-to-have.

The DatoCMS API includes blurred image placeholder data by default which makes it easy to render the placeholders. This helped with keeping farbenmeer.de subjectively fast even though the site includes various very large images.

Another feature we love is image cropping with focal points. On our about us page we have a list with all farbenmeer team members. When starting out we noticed that the faces in this list did not align well and thought, we'd have to manually crop all the images to fit the framing. Instead we discovered that DatoCMS made it extremely easy for us to set a focal point for each image in their UI and automatically crop the image when pulled from the API with respect to that focal point.

Next.js integration

DatoCMS provides first class Next.js integration. For example their toNextMetadata API makes it easy to correctly define and serve SEO-relevant meta information.

Video optimization

Besides image optimization, DatoCMS also provides video optimization through mux. Having this integrated nicely made it possible for us to add video, even though we just needed it for a single blog post, without making any compromises on quality. Even though it is just a single video on the whole page we are serving it as a fancy stream with adjustable bitrate and what not and the implementation was zero extra effort.

Content organization

Our website is structured in pages and blocks. Each page (home, expertise, about-us, ...) or page type (blog post, project, person, ...) has its own content model so there is no one-size-fits-all modular page. Blocks are reusable groups of content that are shown on more than one page.

DatoCMS flexible tree structure made it easy to organize content in a way where this distinction becomes clear and it turned out that we were successful in enabling non-technical staff to add and update content on their own.