9 tips for eco-designing a website

Electricity production. Factories. Transportation. Household products. It's no secret that all these things pollute and are responsible for environmental degradation. 

It might be less obvious at first glance, but the internet also pollutes. This means that, on its own scale, A website emits greenhouse gases and contributes to digital pollution. 

To try to limit the impact of this scourge, you can take action at your level by adopting an eco-design approach to the web. 

By the end of this article, you will know in detail what this concept encompasses, along with the advantages it can provide for your business and your visitors.

You will also have access to many practical tips and tricks to apply to your next website creation projects, so that they are less energy-intensive. 

What is eco-design for the web?

To begin, let us define what eco-design – also spelled ecoconception – is in a broad sense.

According to the Ministry of Ecological Transition, It's about a "A preventive approach to environmental problems" which consists in "Integrate environmental protection from the design stage of goods or services".

Applied to the web, eco-design for the web consists of designing websites that are more ecological and environmentally friendly, while also being less energy-intensive.

An eco-design approach to web design is applied throughout the life stages of a site Internetfrom its creation to its maintenance, including its hosting (web server). 

To create more sustainable websites, eco-design of websites is based on several key principles: 

• focus on the essentials and prioritize simplicity, in particular with a minimalist and clean design;
• eliminate the superfluous ;
• center the architecture and content of your site/blog around the needs of your users ; 
• to offer content that loads at least as quickly as with a "traditional" websitewith as little code and queries as possible; 
• limit data downloads and unnecessary files.

In France, it is important to know that the promotion of eco-design is ensured by a dedicated organization: ADEME. 

This Agency for Ecological Transition supports innovation and research in the field of eco-design.

It helps individuals and professionals to accelerate the reduction of energy consumption, develop renewable energies and reduce greenhouse gas emissions.

As you will see below, there are several advantages to adopting an eco-design approach to web design.

Why adopt an eco-design approach for your website?

Reduce environmental impact

The first "logical" benefit when discussing eco-design for the web lies in the environmental benefits it brings.

This is a significant aspect, especially when considering the ecological pollution generated by the digital ecosystem in a broader sense.

In this regard, the figures speak for themselves and reflect the critical scale of the problem.

According to a 2022 report by theADEME Regarding the impact of digital technology in France, it is responsible for 3,5% of global greenhouse gas emissions (almost twice that produced by air traffic). This carbon footprint is expected to double by 2025, the report emphasizes.

In total, The global digital world would represent a 7th continent, the size of which would be equivalent to 2 to 3 times that of France., details a study conducted in 2019 by the Green IT collective.

For comparison, the Green IT study indicates, for example, that the global digital footprint is equivalent to 1,5 billion French employees going to work for 1 year…

Furthermore, it is estimated that if the Internet were a country, It would be the 3rd largest consumer of electricity in the world, after China and the United States.

Obviously, websites play a considerable role in digital pollution. There are 1.112 billion of them worldwide.of which only 18% are assets!

To make them work, Data centers, for example, are essential, but they consume enormous amounts of electricity.Hence the importance of choosing an environmentally friendly hosting provider, as we will see later. 

Improve user experience and performance through eco-friendly web design

Adopting an eco-design approach to web design also means taking care of the user experience (UX) offered to visitors of your website (whether it is on WordPress or another CMS). 

An eco-designed website adapts to the user's needs from the outset. The idea? To make their experience as easy as possible right from the start of their journey on your site or blog.

This translates, for example, into optimized navigation, or even the responsive display (readable on computers, smartphones, and tablets) of your pages and articles. This also improves accessibility.

In parallel, the improvement of the UX will have a positive impact on loading speed.

If your site focuses only on the essentials, it will load faster and consume less energy!

This aspect is also important from the point of view of natural referencing (SEO)Firstly, because Google takes the speed of your pages into account in its algorithm, particularly through its Essential web signals (Core web vitals).

And secondly, because a fast website or blog helps keep your visitors on your site longer, while limiting the bounce rate, which is not appreciated by search engine robots like Google.

Adopting a more responsible positioning will benefit your brand image. 

Finally, there's also a business-related benefit to eco-design for the web. For starters, adopting such an approach will position you as a responsible actor, who tries to make things happen on his own scale.

This can have a positive impact on your brand image and reputation.

Indeed, the French are sensitive to environmental issues: 80% of them say they "Concerned about environmental protection and climate change", reveals this survey.

Furthermore, positioning yourself in the niche of eco-designed websites will automatically place you in a high-end segment.

As the Ministry of Ecological Transition explains, the price of an eco-designed product is "Combined with investment in design, superior quality and innovation, it may be more expensive than a competing, non-eco-designed product.".

Therefore, you will be able to sell your services (website creation and redesign, maintenance, etc.) at a higher price than usual, and hope for an increase in your revenue.

Without further ado, let's move on to the next step: the presentation of all our practical tips relating to the eco-design of a website. 

How to create an eco-friendly WordPress website: 9 tips

The eco-design best practices for a website that you will find below are primarily intended for websites designed using WordPress.

This is why you will find very specific recommendations… but also more general ones ranging from design to development, including hosting your website or blog.

Therefore, you will be able to use many of the tips presented, regardless of the eco-design CMS you have chosen. 

Furthermore, this list of tips is far from exhaustive. To compile it, we relied on two resources that serve as "bibles" of eco-design for the web: 

1. The book “115 Best Practices in Eco-Design for the Web”by Frédéric Bordage and the GreenIT collective. ADEME offers access to certain chapters via free download. Also note that these 115 best practices are presented in the form of a web eco-design checklist. also in PDF format.
2. The General Framework for Eco-design of Digital Services (RGESN), co-piloted by the Interministerial Directorate for Digital Technology (DINUM), the Ministry of Ecological Transition, ADEME and the Institute for Responsible Digital Technology.
   This framework allows you to check 79 points on your eco-responsible website, in 8 themes (from strategy to hosting on a server), in order to help you reduce the consumption of IT and energy resources.

To delve deeper, feel free to explore these two resources.

1/ Clearly define your target audience and their needs

To begin, our first piece of advice is to identify and define your targets preciselythat is, the end users of your WordPress site (your visitors).

This is essential for creating features and content tailored to their needs. Your site should be as simple and user-friendly as possible. It should make it " neither too much, nor too little ", as recommended by the RGSEN.

From the very creation of your specificationsYou need to know your target audience, their uses, their needs and their behaviors. 

To achieve this, implement the following actions: 

• creation of a competitive analysis ;
• analysis of the existing situation ;
• defining your personas (ideal customers), for example using a free tool like make my persona ;
• conducting interviews or surveys with your users with solutions like Google Forms, Typeform ou SurveyMonkey.

In parallel, ask yourself the following questions, and provide precise answers: 

• What are the needs of the customers who will visit your site? Do they want to buy something? Are they looking for specific information? Do they want to download a document?
• What will the user journey be like once they land on your pages?
• How can we make navigation as smooth as possible?

Understanding user needs will allow you to detail the essential and necessary features of your site.

You will also be able to eliminate the superfluous to focus on the essentials in terms of eco-friendly web design.

2/ Design a clean interface

Following on from what you've just started, now focus on the architecture of your content. This is what will allow you to develop the most efficient user journey possible. 

To design it in the best possible way, consider developing the following elements: 

• your site's structure or your blogThis means outlining its architecture in diagram form. You'll present the strategic pages you've chosen and be careful not to create pages that are too deep. This is bad for user experience and SEO. Basically, the fewer pages you have, the faster your site will load, and the more you'll reduce your carbon footprint.
  To design your tree structure, use software such as GlooMaps, MindMeister ou Balsamiq ;
• wireframesThese are functional mockups showing the structure of your pages. Design them with an online tool like Balsamiq Wireframes ou mockflow ;

• graphic mock-upsThese are the elements that showcase the final look of your pages. Designing them yourself isn't always necessary, as it requires expertise and technical skill. You can simply use wireframes if you don't want to hire a professional web designer.

Trick When creating your wireframes and/or mockups, adopt the same approach as when considering your users' needs. Ask yourself what needs to be included in your content.
Does a particular option or animation seem like a gimmick and offer nothing more to the end user? Don't include it!

3/ Opt for a minimalist design

Speaking of mock-ups and graphic design, let's stay in the field of web design with this 3rd tip, to be applied both in the planning phase – before the development of the site – and during the technical phase of designing your eco-created site with WordPress.

To maintain an approach to effective eco-design of websites, prioritize a simple, clean, and web-friendly designThis is notably what emerges from the book "115 good practices of eco-design for the web".

Here are several recommendations to meet this expectation: 

• prefer the "mobile-first" approachThis involves creating a mobile version of your website before its desktop version. Your content must be responsive: it must display perfectly on any type of device (computer, smartphone, tablet). To check the responsive display of your website, use the Google Mobile Optimization Test (free) ;
• limit your fontsA good practice is to use one font for your headings and another for your body text. The fewer different fonts you use, the faster your site will load.
  The Fontpair website allows, for example, combining them. Whenever possible, prefer fonts already hosted on your site, rather than those that require requests to a third-party service like Google Fonts;
• opt for a minimalist approach by spacing out your different sections and promoting white space between your content elements; 
• Use icons instead of images, as soon as you can. They are lighter;
• reduce the number of colors usedAgain, choose a main color and 2 to 3 secondary colors or variations. Use a tool like Color Hunt to combine them properly.

4/ Reduce the size of your media

Remember the beginning of this article: we explained that with a successful eco-design approach to web design, the pages of your WordPress site would load faster… and consume less energy. 

To achieve your goals, you must drastically reduce their weight. To do this, Focus first on the images, which in some cases account for 50% of a web page's loading time!

To do things properly, apply the following best practices and tips for eco-friendly web design: 

• reduce the size and weight of your images before uploading them to your site, for example using the "Save for Web" feature of software like Photoshop (paid). There are also free alternatives such as GIMPA maximum size of 2000 pixels x 2000 pixels is often more than sufficient for your images;
• activate an image compression plugin on your WordPress site like Imagify ou smushYou can also use third-party tools such as PNG, kraken.io ou Optimizilla ;

• Use an image format appropriate for the image type and display context.For example, choose JPG format for photos and PNG for images that support transparency. Prefer vector formats like SVG whenever possible (illustrations, icons, logos, etc.);
• select your photos with choice and reduce their number as much as possible.

Tips Also, be mindful of videos, which are very resource-intensive. Avoid uploading them directly to your site (opt instead for hosting on a third-party platform like YouTube or Vimeo)..
And above all, disable autoplay, that is, the automatic playback of the video as soon as the page loads..
Avoid this in an eco-design approach to web design on WordPress. Allow users to click the "Play" button only if they want to watch the video. 

5/ Focus on the user experience

With lighter images and videos, you will take care of the user experience, which is an integral part of an eco-design approach to the web.

However, this is only the tip of the iceberg. It's possible to go much further in terms of UX. 

To help your visitors easily find what they are looking for, we recommend that you: 

• design a clean navigation menuTry not to exceed 5 to 6 items in your menu. These items (links) should redirect to your most strategic pages;
• Add a search bar to your header or navigation menuMany WordPress themes natively offer this option; 
• establish internal links in order to redirect your readers to additional content and keep them on your site longer. 
• avoid infinite scroll (Infinite scrolling). Instead, use page-based navigation. The WordPress plugin WP-PageNavi allows you to do that.

Also think about Switch your site to HTTPS to strengthen its security. You will also prevent your visitors from encountering messages indicating that the connection to your WordPress site is not secure.

Finally, since user experience also goes hand in hand with the performance, we advise you to'activate the WP Rocket plugin to speed up the loading speed of your pages.

If your site loads faster, it will consume less energy and pollute less.

A real plus in terms of eco-design for the web. WP Rocket is a paid plugin, admittedly, but it has the advantage of being very easy to use.And above all, how many multiple features does it have in one?

• It allows you to activate caching on your pages;
• It has a lazy load feature;
• It is capable of optimizing your database, etc.

In short, it's simply indispensable.

6/ Reduce your website's code

If you have followed along so far, you know that an eco-design approach to web involves focusing primarily on the essential functionalities of your website.

This includes, of course, the visual appearance and the content, but also everything that happens behind your screen, in the code (HTML, CSS, JavaScript, PHP, etc.).

The larger your website's code, the longer your pages will take to load, and the larger your carbon footprint will be.

Choose a lightweight theme as part of an eco-design approach for the web.

How can we limit the damage at this level? Firstly, Prioritize choosing a lightweight WordPress theme and compliant with best practices. A few meet both of these criteria in the official WordPress directory: 

• GeneratePress ; 
• cadence ;
• Blocky ;
• Astra. 

Please note : If you are used to using a page builder (Divi Builder, Elementor, Beaver Builder etc), beware.
While they're very practical for designing advanced layouts without touching the code, they also include a large number of features you might not necessarily need. And more features also means a website with heavier code. 

Limit the number of plugins and minify the code

After choosing a theme, you'll inevitably use plugins. Here, prioritize quality over quantity.

Limit your use of extensions as soon as possible and remove those you no longer use. 

Furthermore, update your themes and plugins as soon as possible. This is good practice in terms of security on WordPress, but it is also interesting in terms of eco-design for the web.

Indeed, developers sometimes add performance optimizations to their new versions.

Finally, apply these last two tips to reduce your code: 

• minify the HTML, CSS and JavaScriptYour theme may offer this option; check its settings and documentation. If not, use a dedicated plugin. WP Rocket, for example, offers this option.
• reduce the animations on your siteTo limit these unnecessary resources (especially CSS and JavaScript), for example, avoid using sliders, which negatively impact page load times.

7/ Optimize your SEO

To present a site that "pollutes" as little as possible, you must focus on quality rather than quantity. 

Your content must be easily found, through natural referencing (SEO) actions focused on strategic queries, i.e. adapted to the needs of your target audience. 

Here are several avenues to explore to achieve this: 

• Target keywords that match the needs of your target audience. and their research intent; 
• Improve your on-page SEO using an SEO plugin as Yoast SEO, SEOPress ou Rank MathThanks to them, you will be able to optimize strategic tags such as the tags <meta-description> or <alt> for your images.

In addition to that, make sure to offer a clear presentation of your different content (articles, pages).

When you are writing, we advise you toImprove the visual presentation of your writing by using subtitles. (h2, h3, h4), by creating paragraphs or using bold to highlight certain essential information. 

Did you know The Yoast SEO plugin is one of the most committed players in the WordPress ecosystem when it comes to eco-friendly web design. Its developers offer, for example... a crawl optimization feature (Search engine crawlers crawl your pages) for certain types of URLs, scripts, and metadata that WordPress automatically adds. This allows you to reduce your carbon footprint in just a few clicks.

8/ Opt for eco-friendly web hosting

That's great, you're ready to put your eco-friendly WordPress website online? In that case, you'll need...a hosting provider committed to reducing its environmental impact.

What exactly is a "green" web host? According to the RGSEN guidelines, this type of web host must meet several strict criteria: 

• he must have signed the European Code of Conduct for Data Centres ; 
• It must commit to the environment by meeting certain environmental standards (ISO14001, ISO50001 certifications, etc.); 
• It must use a type of server cooling that utilizes renewable energy sources (water, air, etc.) or waste heat recovery;
• it must make available the environmental impacts related to its use and application;
• It must propose a transparent and environmentally friendly policy for its management of equipment (servers, etc.). 

If you search for the best eco-friendly web hosting providers on a search engine, you will come across the following providers: 

• Hosterra;
• Kinsta;
• o2switch ;
• Infomaniak ; 
• PlanetHoster ; 
• Hostinger. 
• Ex2. 

It will then be up to you to verify whether your chosen hosting provider is committed to environmentally friendly practices. To do this, contact their customer service and ask if they meet the various criteria mentioned above, among others.

9/ Validate your pages with the W3C

To conclude our series of tips, we draw your attention to one last best practice to implement: validating the code of your pages, in order to check for errors and/or incorrect uses (missing angle brackets, duplicate CSS classes etc).

This is made possible in particular thanks to the services offered by the W3C (World Wide Web Consortium), an organization responsible for promoting and developing web standards. 

The latter provides you with various tools, such as validation services: 

1. HTML markup of your website.
2. CSS code. This tool "will not only compare your stylesheets to the CSS specifications" but it will also tell you if your CSS code is risky in terms of usability., specifies the W3C.
3. From your hyperlinks. 

Each time, you simply need to enter the URL of the page of your choice, then click on the "Check" or "Verify" button.

You will then have an indication of the faulty marking or the error to be corrected, with its precise location (line) in the code.

Be warned, sometimes you'll have some work to do ;-). Finally, to make your sites more accessible, you can also rely on the general framework for improving accessibility (RGAA).

106 control criteria will help you make your WordPress site understandable and usable by people with disabilities.

If you would like to delve deeper into the topic of eco-design on WordPress, we recommend watching the video presentation that Olivier Gobet gave at WordCamp Bordeaux 2019 (Eco-designing a website. Yes, but how?). 

How to assess the environmental impact of your website?

Once your site or your client's site is online, you will surely want to know what its environmental impact is after applying all our advice.

Note that This approach can be applied upstream of the design of a website, particularly if you are in charge of redesigning a WordPress site..

You will also get a more precise overview of the site's situation and its shortcomings in terms of web eco-design. 

To help you, there are several free tools that can calculate the environmental impact of a website: 

• Website Carbon Calculator (in English) measures the carbon footprint of a page on your site, comparing it to the rest of the web. You will obtain, for example, the CO2 emitted by a page, with a comparison to other elements;
• EcoIndex assesses the environmental impact of your site. It's a tool quite similar to Website Carbon Calculator, but it's in French. EcoIndex also offers precise metrics on your page (size, number of elements and requests);

• The GreenIT-Analysis Chrome or Firefox extension, proposed by the GreenIT collective. It combines the functionalities of the EcoIndex online services and EcometerIts designers indicate that its use is primarily intended for developers and allows verification of the implementation of good practices in eco-friendly web design.
• PageSpeedInsightsWith this Google tool, you can specifically measure the page load speed of your WordPress site. The displayed results will provide metrics evaluating your users' experience (Core Web Signals), but also—and most importantly—the performance issues detected. Suggestions for improvement will be offered. Consider implementing them on your site to boost your eco-design approach.

Did you know ? Since May 2023, a free tool has been available to display a summary of a website's environmental impact and highlight the eco-design efforts implemented to reduce this impact. This environmental performance label, which is similar to a web eco-design certification, was developed by the Association of Communication Consulting Agencies (AACC) and the Green IT collective. Discover how to use it here.

Eco-design for the web: 5 examples of eco-friendly websites

To conclude this article, how about a selection of websites to inspire you, and to see what an eco-designed website looks like up close, based on best practices?

Here are several examples of websites designed using an eco-design approach for the web:

• Grenoble Alps Metropolis ;

• The Agency for Ecological Transition ;
• Slowebcreation ; 
• The forest and us (created with WordPress) from the Teragir association;

• Babel Agency.

Summary

As you have seen throughout these lines, adopting an eco-design approach to web design offers several advantages when creating an eco-friendly website.

For your business, first and foremost. You are participating in reduce environmental impact that creating a website generates, while improving your brand image by adopting a more responsible positioning.

For your visitors, the most notable added value lies in improving the user experience that you offer them, which is never negligible.

In order to implement an eco-design strategy on WordPress, you know that it is essential to activate different levers, such as creating a minimalist visual interface and taking into account the needs of your target audience.

If this topic is sensitive for you, Discover our WordPress website creation serviceOur team of experts will help you design a website with an optimal user experience, while also being fast, attractive, and secure.