Stories

Monnou's website: a case of a sustainable website

24/3/2023

When we talk about sustainability, circular economy or positive impact, we often forget the impacts of digital design. When we talk about circular economy, the first thing that comes to mind are physical products or industrial products. It is very clear that these products have an impact on the extraction of raw materials, their production, their use and then their end of life. But what about digital products? Websites, apps, various platforms... They also have impacts. They consume energy, may not be accessible or inclusive, and their communication can encourage unsustainable behaviors. Therefore, sustainable digital design is a set of practices that is here to stay.

Why sustainable web design?

What is the benefit of investing in sustainable web design?

First, as ethical and positive impact brands, it allows us to be aligned with our values and purpose. Considering the sustainability of every aspect of our brand, including the website, allows us not to contribute to practices such as greenwashing or socialwashing. With a sustainable brand and website, we will be communicating honestly to our customers and partners.

In addition, if we apply sustainability in the web design process itself, we will save design and development time. For example, by employing agile working methods(Lean). This contributes to a greater well-being of the design and development teams, and to reduce costs and risks in the launch of our digital products and services.

A sustainable website not only consumes less energy, it must also be more accessible. Thus, it can offer a better user experience, with a shorter loading time: people who visit our website will be more satisfied.

Sustainable web design also means making content easy and fast to find. Therefore, it contributes to improving SEO positioning; in fact, SEO is a great ally of digital sustainability.

Some web impact criteria are important to relate, as brands, to the public sector. For example, the WCAGFor example, WCAG standards for digital accessibility are mandatory for a web design to meet the requirements of the digital kit. Will other environmental sustainability requirements soon follow?

We are already seeing how, in order to gain access to many grants and subsidies, environmental sustainability is a requirement for brands. If we look at the European context, there are more and more incentives to move towards a digital and green transition. In fact, the Next Generation funds are mainly focused on digital transformation and sustainability. It seems that digitalization and sustainability go hand in hand but, to make this real, we need to consider the impacts of our digital solutions.

Designing a sustainable website

Okay, we have already convinced ourselves of the need for sustainable web design. But how can we put it into practice?

In Monnou we have taken into account sustainability strategies in our own website.

For us, the first step for a website to be sustainable is for the business to be (or to be in the process of being) sustainable. The first step is to have a positive impact purpose, that the brand has sustainability integrated into its values and strategy. If a brand doesn't offer products and services that contribute to a better world, what good is a sustainable website?

The next step could be to choose a green hosting, i.e. one that runs on renewable energy. More and more hosting providers are moving towards renewable production, and this does not necessarily imply higher costs for the customer. In the case of Monnou, we have used the Amazon Web Services (AWS) server. AWS has made commitments to renewable energy production and continues to move towards sustainability.

Another strategy that we have followed in Monnou, is to optimize the content. Not putting too many images and videos saves a lot of energy in the use of the web. The images that we do put, can be included in lighter formats (such as WebP, instead of PNG), and with a size adjusted to the size that will be displayed on the screen.

Just like images, other files that we need to upload to the web must also be optimized. For example, we can upload only the fonts we are going to use, instead of all the variants that are available(light, regular, bold, extrabold...). Similarly, reducing the number of typeface families not only helps design clarity, but also sustainability.

Content must be easy and quick to find. Therefore, designing an information architecture that makes it easy to find the content, and applying good SEO positioning practices, is very important. There is a relationship between SEO, sustainability and accessibility. For example, at Monnou we have included all images with alternative text ('alt'). This, if done well, helps blind users to navigate the website more easily, as virtual assistants can read the image description aloud. But it also makes it easier for search engines to find the content, which helps improve SEO ranking. On the other hand, if any device fails to display the images for whatever reason (e.g. bad internet connection), the website can display the alt text instead.

Another sustainability strategy we have employed on our website is lazy loading. This means that content that is off the screen (because it has not yet been scrolled to), is not loaded until it is not needed.

It is also important to review the code of the website, and avoid having code that is not being used. Too much code will make a website slower and less sustainable.

Other aspects of accessibility that we can consider are the contrasts between fonts (titles, subtitles, etc.). Also, avoid including in our web design visual elements that may distract from the main content.

These are just some of the strategies we can follow to make a sustainable and positive impact web design. Another strategy is to help, through the user experience, to help people make the most sustainable decisions on your website or in your app. Also, use inclusive and non-sexist language. There are many other issues that can be explored, and sustainable web design should be a path and a continuous learning process.

Evaluating the impact of the web

How can we ensure that our sustainable web design strategies are effective?

While assessing the impacts of digital activity is complicated, there are several assessment tools available. One of them is Ecograder, developed by the agency Mightybytes.

Normally, on pages with a lot of content such as the home page or the project page, the scores obtained are lower than on other pages. On other pages that allow us to put less heavy content (such as photos and videos), we get higher scores. This is the case for the services page, with a score above 90/100 and CO2 emissions of less than 0.2g per visit. As the site runs on a green server, this energy comes from renewable energy.

Despite scoring well on a particular assessment tool, sustainability and sustainable web design is an ongoing process. There is always room for improvement, and, as mentioned, it is important to continue to explore new strategies.

see more stories