6. Choosing your solution: static website or CMS

Not all designing assignments will give you the option to choose what technology to build from. If you are not affected by these technical questions, you might want to go directly to the next chapter, Designing and developing. However, many designers also act as web developers when a client's budget requires it. The most obvious choice would then be to turn to a platform like WordPress but we will see that, for the purpose of an eco-design approach, this might not be the best option.

Whether it is best to choose a static website or a CMS (content management system) is still widely debated. The decision should come down to the context and the people involved in the project. Here, we will offer some lines of inquiry that may help in choosing the optimal solution based on your specific situation and what is practical for you.

Fundamentals of a static website

Static site generators are tools that can generate each HTML page of a website individually. Therefore, in line with W3C (World Wide Web Consortium) recommendations, the page structure and layout are fully distinct from the content. Whenever a modification happens the site is generated once again, thus updating the already existing static files.

Static websites offer a number of advantages:

• Content is saved apart from layout, which allows for more editorial control.
• Because the content is static, it is no longer necessary to employ dynamic programming languages, or even databases.
• Since pages are no longer loaded and rendered on the server with every query, a clear performance boost can be expected.

All of this significantly reduces the environmental impact of the website.

Examples of static site generators (SSGs):

• Eleventy (11ty)
• Jekyll
• Hugo
• NextJS
• Nuxt

Take into consideration: It is difficult to predict what technologies these generators will rely on in a few years. This could actually engender technical debt. Besides, though a static site can be recommended, the generator itself could be oversized compared to your needs. Choosing the right one is therefore something to consider carefully.

Fundamentals of CMS

CMS stands for Content Management System. As the name suggests, it is a program for building websites, often very accessible (no need to be a developer). It also makes it easy for multiple users to add content, still without much technical knowledge. For instance, CMS can be set up so that different levels of editing access could be assigned to the administrators, they can also be used to structure pages based on the type of content (article, FAQ, etc.).

Examples of CMS:

• Wordpress, by far the most well-known, 80% of websites use it as a CMS
• Kirby, used on this website
• Translucide (French)
• Grav
• Osuny

Some CMS and their proposed themes offer a lot of features included by default and which can make your website unnecessarily bloated. It is not unlike crossing a river with a container ship: it might require a lot of resources, it is oversized and not necessarily more practical.

On the other hand, resorting to CMS and themes that are better adapted to your needs may use up as little resources as a static website. Below you will find some advice on how to minimize the impact from the solution you end up choosing.

For instance, Translucide is based on eco-design solutions. It relies only on the essential, with as few features as is necessary. Unlike WordPress, from which many layers have to be removed, Translucide starts off with very few and uses standardized and open-source technologies as much as possible (mainly HTML, CSS, PHP). Adding any feature is therefore something that happens only after careful consideration from the collective.

Choosing between a static website and a CMS

Choosing between a static website and a CMS influences the overall design of the pages since it affects what features (available plugins, etc.) and layout (proposed templates or not, rich text editing, etc.) you will be steered towards.

The choice you end up making will depend on the way in which you update your website and how often you add to it.

Questions to be answered:

• Who will create the digital service?
• Who will maintain it?
• How often does the content need to be updated?
• Which part(s) need to be updated?
• For what ecosystem is the service built? What are the limitations involved?
• How long will my service be running for? When will it end?

If the service requires little to no updating, a static website from a SSG could be viable as a solution.

Static websites might seem complicated to edit content for, especially for people who are not well-versed in working with them. If the content needs to be edited on a regular basis by untrained people, a CMS solution could be more relevant. In that case, there are two options:

• a WYSIWYG-style rich text editor ("What You See Is What You Get"). The publisher can format their text in a way that is identical to the online page. Choosing a WYSIWYG editor gives you some visual freedom, but potentially less eco-design elements. Example: WordPress.
• a document markup language, like Markdown. The publisher can only change the text and the hierarchy of information (titles, subtitles, paragraphs, etc.). In a CMS without a WYSIWYG editor the content is often formatted in Markdown files. Example: KirbyUsing a markup language allows you to have both the resource efficiency of a static website and ease of access of a CMS when updating. Contributors can add content directly from a simplified WYSIWYG editor (see below). When the content is saved, the website is automatically generated/updated.

When using a CMS, a best practice to implement is to use HTTP caching (reverse proxy) in order to turn the dynamic pages of a CMS into static ones.

Implementing eco-design with WordPress

WordPress is the most widely used CMS in the world today. There are many reasons for this. It is: easy to use, open source, supported by a large community, and equipped with a great number of plugins and themes.

Being mindful of default themes

WordPress provides several default themes during setup. Though they may be simplistic, they provide a good foundation to develop a personalized theme. However, some of these themes can be excessively heavy. It is important to choose from the lightest available themes, such as Neve, Astra or GeneratePress. There are also "eco-designed" themes to be found online, including Ecocoded, Neptune, or SustyWP.

Choosing the right plugins

Plugins have a huge impact on the performance of a CMS like WordPress. It is crucial to stick to the plugins essential for the smooth operation of the service, and to prioritize using alternatives to the most energy and performance intensive plugins. The ideal being to employ personalized plugins/themes or tools applied ahead of the CMS (imagick, Cloudflare).

Avoiding page builders

A page builder makes it easier to create the layout for a website. With it, you can build a page by integrating premade elements, which means users with little technical knowledge could easily create a webpage using a visually intuitive setup. But as with all plugins, using page builders is not without consequences.

Choosing a page builder to create a website has a significant impact on the site's performance and on its environmental footprint. A study by Primary Image found that, with WordPress, choosing a page builder could increase the size of pages by as much as 218 kB (+133%) and the number of files by 68 (+623%) (source: WordPress page builders compared).

Performance was similarly impacted: longer load times, more queries conducted.

To put it simply, if you have a choice in the matter, it is best to avoid page builders altogether.

Planning for content updates

Another key focal point concerns how content updates will be accomplished by contributors who are not specialized in eco-design. If the website is updated by uninitiated contributors during the lifecycle of the service it is crucial they be trained on best practices for the tasks they are expected to accomplish, such as image optimization. In the event that unoptimized images are added onto the page, the website will lose in efficiency. For more information, see Testing, assessing and maintaining.