Personnalisez-le!

Améliorez l'expérience utilisateur du site Web, en commençant par une accessibilité améliorée et une personnalisation personnalisée. Les améliorations de l'accessibilité élargissent non seulement l'audience et améliorent l'expérience de tous les utilisateurs (pas seulement pour les personnes handicapées), mais apportent également des avantages SEO.

De même, la personnalisation des requêtes de préférence est également un excellent moyen de fournir une expérience personnalisée, ce qui rend les utilisateurs plus à l'aise et plus pratiques.

La requête préférée de préférence prefers-reduced-motion en est un bon exemple. Cette préférence signifie que les utilisateurs préfèrent les expériences Web sans animations sophistiquées et rapides. Vous pouvez écrire des styles qui prennent en charge cette préférence et rédiger des requêtes multimédias pour les utilisateurs qui ne définissent pas cette préférence pour offrir une expérience interactive plus "dynamique".

Une autre préférence à considérer est la préférence du schéma de couleurs de l'utilisateur. Alors que la plupart des sites Web utilisent désormais des thèmes de couleur claire par défaut, ces dernières années, en particulier lors de la navigation sur les pages Web la nuit, la demande de thèmes sombres a été élevée. La fourniture de thèmes personnalisés qui s'alignent sur les préférences des utilisateurs est une autre façon d'améliorer l'expérience utilisateur.

Vous pouvez le faire efficacement en utilisant CSS dans les propriétés personnalisées et en ajustant ces valeurs de propriétés personnalisées à l'aide de la fonction médiatique prefers-color-scheme . Si vous utilisez des valeurs communes telles que l'arrière-plan, le texte et la mise en évidence, vous pouvez mettre à jour toutes les valeurs en un seul endroit.

N'oubliez pas d'utiliser également color-scheme pour obtenir automatiquement quelques conversions de thème du navigateur. La définition de cette propriété indiquera au navigateur quels thèmes de couleur (clairs, sombres ou les deux) sont pris en charge sur la page. À son tour, le navigateur convertira automatiquement les commandes de formulaire et l'interface utilisateur du navigateur (telles que les barres de défilement) sur le thème correct:

Dans cette démo, même si je ne définis pas la couleur du texte pour mon thème de couleur, car j'utilise color-scheme: light dark In :root indique au navigateur que le site prend en charge les thèmes clairs et sombres, il passe automatiquement la couleur de la police du noir au blanc.

Vous pouvez tester votre thème sombre dans le panneau de rendu de Chrome Devtools sans modifier les paramètres du système. Cette image montre le mode sombre du site Web de Houdini.

Un autre avantage de la création de thèmes sombres est d'économiser la puissance de la batterie des utilisateurs. Une étude Pixel 6 Lab a révélé que les thèmes sombres économisent 11% de la consommation d'énergie pour les écrans OLED.

Vous respectez donc maintenant les besoins d'accessibilité de votre utilisateur, les préférences et la durée de vie de la batterie, ce qui est un excellent moyen de rendre votre site Web plus convivial.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!