How to escape the web project choice dilemma (and save time and money)

The problem with websites, though, is that they haven’t kept up with the pace of the world they need to work in. Especially when it comes to production speed. Website builders like Squarespace or Webflow tried to fix this by providing off-the-shelf templates for one to get simple pages up and running in no time. But those lack the qualities of a real digital product. While a site built using one of the builder tools often is a fire-and-forget project, in order to get long-term engagement from your customers, you’ll need an individual, custom-built website. To craft one of these unique and individual experiences, companies rely on the services of a professional digital agency.

But when hiring an agency, a lot of people get involved. And they have all the right to be — there is someone managing your account and project, a team of designers drafting the experience, followed by a team of engineers actually implementing it. All of those people inevitably need to make a lot of choices along the way. Let’s explore some of the choices those teams face, focusing on the engineering department.

Which way to go?

The initial decision web developers face when kicking off a new project, is the most basic one: Are they going to use a content management system (CMS) — a system that builds each page on request — or are they using a static-site generator that builds all available pages of a website to static, portable HTML once? Both solutions come with pros and cons.

Using a CMS, for example, provides the possibility to easily extend the system with custom business logic, if needed, further down the road. But for an early-stage landing page, using one is often overkill as it also involves custom infrastructure needs and ongoing maintenance which adds to the cost. 

Static-site generators, on the other hand, have a huge performance advantage. As all pages are directly available for serving, there is no computing time between the actual request and response. This absence of computing time also allows you to forget about scaling issues. And to top it all off: Netlify, AWS S3, Azure Blob or Google Cloud Storage — it really doesn’t matter. Nothing is more portable than a static site.

There is a way to have the best of both worlds, though. Using a headless CMS like Contentful with its versatile content types — reusable pieces of structured content — provides an easy editing interface for your content that can then be easily consumed by static-site generators, with all the benefits!

Though the next choice gleams at the horizon: Which one to choose of the dozens available? For our team at Jung von Matt TECH, the Go-based generator Hugo stood the test of time. Not only does it bring a lot of core features like internationalization, taxonomy, an asset pipeline, and incredibly fast build times, it also pairs perfectly with Contentful!

How to translate your Contentful content types to something that Hugo understands, though? That’s your choice.

Escape the choice dilemma

We’re here for the rescue. We at Jung von Matt TECH have been pairing Contentful and Hugo so often in the last few months that we combined all our knowledge into one cohesive product. Let us introduce the Web Enterprise Kit (WEKit). The only static-site builder kit for Contentful you’ll ever need.

1. Keeping things DRY

The majority of web projects consist of the same set of components: a stage, a headline, some images, and cards linking to other pages. Setting those components up, creating the needed HTML template, a CSS file for styling, and the content type can be tedious in Contentful, a repetitive task for each and every project. Nevertheless, it needs to be executed by an experienced developer to make sure things are in the right place, a solid foundation for other developers to build upon.

With WEKit, setting up a project is a matter of minutes — even for an entry-level engineer! Create an empty Contentful space, run a simple command and all basic content types will be ready for your editors to fill, your frontend developers to customize.

2. Enabling agile workflows

With the groundwork laid out, nothing keeps your development team from implementing the things that make your web project really unique. No discussions around naming or the structure of your building blocks, they are already there.

But they are not just there, they are usable from the get go. WEKit not only combines Hugo and Contentful, it also offers built-in support for Storybook. Your design and quality assurance teams are able to test and tweak all content types in an atomic, reproducible way, without the need to set up any test content or pages.

3. Continuously delivered

To constantly review and improve what is being built, you need to make the evolving product widely available. You would not want your designers hanging over your frontend engineer’s shoulder, especially in these times.

That’s why WEKit comes with first-class support for Netlify. Deploying your project and sharing it with your colleagues and clients is just a shell command away. That saves you from setting up and maintaining a preview environment.

4. Best practices built in

When focusing on the things that are unique to your web project, forgetting the basics can happen quickly, though they are crucial.

For example, having a quick First Contentful Paint (FCP) and Largest Contentful Paint (LCP) and a short Time to Interactive (TTI) is vital for a good ranking in Google Search. These three parameters influence your Lighthouse Score (combination of six parameters). The Lighthouse Score is a very good indicator for the speed and, therefore, user experience of your website. 

Lighthouse is a lab measurement standardized by Google, not to be confused with Web Vitals which are determined from real user data from Chrome (CrUX). 

Adding additional meta information, like a sharing image, a meta description, and schema.org details is important for a professional impression on social media. Providing alternative text for images is proof of good manners and is key for accessibility.

Get started now

But all those words can’t explain how this breath of fresh air to your web development workflow really feels. So off to exploring WEKit on your own! For a comprehensive overview of all the features, we invite you to have a look at the product tour over at wekit.dev.

You want to get started right away? Then you’ll find all needed instructions in the WEKit repository over at GitHub.

Or are you looking for a partner to help you build your own product on this rock-solid foundation? We’re at your service at info@jvm.tech.