No code, no CO₂ ?

① L'évidence "no code"

Devenue indispensable pour mon activité, la création d'une vitrine numérique était également l’occasion de tester le "no coding" car, comme pour une majorité d’utilisateur.rice.s de ces outils :

• je n’ai pas les compétences pour réaliser un développement moderne,
• je n’ai les moyens de m’offrir les services d’un développeur,
• je voulais que mon site soit rapidement en ligne,
• je voulais pouvoir facilement le maintenir et le faire évoluer.
  

Mon besoin (la création d'un site statique simple de quelques pages), sa notoriété grandissante et une communauté dynamique m'ont conduit à choisir Webflow.

J’avais toutefois une exigence supplémentaire avant d'entériner définitivement ce choix : Webflow est-il en mesure de s'intégrer dans une démarche de sobriété numérique ?

Afin d'avoir un premier élément de réponse, j’ai testé, grâce à l’extension chrome de GreenIT, l'éco-index d’un thème minimaliste mis à disposition par la communauté Webflow. Le résultat fut suffisamment concluant pour valider mon choix.

Vous trouverez dans la suite de cet article un feedback sur mon expérience de Webflow utilisé dans une démarche de sobriété numérique.

② Webflow est-il éco-compatible ?

Sommaire :

• Respect de l'UX/UI
• Responsivité & optimisation de l’expérience multi-devices
• Choix de l’unité de travail
• Optimisation des visuels
• Qualité du code généré
• Optimisation du code
• Accessibilité des pages
• Hébergement du site
• Vie du site
• Bilan chiffré de la sobriété technique site
• Pour conclure

↳ Respect de l’UX/UI

Webflow est avant tout un outil destiné aux webdesigners professionnel.le.s qui souhaitent mettre à profit leurs compétences pour développer un produit fini avec un minimum de compétences techniques. C’est donc sans surprise (mais non sans une pointe de satisfaction) que j’ai pu respecter "au pixel près" l’UX/UI posée sur Figma. La sobriété numérique se jouant dès la conception, il est indispensable de pouvoir retranscrire fidèlement le travail ergonomique et graphique sur notre produit fini.

La possibilité de travailler avec des objets vectoriels comme les images SVG et les animations lottie (en natif !) permet par ailleurs d’enrichir le site en l’animant sans l’alourdir. Un bon point lorsqu’on envisage de faire de l’éco-conception créative (je reviendrai sur cette notion dans un billet ultérieur).

↳ Responsivité & optimisation de l’expérience multi-devices

La gestion du responsive et des différents break points est un point fort de l’outil. Webflow propose en natif 5 "plages de résolution", dont l’une référante (le desktop, entre 992px et 1279px).

Vous travaillez sur cette résolution de base, tout en ayant la possibilité d’adapter l’affichage pour chaque plage. Vous avez également la possibilité d’ajouter des break points, pour les très grands écrans par exemple.  

Or ces adaptations ne se résument pas uniquement à des ajustements de tailles (marge, typo…). Vous allez pouvoir masquer ou afficher des parties entières de votre site en fonction de la résolution et donc offrir une expérience dédiée sur desktop, tablette ou mobile.

Rappelons que le fait de "servir" des éléments adaptés au device de l’utilisateur.rice (ordinateur portable, smartphone, tablette, mais aussi écran tactile in-store, écran de télévision,…) est un aspect important de l’éco-conception numérique.

🛑 Un bémol majeur cependant : les objets sont masqués, mais toujours présents dans le code source même s’ils ne s’affichent pas à l’écran, ce qui est à la fois problématique d’un point de vue de l’éco-conception et de l’accessibilité.

L’outil met par ailleurs à disposition une bibliothèque de composants eux-même responsives. J’ai par exemple utilisé Navbar pour gérer le menu du site, avec un passage automatique en burger sur la résolution mobile paysage (passage configurable bien sûr). Le tout avec une simplicité désarmante. Et cette fois, le burger ne se cache dans la source lorsque celui-ci n’est pas affiché…

↳ Choix de l’unité de travail

Il est important aujourd’hui de pouvoir choisir une unité de travail autre que le pixel, peu adapté à la responsivité et l’adaptativité des sites. Webflow propose les alternatives classiques au px : %, EM, REM, CH, VW, VH.

J’ai opté pour le VW (taille définie en fonction de la largeur du viewport), et donc des tailles de texte responsive.

Là encore, l’idée était de pouvoir proposer une lecture la plus confortable possible tout en respectant le travail effectué sur les tailles de typos sur l’UI initiale. Le résultat est là encore tout à fait satisfaisant.

↳ Optimisation des visuels

Webflow n’optimise pas les visuels à l’upload ce qui est conforme aux bonnes pratiques de l’éco-conception numérique. Cela impose toutefois d’être attenti.f.ve à faire ce travail d’optimisation en amont du chargement des visuels.

Par contre la plateforme génère de multiples variations d’un même visuel afin d’afficher la taille optimale en fonction de la taille du navigateur de l’utilisateur (images responsives). C’est un très bon point afin d’éviter d'afficher des visuels trop lourds sur mobile ou tablette.

🛑 Nouveau bémol majeur : les visuels intégrés dans les blocs "rich text" dédié à l'intégration de contenus longs comme cet article ne supporte pas ce principe de visuels responsives. Cette feature fait partie de la wishlist de Webflow : espérons que cela vienne très rapidement !

Côté formats d’images, on retrouve les classiques GIF, PNG, JPG et SVG. Bonne surprise : Webflow suporte depuis l’an dernier le WebP. Ce format développé par Google offre des capacités d’optimisation élevées. Il n’est malheureusement pas possible de charger de visuel alternatif (fallback) pour les navigateurs plus anciens qui ne supportent pas ce format. C'est pour cela que j'ai préféré ne pas utiliser ce format.

↳ Qualité du code généré

Webflow revendique code « propre, conforme au W3C et sémantique » (« clean, W3C compliant, semantic code »).

J’ai donc soumis mon site à l’outil de validation du W3C. Si le résultat est satisfaisant, il ne passe pas pour autant le cut du validateur, que cela soit du point de vue du HTML ou des CSS.

Le code javascript ne produit lui pas d’erreur dans la console du navigateur, y compris l'élément de code custom ajouté pour gérer l’ouverture de la pop-in.

Enfin, la structure sémantique (titre, sous-titre, paragraphe, liste, navigation,…) des pages est bien respectée... si tant est que vous respectiez vous-même cette logique sémantique dans la construction de vos pages.

C’est un point crucial et récurrent sur lequel je reviendrai plus loin mais il est impératif d’avoir des connaissances sur la structuration d’une page HTML si l’on souhaite obtenir un code le plus propre et bien formé possible.

‍À noter :

1. L’une des erreurs HTML remontées est liée au toggle switch récupéré auprès de la communauté et adapté du composant Webflow "check box". Impossible de déterminer si l’erreur provient d’une mauvaise utilisation de ce composant custom ou de la customisation elle-même, mais il est intéressant de relever que les ressources mises à disposition peuvent elles-mêmes être sources d’erreur.
2. Il est possible d’ajouter du code custom, qu’il s’agisse de javascript ou de styles CSS. Toutefois, ce code sera intégré directement dans le code des pages et non dans les fichiers javascript ou CSS du projet, ce qui détériorera légèrement l’éco-index de la page.

↳ Optimisation du code

Si vous passez par Webflow pour l’hébergement de votre site, vous pouvez choisir de minifier (= optimiser) l’ensemble des fichiers utilisés pour l’affichage de vos pages : fichiers HTML, javascript et CSS.

Si par contre vous choisissez d’héberger vous-même vos pages sur le serveur de votre choix, l’export des pages vous fournira des pages non optimisées. Un choix compréhensible puisque dans une stack technique classique, le stockage du code sur un dépôt GIT se fait "en clair" (non optimisé). Charge à vous de minifier vos fichiers afin d’optimiser au maximum votre code (de nombreux outils en ligne vous le permette).

‍À noter :

1. Toutes les offres d’abonnement de Webflow ne permettent pas l’export du code de votre site. Si vous souhaitez impérativement héberger votre site chez un hébergeur écologique (cf. plus bas), vous devrez en passer par des plans payants type Core (28$/mois) ou Freelancer (24$/mois).
2. L’export de code permet de réinstaller sans difficulté un site statique. Si votre site comprend des éléments liés à des bases de données (fonctionnalités "CMS", "e-commerce") ou des fonctionnalités Webflow natives (formulaire), ces briques fonctionnelles ne seront plus disponibles après export.

↳ Accessibilité des pages

Si l’accessibilité n’est pas un attendu de l’éco-conception, on pourrait facilement dire que celles-ci sont "jumelles", tant les objectifs et les moyens mis en oeuvre sont proches.

❝Quand on travaille à l’accessibilité du Web, on constate fréquemment que certaines pratiques ont pour effet de réduire soit la taille des pages, soit la quantité de données transférées à l’utilisateur. Qui plus est, un site accessible est généralement plus simple et donc plus rapide à consulter, et pas uniquement pour les utilisateurs en situation de handicap.❞

J’ai donc testé avec divers outils en ligne l’accessibilité de mes pages (WAVE et PageSpeed Insights). Webflow s’en sort plutôt bien : pas d’erreur dans Wave et une note de 100 sur PageSpeed.

Le site ne pourrait pas prétendre pour autant à une quelconque labellisation d’accessibilité, mais ces résultats permettent tout de même se rendre compte que le code généré est globalement accessible… si toutefois la structure sémantique des pages a été correctement pensée et globalement les bonnes pratiques d’accessibilité appliquées (une fois encore !).

↳ Hébergement du site

Comme je l’indique plus haut, il est possible de faire héberger son site par Webflow et d’y avoir une URL custom (en fonction du plan choisi). Si vous faîtes ce choix, votre site sera hébergé en réalité par Google via Firebase.

Testé sur le site de la Green Web Foundation, l’hébergement de Webflow indique un "hébergement vert". J’ai malgré tout fait le choix de DigitalOcean qui héberge ses apps chez CloudFlare. Là encore, l’hébergement est décrit comme "vert", mais  CloudFlaire semble plus transparent sur l’origine de l’énergie qui sert au fonctionnement de ses serveurs (vs Google).

J’envisage toutefois dans un avenir proche de migrer mon site chez un hébergeur à la démarche éco-responsable bien plus affirmée tels qu’Infomaniak (Suisses) ou Digital Forest (France).

↳ Vie du site

Une fois le site en ligne, se pose la question des futures mises à jour du site (ajout d'un référence, d'un article, d'une nouvelle rubrique...).

Deux choix s'offrent alors à vous, à la fois exclusifs et définitifs (c'est donc une décision qu'il faut bien évaluer en début du projet) :

1. Vous tuez votre projet une fois votre site achevé et hébergé chez un tiers, mais cela signifie que toute évolution future devra se faire "manuellement". Vous perdez donc défintivement le bénéfice du "no-coding" puisqu'il est impossible d'uploader votre code modifié localement sur votre projet Webflow.
2. Vous gardez votre projet "en vie" chez Webflow, cela signifie qu’il consomme de la ressource inutilement, qui plus est si vous avez publié votre site lors de la production
   

En effet, lorsque vous créez un site sur Webflow, celui-ci vous permet de le publier directement en ligne avec une URL de la forme https://monsite.webflow.io.

Si cela n’est ni automatique ni obligatoire, cela permet de visualiser très rapidement les pages construites dans un environnement "live".

Mais si vous ne pensez pas à dépublier votre projet à l’issue de la mise en ligne de votre site, il reste en ligne et a donc une empreinte propre, en complément de votre site de production (une fois encore, ceci dans le cas où vous choisissez d’héberger votre site en dehors de Webflow).

J’ai pris le parti de garder ce "second site" comme environnement de développement. Je n’ai donc pas de serveur tournant en local sur mon ordinateur. Cela me permet également de mettre mon template à disposition de la communauté Webflow, via la galerie "Made in Webflow", ce qui offre la possibilité à chaque membre de pouvoir cloner le projet et de l’adapter à son propre besoin.

Enfin, concernant la fin de vie du site, il est bien sûr possible de supprimer à tout moment son compte et ses espaces de travail.

À noter :

1. Il est dommage qu’il ne soit pas possible de partager un site hébergé hors Webflow au sein la galerie "Made in Webflow".
2. Il est possible d’interdire l’indexation du site publié via un sous-domaine de Webflow pour éviter le duplicate content par Google ; il également possible d’en verrouiller l’accès via un login/mot de passe.

↳ Bilan chiffré de la sobriété technique du site

A l’issue de la production de mon site avec Webflow, je l’ai testé avec différents outils permettant d’évaluer la sobriété numérique d’une page web.

Les résultats sont bons :

• Ecoindex (GreenIT) : entre 81 et 87/100 (A) sur l’ensemble des pages,
• Ecograder : entre 90 et 91/100 sur l’ensemble des pages,
• Websitecarbon : des pages plus "propres" que 89 à 90% des pages du web testées avec l’outil.

De la même manière, les performances de chargement des pages évaluées avec Page Speed sont également très satisfaisantes. Exemple pour la page d'accueil :

Sur mobile :

• 77/100 pour les performances
• 100/100 pour  l’accessibilité
• 100/100 pour les "bonnes pratiques"  
• 97/100 pour le SEO

Sur desktop :

• 98/100 pour les performances
• 100/100 pour  l’accessibilité
• 100/100 pour les "bonnes pratiques"  
• 100/100 pour le SEO

Enfin le poids des pages n’excède jamais les 530Ko, soit environ 4 fois moins que le poids médian d’une page web en 2022 (2 315 Ko sur desktop, 2 020 Ko sur mobile)

↳ Pour conclure

Si l’éco-conception numérique ne se résume pas à un éco-score, au poids ou à la vitesse de chargement des pages, les chiffres obtenus démontrent que "no code" et sobriété numérique sont compatibles et que pour des sites statiques avec une faible profondeur de contenus, le "no code" est clairement une option crédible pour la création d’un site web éco-conçu.

Toutefois, pour que les résultats soient réellement probants, il est nécessaire que :

1. la conception en amont de l’intégration dans Webflow respectent les bonnes pratiques de l’éco-conception numérique,
2. le/la "no codeu.r.se" possède des notions relativement avancées de codage sémantique et plus globalement une bonne connaissance de la structuration d’une page HTML.

Ce n’est qu’à ces conditions que vous pourrez obtenir un site "no codé" à l’empreinte écologique mesurée.