Ce site web atteint une performance environnementale de rang A. Il a été écoconçu avec des principes de design web low tech, dans une perspective de sobriété numérique.

---

La Chaire Diament veille à limiter son impact environnemental et à développer des services en ligne écoresponsables. Engagée dans l’écoconception web, elle est partisane de la sobriété numérique. Cette dernière commence à être considérée dans le domaine de la cybersanté (Chevance et al. 2020). Toutefois, nous n’avons pas cherché à atteindre les standards les plus élevés d’un site web basse technologie. Nous nous sommes concentrés sur la réduction significative du poids des pages, sans renoncer à nos exigences en termes de design visuel et fonctionnel.

Performance environnementale globale

À l’été 2020, à sa création, le site diament.uqam.ca obtient un score de performance environnementale de rang A (note maximale) dans le calculateur EcoIndex, basé sur les normes européennes. La performance environnementale moyenne de ses pages se situe vers 80%, ce qui le place dans le lot de tête des sites web écoconçus sur l’EcoIndex (si vous voulez essayer vous-même, le résultat pour une même page peut être légèrement variable à chaque test). Le score est particulièrement excellent sur les trois critères de complexité de la page ; bande passante (en moyenne 100 Ko sur la page d’accueil, soit 10 à 20 fois inférieur à la moyenne mondiale) ; et charge serveur. Ce résultat est le fruit d’un travail d’écodesign web présenté plus en détail ci-dessous. Nous avons sûrement encore des progrès à faire, mais nous estimons que c’est un résultat très encourageant, qui ouvre la voie à des pratiques exemplaires dans le domaine de la cybersanté mentale.

Le site obtient également une très bonne performance dans le Website Carbon Calculator.

Hébergement vert

Nous avons bien sûr choisi de faire héberger ce site web par l’Université du Québec à Montréal. Accessible via un sous-domaine du domaine uqam.ca, il est hébergé dans un centre de données canadien exploité par OVH Canada (via WHC) et situé sur la rive sud de Montréal, à Beauharnois, où il est raccordé à la centrale hydroélectrique voisine qui garantit un approvisionnement en énergie verte. Ce centre de données possède un indice d’efficience énergétique parmi les plus élevés au monde (PUE de 1,09).

Design clair et léger

Le design visuel du site favorise la clarté et la légèreté. L’objectif est de soulager la charge mentale, de faciliter la lecture, d’aller à l’essentiel, tout en respectant notre identité visuelle. Cela passe par une mise en page simple et épurée, qui fait la part belle au texte grâce à une police de caractères géométrique et lisible, utilisée de manière généreuse. Le tout est parfaitement responsif et adapté à toutes les tailles d’écran. Merci à Vincent Lapointe.

Thème Susty pour WordPress

Ce site est propulsé par WordPress, afin de conserver toute la facilité d’usage permise par ce logiciel. Toutefois, nous en utilisons une version allégée basée sur le thème Susty WP, un minuscule thème WordPress open source visant à être aussi soutenable que possible, développé par Jack Lenox et disponible sur Github. Nous avons installé Susty et l’avons modifié pour l’adapter à nos besoins, en veillant à ce qu’il demeure parfaitement “responsive”. Merci à Brazhia Duenas.

Images optimisées

Nous avons cherché à utiliser un traitement des images permettant de réduire significativement leur poids sans nuire au design visuel général du site. Chaque image peut être réduite en nombre de couleurs (entre 8 et 15) et tramée lors de l’exportation en PNG-8. La compression est faite de manière à s’assurer que le poids ne dépasse pas la limite que nous nous sommes fixée de 100 Kb par image. Cette technique est inspirée des travaux du Low Tech Magazine et est visible par exemple sur la page de l’équipe. Merci à Vincent Lapointe.

Toutefois, grâce à la légèreté de Susty, nous n’avons pas besoin d’appliquer ce traitement à toutes les images, et ce d’autant plus que cela n’est pas acceptable pour un certain nombre d’images ayant une valeur artistique ou à l’intégrité desquelles nous ne voulons pas porter atteinte.

Typographie affirmée

Nous utilisons la police de caractères DM Sans, disponible sur Google Fonts et chargée à distance via CSS3. Il s’agit de la police de caractères la plus proche de la police Circular, constitutive de notre identité visuelle. Certes, c’est plus consommateur qu’une police “système” mais, pour nous qui évoluons dans le domaine du design, il est difficile de renoncer à la typographie. En outre, grâce à Susty, nous restons très légers et largement plus sobres que la plupart des sites web.