L’éco-conception des sites web

24 mai 2019
Carole

ecoconception des sites web

Comment concevoir un site web écoresponsable ? Découvrez toutes les facettes d’une méthodologie qui intègre les low-tech et le développement durable.

État des lieux des sites web

Aujourd’hui, vous disposez de solutions en ligne quasi gratuites qui vous promettent un site web professionnel en quelques clics. La communication digitale est à la portée de vos mains à condition d’avoir un bagage suffisamment grand pour établir seul votre message et votre univers graphique.

Bien souvent ces solutions sont accompagnées d’un “ Site Builder ” (un logiciel de construction de site, disponible en back office) qui permet, grâce à des effets de “ glisser / déposer ” de mettre en page vos articles très facilement. Cette solution technique, très gourmande en énergie, “kidnappe” ses utilisateurs. Pour arriver à un résultat pro, vous vous retrouvez pendant des heures et des heures à cliquer pour tester toutes les options et sélectionner le meilleur effet.

> Si vous avez fait le choix de passer par une plate-forme web de type Wix, Sitew ou e-monsite, vous utilisez une solution en SaaS (un logiciel en tant que service ou Software as a Service). Son avantage immense est de permettre la démocratisation de la création de site web, sans passer par la barrière très fastidieuse, et souvent infranchissable de l’apprentissage du code. Mais les consommateurs de ces solutions ne se rendent pas compte qu’ils ne possèdent pas vraiment leur site web. Leurs données ne leur appartiennent pas.

> Si jamais vous avez choisi d’héberger votre site web sur votre serveur et de passer par une solution tout en un, alors vous utilisez peut-être un CMS (Content Management System, système de gestion de contenu en français). L’idée des CMS est de ne pas réinventer la roue à chaque site web. Le CMS le plus populaire et de loin le plus accessible pour les débutants est WordPress. Tout comme les solutions en SaaS, les CMS vous permettent de choisir un joli thème et d’ajouter tout un tas de fonctionnalités en y intégrant des plugins prêts à l’emploi (newsletter, e-commerce, sécurité…).

Et l’écologie dans tout ça ?

Ces deux solutions sont conçues pour satisfaire le plus grand nombre et ne sont, a fortiori, incompatibles dans une démarche responsable pour les raisons suivantes :

  • L’opulence des fonctionnalités :
    Plus vous installez de plugins, plus vous ajoutez des fonctionnalités qui ne sont pas forcément toutes utilisées. Votre applicatif va devenir lourd et consomme inutilement de l’énergie.
  • Un site web inutile :
    Posez-vous la question : pourquoi avez-vous besoin d’un site web ? Si les objectifs de départ ne sont pas remplis, c’est qu’il y a eu sans doute un problème dès la conception. Et si avec amertume vous vous dites “je l’ai fait pour moi”, “pour garder une trace de mon activité”, c’est que le “résultat professionnel” promis, n’était pas au rendez-vous. Nous verrons par la suite que le template ne fait pas tout.
  • Des milliers et des milliers de clics
    Pour intégrer un article comme celui-ci, il faut compter une bonne après-midi à cliquer et à tester, encore et encore. C’est autant de requêtes vers le serveur et d’énergie dépensée.
  • Des sites web lents
    Les sites web qui ont beaucoup de mal à charger, dépensent beaucoup plus d’énergie que les autres. Les utilisateurs perdent patience et Google aussi, en les sanctionnant via son moteur de recherche.

Calculer l’empreinte environnementale de votre site web

Retrouvez toutes les solutions en ligne pour tester votre site web.

Pour entrer votre projet web dans une démarche écoresponsable, vous devez d’abord analyser le cycle de vie de la création d’un site web et ensuite examiner nos marges d’actions. Nous sommes persuadés que non seulement la transition est possible, mais qu’elle est à portée de tous, avec de la volonté, du bon sens et un petit coup de pouce 😉

Cycle de vie d’un site web

L’objectif du cycle de vie est de visualiser les impacts environnementaux à chaque étape, de la conception du site web à sa mort.

Cycle de vie d'un site web

Pour compléter ce modèle, nous devrions mesurer la consommation d’électricité totale et prendre en compte le matériel utilisé dans tout son processus de fabrication, depuis l’extraction des métaux rares, le transport vers les usines et les centres de distribution jusqu’à l’arrivée dans les mains de l’utilisateur. Pour plus d’informations sur ce point, référez-vous au GreenIT.

Création

La conception regroupe tout ce qui constitue le socle de votre projet web. L’aboutissement de cette étape conditionne le déroulement des autres. Trop de personnes négligent cette phase alors qu’elle est pourtant la plus cruciale. Feriez-vous confiance à un maçon qui veut construire votre maison sans passer par un architecte ? Alors pourquoi se passer d’un chef de projet qui aurait un profil UX designer ?

Un UX designer ? Mais qu’est-ce donc cet animal ?

C’est le professionnel qui va vous aider à mettre du sens à votre projet web. Ça peut être bête dit comme ça, mais pour être utile, un site web doit répondre à des objectifs au bénéfice de votre activité et au service de vos utilisateurs. Pour ce faire l’UX Designer, ou l’analyste de l’expérience utilisateur, va orienter le message de votre site web et optimiser les parcours.

À qui je m’adresse ?
Quel est l’objectif de mon site web ?
Comment y arriver ?
Comment hiérarchiser l’information ?
Comment rétrécir les parcours ?

Rappelez-vous que votre utilisateur n’a que deux secondes de patience. Compter dans votre tête : un… deux. Si peu de temps pour le convaincre. Pour lui dire que non seulement il est au bon endroit, mais qu’en plus les informations essentielles sont à portée de clic.

La phase de conception web est un moment hybride qui se situe à la croisée de savoir-faire radicalement différents : le web et votre activité. Sa réussite dépend de la capacité à créer un espace commun, sans doute un champ lexical propre au projet pour établir une communication unique. Aussi, Wexample Labs préconise des ateliers de co-construction permettant ainsi d’extraire le meilleur de chacun.

La conception ne serait pas bonne si elle n’était pas capable de produire des livrables efficaces, compréhensibles au premier regard, aussi bien par les professionnels que les novices, et ceci dans le but de raccourcir le temps de travail. Pour ce faire, Wexample Labs a conçue une maquette grise élaborée. Pilier du projet web, ce document simule le projet en se déchargeant complètement de l’aspect graphique pour se concentrer sur les fonctionnalités et les scenarii des utilisateurs. Elle est le point de départ des ateliers de co-construction, elle est construite et élaborée pour les designers et les développeurs pour les aider à comprendre le projet en deux secondes et à l’implémenter avec beaucoup de facilité. Ce document n’est pas une simple maquette, mais le fruit d’une longue expérience de professionnels qui se sont regroupés un jour pour parler méthodologie pour anticiper toutes les difficultés issues des conceptions mal maîtrisées.

La méthodologie de Wexample

Un projet web bien préparé, est la clé du succès ! Découvrez notre méthodologie de travail.

Développer un univers graphique original

La maquette graphique d’un site écoresponsable doit prendre en compte toutes les optimisations low-tech :

  • choix d’une police système,
  • optimisation des images et définition précise des gabarits,
  • favoriser le vectoriel, notament avec le SVG,

C’est une figure imposée. Le designer doit faire preuve de créativité, tout en respectant une charte technique très stricte, pour sublimer votre activité. L’objectif est clair : accroître au maximum la charge affective que l’utilisateur va porter à votre site web. S’il réussit, ce sera votre utilisateur qui deviendra le principal ambassadeur de votre activité.

Développement

Les solutions techniques

Et si je vous disais que l’éco-conception technique d’un site web revient à retrouver les règles de base de l’apprentissage du code. C’est du moins la sensation que nos développeurs ont eu après la lecture du livre de Frédéric Bordage : “Les 115 bonnes pratiques ”.

Aujourd’hui, les propositions de framework (boîte à outil des développeurs) éco-conçus sont encore très largement à l’état de R&D. La plupart des entreprises qui proposent des solutions low-tech, jouent sur la partie conception et très rarement sur le développement, mis à part les petites optimisations techniques très largement répandues dans la communauté.

Pour les Wexies, cette nouvelle s’est transformée en opportunité. Force est de constater que nombreux sont les développeurs qui ont déjà pensé à des optimisations, seuls, sur leur propre framework. L’idée de converger ces solutions dans un projet commun et open source n’a fait qu’un pas. Aussi, la création des Respon.site, techniquement en cours d’élaboration, fera bientôt l’objet d’un nouvel article.

La dette technique

Combien de projets web développés dans la précipitation avec une méthode nommée “ l’Extreme Programming ”, sans test unitaire, et sans commentaire, avons-nous rencontré ?
Ces projets web ont souvent des profils différents. Tantôt, c’est le fruit d’un développeur web isolé dans une entreprise à qui on demande de tout faire. C’est une startup qui a besoin de convaincre et vite des investisseurs. C’est un projet web pensé sans chef de projet, et donc sans filtre, sans priorité et souvent, sans sortie…

Malheureusement en informatique, les coupures budgétaires se paient à un moment donné par ce qui se nomme la dette technique. Plus votre applicatif grossit, plus il va être difficile de l’appréhender et de le déboguer. Un projet web mal conçu est un projet qui va exploser les budgets en maintenance. Ainsi vous pouvez multiplier facilement par trois votre investissement de départ.

Les projets web écoresponsables doivent impérativement lutter contre ce fléau :

  • en choisissant des langages et des technologies répandues et soutenues par une communauté mondiale ;
  • en commentant très largement le code en anglais pour permettre à n’importe quel développeur de reprendre la main derrière, y compris les juniors ;
  • en couplant les fonctionnalités à des tests unitaires. Ce sont de petits algorithmes qui vont simuler le comportement des utilisateurs en cliquant partout pour vérifier qu’il n’y a pas de bugs.
  • en réfléchissant davantage sur l’architecture ;
  • en abolissant la duplication de code ;
  • en arrêtant de travailler seul sur un projet et ne pas hésiter à demander des conseils à des développeurs plus confirmés (lien join us).

En deux mots, le développement écoresponsable, c’est simplement du bon sens.

Hébergement

ADOPTEZ UN HÉBERGEMENT VERT POUR VOTRE SITE WEB !

Pour poursuivre votre démarche écoresponsable, il convient de choisir un hébergement vert. Retrouver notre benchmark sur cet article pour pouvoir faire le meilleur choix 🙂

Consultation

Après le visionnage de ces vidéos, vous n’allez plus regarder votre écran de la même manière 🙂 Je tiens à préciser que les moteurs de recherche Lilo et Ecosia ne sont pas des low-tech. C’est juste une sur-couche de Google. En d’autres termes, ils utilisent Google pour fonctionner. Néanmoins, l’idée de planter des arbres pour compenser la dépense énergétique est une super bonne idée. C’est ce que propose l’entreprise ForestAction.
Wexample Labs va bientôt avoir sa petite forêt dans la Creuse.

Fin de vie

Il y a peu de chose à dire sur ce sujet si ce n’est : ne laissez plus des sites web obsolètes errer seul sur la toile. S’il n’a plus de sens, télécharger-le sur votre ordinateur. Faites au préalable de belles captures d’écran pour avoir un petit souvenir. Supprimer les fichiers inutiles est une bonne pratique qu’il convient de généraliser avec sa boîte mail et le cloud.

Conclusion

Penser vos projets web d’une manière écoresponsable est une démarche gagnante à tout point de vue.

Des sites web qui remplissent leurs objectifs,
qui sont visités,
et bien référencés.

Des sites web plus rapides,
plus intuitifs,
et qui répondent à un besoin réel.

Wexie Carole
En m’intéressant de plus prêt à la démarche écoresponsable, je n’imaginais pas à quel point la place de la responsabilité vis-à-vis des porteurs de projet et des utilisateurs était importante. Elle m’a conforté sur mes premières intuitions : continuez à faire évoluer notre méthodologie en ajoutant des low-tech à chaque fois que c’est possible. Et surtout continuer à transmettre. Nous devons faire des choix en pleine connaissance des répercussions sur votre activité et sur vos utilisateurs, et les ateliers de co-construction sont établis en autres pour cela.
Carole Lavocat Cheffe de projet web

No comments

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *