Charte d’éco-conception Web

Phase de recherche

Pour adopter les meilleures pratiques en matière d’éco-conception web, un travail de veille est nécessaire. Elle nous permet de découvrir de nouvelles techniques, des nouveaux outils mais aussi de prendre connaissance des règles sur l’accessibilité des personnes handicapées.

Expérience utilisateur

Nous privilégions une conception tournée vers l’expérience utilisateur. Nous prenons en compte les besoins du visiteur pour délivrer une interface accessible à l’arborescence réfléchie afin de lui permettre de s’orienter facilement sur le site. Diminuer le nombre d’affichage et les interactions inutiles pour d’obtenir l’information souhaitée permet de réduire le temps que l’utilisateur passe en ligne donc de la ressource.

La conception graphique

Chez Com Together, nous adoptons un web performant, responsable et accessible. Nous nous efforçons de permettre aux utilisateurs d’accéder à l’information de façon fluide et intuitive, en limitant au maximum les fioritures qui pourraient nuire à l’expérience utilisateur mais également à la vitesse du site internet.

Quand cela est possible, nous évitons d’intégrer trop de visuels qui consomment beaucoup de ressources sur les serveurs. Nous privilégions les formats vectoriels qui nous permettent de ne pas dégrader la qualité visuelle et d’alléger par la suite le poids des futures pages lors de la phase d’intégration & de développement.

Mobile First

Nous privilégions une conception « mobile-first ». Cette étape consiste à créer le visuel du site internet en commençant d’abord par sa version mobile. Se concentrer d’abord sur les informations essentielles et nécessaires qui vont être véhiculées à l’utilisateur pour ensuite proposer des contenus additionnels qui seront déclinés sur la version ordinateur.

Cette technique de conception, va permettre également une économie de consommation des données, en priorité sur le smartphone qui, de nos jours avec l’évolution des réseaux (4G, 5G…) incite les concepteurs de sites web à créer des plateformes consommant toujours plus de ressources.

Sémantique web

Chez Com Together, nous nous efforçons d’utiliser la meilleure sémantique possible lors de l’intégration, en utilisant le balisage HTML 5 adapté. Cette sémantique permet de diffuser une information claire et efficace à l’utilisateur, elle permet de donner du sens au contenu de notre page. Nous utilisons le moins de balises possibles pour réduire efficacement le poids de la page envoyée.

Accessibilité

Nous restons vigilants à l’accessibilité des pages pour tous les utilisateurs, par exemple en remplissant les attributs « ALT » des balises image avec le descriptif de l’image pour que les outils destinés aux personnes ayant une défaillance visuelle puisse lire le contenu textuel. Nous essayons de réduire la longueur des pages pour permettre aux déficients moteur par exemple présentant des difficultés avec sa main d’avoir trop à scroller sur le site.

Wordpress sur mesure

Nous proposons à nos clients la solution WordPress. Cette solution open source, est l’une des plus utilisée du web. En effet, WordPress fait tourner environ 45% des sites internet mondiaux. Les utilisateurs et développeurs plébiscitent sa facilité d’administration et de gestion.

Nous créons des thèmes sur mesure pour nos clients en adéquation avec les attentes exprimées et les maquettes réalisées. Notre différence par rapport à d’autres agences web, est que nous utilisons seulement ce dont nous avons besoin. Nous n’utilisons pas de thème proposant des milliers de possibilités, avec des constructeurs de page utilisant beaucoup de ressources. Nous avons fait le choix d’aller à l’essentiel, pour que l’administration soit facile et compréhensible par nos clients, mais également pour réduire considérablement le temps de chargement des différents scripts et pages

Développement

Cette étape est en relation avec l’intégration. Elle permet de créer les fonctionnalités du site internet comme par exemple, un espace membre, un site e-commerce etc.

Lors de la phase de développement, une réflexion en amont permet de définir les fonctionnalités nécessaires et les optimisations possibles pour réduire au maximum les appels vers des services tiers (webservice, flux de données…).

Lorsque cela est possible, nous privilégions les interactions et animations en langage CSS lors de l’intégration plus rapide à charger, sans dépendances et beaucoup moins gourmand en ressources que JavaScript.

Minification du code

Toujours dans un souci d’optimisation, de performance et de respect environnemental, nous minifions notre code afin de réduire le poids des fichiers présents sur le serveur web. Ce processus sert à supprimer les espaces, les sauts de lignes, de fusionner le code sur une seule ligne et donc d’alléger considérablement le poids de la page. Nous nous efforçons de supprimer les styles et scripts inutiles afin de gagner en efficacité et en économie d’énergie.

Mise en cache des données

Lors de la mise en ligne du site internet, nous optimisons le chargement des ressources en utilisant un système de mise en cache. Lorsqu’un utilisateur consulte une page internet, certains fichiers se stockent sur son ordinateur dans un dossier spécifique. Lors de sa prochaine visite, les éléments mis en cache chargent plus rapidement. Cette technique permet également de réduire la charge de trafic du serveur et par conséquent la consommation électrique.

Poids et format des images

Pour délivrer aux utilisateurs des pages toujours plus performantes et respectueuses de l’environnement, nous optimisons avant la mise en ligne, les visuels utilisés sur les pages. Cela comprend une réduction de la taille par exemple où nous avons un format de base en haute définition, nous l’adaptons pour que celui-ci colle parfaitement à son emplacement sur le site.

L’optimisation passe également par le choix de l’extension de l’image. Chez Com Together, nous privilégions l’utilisation du format WEBP qui propose un taux de compression intéressant et permet de diffuser des images avec un poids allégé. Lorsque l’administrateur du site dépose une image sur le site, celle-ci sera automatiquement compressée et convertie en format WEBP pour le site internet. Cela permet encore une fois d’économiser des ressources sur le serveur.

Lazy Load

Afin de ne pas consommer inutilement des ressources, nous mettons en place un système de « chargement paresseux » (ou « lazy load ») qui permet de n’afficher une ressource image que lorsque celle-ci est visible à l’écran.

Data-centers

Dans notre phase de développement de site, nous utilisons un fournisseur d’hébergement alimenté en énergie renouvelables. Les datas-centers de celui-ci sont optimisés afin de consommer le moins d’énergie possible, tout en assurant d’excellentes performances. Les données des sites hébergés sont stockées dans des datas-centers basés en France.