Tout le monde est aujourd’hui concerné par l’environnement et la bonne santé de notre planète. Pour s’aligner avec ces valeurs, plusieurs initiatives sont mises en avant, dont la conception de son site web de manière écologique. Webflow figure parmi les CMS no-code préconisés. Quelles sont les bonnes pratiques à mettre en place pour limiter son empreinte environnementale ? 

Quid d’un élément de texte enrichi ?

Avant de voir les bonnes pratiques pour faire un site éco responsable en No-Code, il est indispensable de rappeler ce qu’est un élément de texte enrichi. C’est ce qui vous permet de créer et de mettre en forme du contenu sans avoir à ajouter et mettre en forme individuellement chaque élément.  Un double clic et votre contenu est créé !

Qu’il s’agisse d’éditer un contenu statique ou dynamique, vous pouvez utiliser  un élément de texte enrichi. Déposez le contenu statique dans n’importe quelle page et procédez à la modification. Pour le contenu dynamique, ajoutez un champ de texte enrichi à n’importe quelle collection. Et connectez un élément de texte enrichi à ce champ dans les paramètres.

Vous pouvez personnaliser la mise en forme de chaque texte enrichi. Vous pouvez styliser les titres, les paragraphes, les images, les figures ou encore les légendes des figures en ajoutant une classe à l’élément de texte enrichi par le biais du système de sélecteur imbriqué « À l’intérieur de ».

Les bonnes pratiques pour limiter l’impact environnemental de son site web

Une étude Green IT a montré que le numérique représente actuellement 3 à 4% des émissions de gaz à effet de serre dans le monde. L’augmentation de la consommation numérique va cependant se développer de plus en plus. L’écoconception d’un site web en No Code permet de limiter votre empreinte environnementale. Voici les bonnes pratiques qui vous aident à le faire :

L’hébergement

La meilleure pratique est de choisir un hébergement « vert ». Ce qui signifie un site optimisé pour limiter son impact environnemental. Vous pouvez si possible privilégier un hébergeur local. Vous pouvez également choisir un hébergeur avec des serveurs alimentés par des énergies vertes et renouvelables.

L’UX/UI

Un design sobre et minimaliste va améliorer votre parcours utilisateur et limiter votre empreinte écologique. Ce qu’il faut faire :

- limiter le nombre d’images

- préférer les icônes aux images

- limiter le nombre de fonts : 2 polices d’écritures maximum (1 : titres et 1 : textes)

- concevoir en dark mode : fond sombre et contenu aux couleurs claires.

Les images

Optimisez vos images en utilisant les bons formats et compressez pour réduire leur poids. Un site qui charge moins est un site écologique. Voici quelques sites pour optimiser le poids des images :

• https://compressimage.io/
• https://watermarkly.com/fr/compress-jpeg/
• https://www.iloveimg.com/fr/compresser-image

‍Le choix du CMS

Il existe des fonctionnalités qui alourdissent les pages. C’est le cas par exemple des plugins de Wordpress qui n’est donc pas optimisé pour éco-concevoir un site web. Il est essentiel de supprimer les plugins qui ne sont pas utiles. Un éditeur comme Webflow vise à améliorer votre empreinte numérique grâce à des fonctionnalités intégrées telles que :

• La compression des images qui se fait automatiquement
• Un code réduit au strict minimum en fonction de la création de vos pages
• Une simplification des classes CSS
• L’état des lieux des classes et la suppression de celles qui ne sont pas utilisées.

‍

La mesure de l’empreinte écologique de son site web

L’application de ces bonnes pratiques va apporter des résultats significatifs sur la performance de votre site web et sur son impact environnemental. Pour mesurer la consommation de votre site, vous pouvez utiliser les outils gratuits suivants :

• EcoIndex
• PageSpeed Insights
• Ecometer

Pourquoi choisir Webflow ?

Webflow est le meilleur outil pour concevoir un site web éco responsable pour différentes raisons :

L’absence de plugins et d’extensions

Un plugin laisse des traces dans le code source, ralentissant ainsi les temps de chargement de votre page. Sur Webflow, toutes les fonctionnalités sont déjà présentes, les éléments ajoutés ne passent pas par un plugin. Le nombre d’éléments superflus sur une page est donc réduit, de même que la charge du serveur.

La simplification du code source

Webflow simplifie le langage HTML et CSS du site. Le système de drag and drop construit automatiquement le code selon ce qui est ajouté sur la page. Le code ne contient donc que les éléments présents dans le site. L’option « clean up » supprime également les styles, les classes et les animations qui ne sont pas utilisées, ainsi que les bouts de code inutiles.

L’optimisation des images

Webflow optimise les images importées en les compressant automatiquement.

L’optimisation de la vitesse de chargement

La vitesse de chargement rapide vient du code simplifié et des images optimisées.

Le responsive

Faire du responsive sur Webflow, c’est adapter un site web à la taille de l’écran de n’importe quel appareil (ordinateur, tablette, mobile ou même grand écran).

‍