Home
/
Blog
/
Best practices for creating an eco-friendly No-Code website

Best practices for creating an eco-friendly No-Code website

Posted on

3/6/2024

Today, everyone is concerned about the environment and the health of our planet. To align ourselves with these values, several initiatives are being put forward, including designing our website in an eco-friendly way. Webflow is one of the recommended no-code CMSs. What are the best practices for limiting your environmental footprint?

What about rich text elements?

Before looking at the best practices for creating an eco-friendly No-Code site, it's essential to remember what a rich text element is. It's what allows you to create and format content without having to add and format each element individually. A double click and your content is created!

Whether you're editing static or dynamic content, you can use a rich text element. Drop static content into any page and proceed with editing. For dynamic content, add a rich text field to any collection. And connect a rich text element to this field in the parameters.

You can customize the layout of each rich text element. You can style headings, paragraphs, images, figures or figure captions by adding a class to the rich text element via the "Within" nested selector system.

Best practices for limiting the environmental impact of your website

A Green IT study has shown that digital technology currently accounts for 3 to 4% of greenhouse gas emissions worldwide. However, the increase in digital consumption will continue to grow. The eco-design of a No Code website can help you limit your environmental footprint. Here are some best practices to help you do just that:

Hosting

The best practice is to choose "green" hosting. This means a site optimized to limit its environmental impact. If possible, you should choose a local host. You can also choose a host with servers powered by green, renewable energies.

UX/UI

A sober, minimalist design will improve your user experience and limit your ecological footprint.

What you need to do:

- limit the number of images

- prefer icons to images

- limit the number of fonts: 2 fonts maximum (1: titles and 1: text)

- design in dark mode: dark background and light-colored content.

The images

Optimize your images by using the right formats, and compress them to reduce their weight. A site that loads less is an ecological site. Here are a few sites for optimizing image weight:

Choice of CMS

Some features make pages heavier. This is the case, for example, with Wordpress plugins, which are not optimized for eco-design. It's essential to remove plugins that aren't useful. An editor like Webflow aims to improve your digital footprint with integrated features such as :

- Automatic image compression

- Code reduced to the bare minimum as your pages are created

- Simplification of CSS classes

- Class inventory and deletion of unused classes.

Measuring the ecological footprint of your website

Applying these best practices will bring significant results in terms of your website's performance and environmental impact. To measure your site's consumption, you can use the following free tools:

Why choose Webflow?

Webflow is the best tool for designing an eco-responsible website for several reasons:

The absence of plugins and extensions

Plugins leave traces in the source code, slowing down page loading times. With Webflow, all functionalities are already present; added elements don't need to go through a plugin. The number of superfluous elements on a page is therefore reduced, as is server load.

Simplifying source code

Webflow simplifies the site's HTML and CSS language. The drag-and-drop system automatically builds the code according to what is added to the page. The code therefore contains only those elements that are actually present on the site. The "clean up" option also removes unused styles, classes and animations, as well as unnecessary code snippets.