Les recommandations Awebsome pour créer une interface utilisateur écoresponsable

Réduire le code HTML et CSS à interpréter par le navigateur web

• Limitez le nombre de gabarits différents pour faciliter la mutualisation et la mise en cache des feuilles de style (CSS). Si une séparation thématique doit apparaître, privilégiez les compositions de couleurs alternatives aux variantes structurelles : leur mise en place est beaucoup plus légère.
• Hiérarchisez les blocs de contenus de façon cohérente (du haut vers le bas, de la gauche vers la droite). Par exemple, ne pas insérer le titre d'une section entre deux de ses paragraphes enfants, même si le message semble clair à la lecture à l'écran une fois mis en forme. Pour des raisons d'accessibilité et de référencement naturel, le HTML serait nécessairement différent du rendu. Et des instructions CSS supplémentaires auraient à décrire ce comportement non naturel.
• Respectez les alignements lorsque vous composez en grilles. Désaxer des éléments par rapport à d'autres requiert en général plus de code structurel (HTML) et de mise en forme (CSS), et c'est encore pire quand ils doivent paraître tout à fait indépendants. Cela demande aussi des précautions pour garantir l'aspect adaptatif global de l'interface utilisateur.
• Assurez-vous de la logique de transformation du contenu entre versions desktop(s) et mobile(s) éventuelles pour limiter les ajustements manuels à apporter (CSS), mais aussi pour préserver la cohérence entre le code source et le rendu à l'écran. Sur un support large, une section constituée de trois colonnes horizontales devrait pouvoir n'en faire qu'une de trois lignes sur un support réduit, où la première brique serait celle de gauche et la dernière celle de droite.
• Limitez les ruptures de styles au sein d'un même bloc (changement de police d'écriture, de couleur, d'alignement...). Chacune de ces ruptures multiplie les éléments enfants requis et accroît leur profondeur d'imbrication. Plus verbeux, le HTML devient dans le même temps plus compliqué à mettre en forme (perte d'efficience des sélecteurs CSS).

Faciliter le rendu et diminuer la quantité de données à transférer

• À défaut d'utiliser les Web Safe Fonts, limitez en nombre les fontes personnalisées (2 à 3 maximum, toutes graisses comprises) et privilégiez celles de type "sans-serif", plus lisibles et plus légères que celles de type "handwriting", à proscrire.
• Limitez en nombre et en dimensions utiles les images et vidéos. Si leur fourniture est à votre charge, composez des médias aux contrastes non forcés et présentant le strict nécessaire d'éléments nets pour ce qui est du réel (effet de bokeh) tout en privilégiant des orientations graphiques de type flat-design pour ce qui ne l'est pas. La taille des fichiers en sera bien inférieure.
• Bannissez autant que possible la présence de médias au-dessus ET à proximité immédiate de la ligne de flottaison (risque de chargement différé prématuré), et donnez à l'utilisateur toutes les clefs pour s'orienter depuis cet espace.
• Limitez la complexité des ombres et dégradés appliqués aux éléments. La capacité du navigateur web à restituer (et à animer) avec fluidité les détails dépend de la puissance du terminal utilisateur. Des abus en ce sens sont susceptibles de dégrader l'expérience utilisateur (saccades, ralentissements), rendre le site ou l'application web inutilisable, et pousser à l'achat de nouveaux équipements.
• Évitez les animations sans plus-value pour l'expérience utilisateur ; pour les autres, favorisez des transformations isolées (sans incidence directe sur les éléments alentour), de dimensions réduites, et de courte durée (inférieure à 300 millisecondes). Les raisons évoquées dans le point précédent s'appliquent ici aussi.
• Limitez la superposition des plans et plus encore les effets de parallaxe. Les motifs évoquées plus tôt sont toujours aussi valables. De plus, créer des chevauchements, qu'ils soient responsives ou non, exige bien du code en plus (HTML + CSS).

Se préoccuper des notions d'accessibilité de base

• Veillez à ce que les combinaisons de couleurs sélectionnées permettent d'obtenir des contrastes conformes au Web Content Accessibility Guidelines (WCAG). Dans le cas contraire, un thème alternatif et conforme doit être proposé à l'utilisateur.
• Ne justifiez aucun texte (le support de la césure est par ailleurs médiocre sur le web). L'alignement à gauche doit s'appliquer par défaut. L'alignement centré peut être utilisé de façon ponctuelle. Enfin, l'alignement à droite ne devrait être employé que sur du texte monoligne.
• Utilisez des fontes lisibles et une taille de police d'écriture d'au moins 16 pixels.
• Donnez aux boutons des dimensions minimales de 44 x 44 pixels et aérez-les s'ils doivent être regroupés.
• Soulignez les liens hypertextes simples.
• Si possible, prévoyez déjà des espaces pour la retranscription textuelle des contenus audio et vidéo, mais aussi pour les images ayant un caractère informatif.

Pour assurer la réussite d'un projet web quelconque, et donc justifier l'existence de ce dernier aux yeux des utilisateurs finaux, il convient d'employer des moyens proportionnés. Comme tout produit, un service numérique induit dans tous les cas des conséquences environnementales ; dès lors, sa frugalité ne devrait pas desservir ses intérêts.