Cette page a été traduite en utilisant l'IA et l'apprentissage automatique.

(Pocket-lint) - mode sombre, jusqu'à récemment, a été la réserve des développeurs et des créateurs professionnels tels que les photographes et les cinéastes.

Mais en 2019, cela a changé. Un certain nombre d'entreprises, d'Apple à Google à Facebook , ont toutes accepté l'idée que tout ne devrait pas être blanc tout le temps et ont commencé à offrir aux utilisateurs la possibilité de choisir un palette de couleurs alternative qui était plus facile sur les yeux tard dans la nuit.

Nous sommes heureux de vous dire que vous pouvez maintenant ajouter Pocket Lint à la liste des entreprises offrant une option de mode sombre lors de la navigation sur le site, et à partir d'aujourd'hui vous pouvez lire vos actualités préférées, commentaires, fonctionnalités, guides d'achat et plus encore en mode lumière ou sombre sur notre site.

Mais pourquoi avons-nous choisi d'ajouter le mode sombre à Pocket Lint, quels sont les avantages, et comment pouvez-vous en profiter vous-même ?

Pourquoi faire sombre ?

Il y a un certain nombre d'avantages dans l'utilisation du mode sombre allant d'être plus facile sur les yeux - en particulier tard dans la nuit, faire des images se démarquer davantage, améliorer la durée de vie de la batterie, et surtout en améliorant l'accessibilité.

Google dit qu'il a trouvé que l'un des plus grands avantages du mode sombre après l'avoir mis en œuvre sur la dernière version d'Android (10) est qu'il peut conduire à une meilleure durée de vie de la batterie.

Apple ne cite pas les gains de performances de la batterie, mais a déjà dit à Pocket-peluche que sa raison d'adopter le mode sombre est due à de nombreux professionnels créatifs qui demandent à l'entreprise d'embrasser l'expérience pour éliminer les distractions.

Apple

Pour Pocket-Lint, la décision d'aller « sombre » était une combinaison de toutes ces raisons, mais aussi à cause d'une demande de l'équipe que c'est quelque chose qu'ils voulaient et que nos lecteurs voulaient aussi.

Travailler dans divers environnements, depuis un bureau pendant la journée ou un avion traversant l'Atlantique, jusqu'à un événement dans un lieu lointain, quelque part dans le monde, c'est compréhensible. L'équipe Pocket Lint passe beaucoup de temps non seulement à regarder un écran sur un téléphone, une tablette ou un ordinateur, mais aussi sur Pocket Lint.

Le mode sombre a été demandé et le défi de la mettre en œuvre a commencé.

Comment ça marche

Nous allons couvrir le processus de conception dans un instant, mais il est intéressant de noter comment cela fonctionne et comment vous pouvez activer le mode sombre.

Ce qui était clair dès le départ, c'est que le mode sombre n'est pas quelque chose qui convient à tous les environnements et à toutes les applications. Ce n'est donc pas quelque chose qui devrait être automatiquement imposé aux visiteurs, qu'ils le veulent ou non. C'est donc l'approche que nous avons adoptée à Pocket-Lint. Vous pouvez complètement ignorer le mode sombre de Pocket Lint si vous le souhaitez et continuer à utiliser le mode lumière comme d'habitude. C'était important.

Le

mode sombre, et le mode lumineux maintenant correspondant, devrait être une préférence de l'utilisateur pour profiter du contenu et non pas quelque chose dont vous n'avez pas le choix.

Certains aiment l'idée des fonds sombres, du texte clair et tout ce qui vient avec le mode sombre, tandis que d'autres le trouvent trop polarisant et trop secouant par rapport à la façon dont ils sont habitués à voir des sites Web.

Avec cela à l'esprit, nous offrons le mode sombre de trois façons distinctes :

  1. Déterminé via le système d'exploitation de l'appareil
  2. Activé via un interrupteur à bascule en haut du site dans la tête de mât
  3. Contrôlé à l'heure de la journée

Le premier a un sens logique. Si vous utilisez le mode sombre à l'échelle du système parce que vous avez opté via les préférences système de l'appareil que vous utilisez, il est possible que vous vouliez voir Pocket peluche en mode sombre.

Le second est conçu pour vous permettre de désactiver le mode sombre si vous ne l'aimez pas, mais aussi pour l'activer si vous n'exécutez pas le mode sombre au niveau du système.

Le troisième, nous pensons, essaie de comprendre les besoins de l'utilisateur sans qu'il ait à s'en soucier eux-mêmes. Le mode sombre est mieux apprécié quand il fait nuit dehors, c'est-à-dire la nuit, et nous avons donc choisi de l'allumer automatiquement de 22h à 7h, même si les paramètres de votre système sont réglés en mode lumière. Nous sommes en mesure de le faire en comprenant le fuseau horaire sur lequel se trouve l'utilisateur et en le définissant en conséquence. Bien sûr, vous pouvez remplacer le réglage si vous le souhaitez par cet interrupteur à bascule très important.

Conception pour le mode sombre

Le mode sombre ne se limite pas à inverser les couleurs du noir au blanc et du blanc au noir.

Chez Pocket-Lint, nous avons examiné un certain nombre de palettes en mode sombre pour analyser ce qui est le mieux non seulement du point de vue de l'accessibilité, mais aussi du point de vue de la lisibilité.

La

documentation sur le web en est encore à ses balbutiements et bien que certaines palettes soient bonnes dans certains environnements, elles ne fonctionnent pas dans d'autres.

Allez « full black » et de longs articles avec beaucoup de mots deviennent fatiguants à lire, tandis que choisir trop clair un gris signifie que les effets de mode sombre sont perdus. Vous devez également tenir compte des couleurs de police et de police, de l'espacement des polices en termes de crénage et de début, ainsi que des éléments tels que des liens hypertexte, des légendes, des crédits d'image et d'autres « meubles de polices » autour de la page.

colorhunt

Le résultat final a été de choisir une palette de couleurs avec une forte influence bleu-gris et turquoise, offrant, selon nous, un mode sombre accessible sur plusieurs niveaux, ainsi que de passer un certain nombre de tests d'accessibilité pour la facilité d'utilisation et la lisibilité.

Pour commencer, nous avons utilisé colorhunt.co. Le site Web simple d'utilisation vous permet de voir différentes palettes de couleurs et comment les couleurs se complètent. C'est une ressource fantastique indépendamment de vos besoins de conception en mode sombre.

Une fois que nous avons choisi une palette avec laquelle nous voulions travailler, nous avons décidé de traduire ces couleurs au design de Pocket-peluches.

Nous avons utilisé la couleur la plus foncée dans la palette comme arrière-plan par défaut et le second plus sombre comme surligneur pour ce fond.

Vous verrez ces couleurs bien en évidence sur nos pages concentréesrécemment conçues. L'utilisation de la couleur ici soulève notre « carte » de la page et améliore considérablement la lisibilité. Nous avons également utilisé la couleur des règles horizontales autour du site pour diviser les listes sur la page d'accueil par exemple.

La réaction intestinale serait d'utiliser la couleur turquoise dans la palette pour les hyperliens, sur un fond clair qui fonctionne bien, mais c'est l'une des erreurs courantes quand il s'agit du mode sombre. Le texte coloré sur un fond sombre ne fonctionne pas.

Pocket-lint

Pour lutter contre cela, nous avons changé le style de lien hypertexte Pocket Lint en un soulignement épais qui met en surbrillance sur le vol stationnaire plutôt que de colorer le mot ou l'expression lié. L'adoption de cette approche rend la tâche beaucoup plus facile à l'œil, et nous l'avons même adopté dans notre thème en mode lumière à l'avenir.

Pour améliorer la lisibilité, nous avons choisi de colorer le texte de la page en blanc cassé/gris clair, la couleur finale dans la palette choisie, plutôt que d'opter pour le « blanc complet ». Cela crée une expérience beaucoup plus douce, et nous croyons qu'elle est beaucoup plus facile à l'œil quand il s'agit de lire.

Oui, le mode sombre est sur les contrastes, mais vous ne voulez pas qu'il soit trop contrasté. Le noir et blanc peut vraiment être très dur côte à côte.

Une fois que nous avons fini le mode sombre, nous avons mis à jour notre nouveau mode lumière. Auparavant le seul mode, pour conserver un style et une éthique de conception cohérents, il devait aussi changer pour correspondre à la même approche et croyances.

Pour Pocket-Lint, cela signifie un nouveau style de lien hypertexte et une nouvelle couleur de police - la couleur la plus sombre de notre nouvelle palette, ainsi que quelques modifications et modifications ailleurs pour garder les choses cohérentes.

Accessibilité

Alors que beaucoup voient simplement le mode sombre comme quelque chose de « cool », il y a un certain nombre de raisons clés pour lesquelles il est réellement bon en termes d'accessibilité aussi. C'était quelque chose que nous voulions nous assurer était l'un des avantages de la mise en œuvre du mode sombre sur Pocket Lint.

Il existe un certain nombre d'outils que vous pouvez utiliser pour tester des couleurs contrastées. Le World Wide Web Consortium est la principale organisation internationale de normalisation pour le World Wide Web et il a un certain nombre de lignes directrices pour rendre le Web plus accessible.

a11y

Les lignes directrices pour l'accessibilité du contenuWeb (WCAG) 2.1, en particulier, couvrent un large éventail de recommandations visant à rendre le contenu Web plus accessible.

S' assurer que les modes lumière et obscurité introduits par Pocket-Lint réussissaient ces tests était de la plus haute importance.

Nous avons donc travaillé avec les lignes directrices pour utiliser des couleurs contrastées pour que tout fonctionne le mieux possible.

Défis en matière de conception

Une fois que nous avons élaboré une palette de couleurs, traduire cela sur le site Web est assez facile, bien que fastidieux.

Pocket-Lint fonctionne depuis 16 ans et c'était donc le bon moment pour ranger et améliorer le code dans le fichier CSS maître. Le fichier CSS est le fichier qui gère tous les styles et mises en page des articles et des pages sur le site donc c'est un gros travail.

Au fil des ans, avec de nombreux développeurs qui ont ajouté et changé le code, il y a eu une tendance à ajouter des styles en fonction de leur apparence - y compris leur couleur. C'est un grand non-non quand il s'agit de mettre en œuvre un design sombre et léger et c'est quelque chose qui, lorsque vous avez une palette de couleurs positive et négative, doit être changé.

Pocket-lint

L' autre défi que nous avions était de décider d'une icône unifiée qui serait utilisée à travers le site pour représenter aux lecteurs qu'ils pouvaient basculer entre le mode lumière et le mode sombre quand ils le voulaient.

Avec le mode sombre encore à ses balbutiements, il n'y a pas encore d'icône unifiée qui est utilisée sur le Web. Ceux qui ont implémenté un mode sombre ont opté pour une gamme d'icônes et de mots différents pour symboliser il ya un choix. Les lunes, les soleils, les ampoules, ainsi que les mots sont tous utilisés avec peu de soin ou d'attention.

Après avoir testé et testé un certain nombre d'icônes différentes avec des membres de l'équipe, de la famille et des amis, nous nous sommes installés sur une icône de croissant de lune qui est solide ou vide selon que le mode sombre est activé ou désactivé. Nous croyons que cela a été le plus sensé et est facile à comprendre, peu importe où vous êtes ou quelle langue vous parlez.

Prochaines étapes

Maintenant, nous avons mis en place le mode sombre sur Pocket-peluches, nous prévoyons de continuer à surveiller comment il est utilisé par les lecteurs et si l'un de nos choix de conception soulève des préoccupations ou des problèmes lorsqu'il est disponible à un public beaucoup plus large.

Écrit par Stuart Miles.