Le mode sombre était, jusqu'à récemment, l'apanage des développeurs et des créatifs professionnels tels que les photographes et les cinéastes.
Mais en 2019, cela a changé. Un certain nombre d'entreprises, d'Apple à Google en passant par Facebook, n'ont pas toutes adopté l'idée que tout ne doit pas être blanc tout le temps et ont commencé à offrir aux utilisateurs la possibilité de choisir une palette de couleurs alternative plus douce pour les yeux tard dans la nuit.
Nous sommes heureux d'annoncer que vous pouvez désormais ajouter une poche de délices à la liste des entreprises proposant le mode sombre lorsque vous naviguez sur le site Web, et à partir d'aujourd'hui, vous pouvez lire vos actualités, critiques, spécifications, achats préférés et plus encore en clair ou en sombre - Mode mode sur notre site Web.
Mais pourquoi avons-nous décidé d'ajouter un mode sombre dans votre poche miam Quels sont les avantages et comment pouvez-vous en profiter vous-même ?
Pourquoi marcher dans le noir ?
L'utilisation du mode sombre présente un certain nombre d'avantages, allant d'être plus agréable pour les yeux - en particulier tard dans la nuit, d'améliorer l'apparence des images, d'améliorer la durée de vie de la batterie et, surtout, d'augmenter l'accessibilité.
Google affirme avoir découvert 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 améliorer la durée de vie de la batterie.
Apple n'a pas cité les bénéfices des performances de la batterie, mais Pocket Juicy a déclaré plus tôt que la cause du mode d'obscurité globale est due aux nombreux professionnels de la création auxquels l'entreprise demande de profiter de l'occasion pour supprimer toute distraction.
Pour une friandise de poche, la décision de devenir "sombre" était une combinaison de toutes ces raisons, mais aussi à cause de la demande de l'équipe pour ce qu'elle voulait et était sûre que nos lecteurs le voulaient aussi.
Travailler dans une variété d'environnements, d'un bureau pendant la journée ou d'un avion volant à travers l'Atlantique à des événements dans des endroits éloignés quelque part dans le monde, c'est compréhensible. L'équipe de Pocket Delicious passe beaucoup de temps non seulement à regarder l'écran de votre téléphone, tablette ou ordinateur, mais aussi à Pocket Delicious.
Le mode sombre a été demandé et des problèmes avec sa mise en œuvre ont commencé.
Comment ça marche
Nous couvrirons le processus de conception dans une minute, mais il convient de noter comment cela fonctionne et comment vous pouvez activer le mode sombre.
Ce qui était clair dès le début, c'est que le mode sombre n'est pas quelque chose qui convient à tous les environnements et à toutes les applications. Par conséquent, ce n'est pas quelque chose qui devrait être automatiquement imposé aux visiteurs, qu'ils le veuillent ou non. Et c'est donc l'approche que nous avons adoptée pour empocher quelques délicieux. Vous pouvez complètement ignorer le mode sombre de poche nippy si vous le souhaitez et continuer à utiliser le mode clair normalement. C'était très important.
Le mode sombre, et maintenant le mode clair correspondant, devrait être la préférence de l'utilisateur pour profiter du contenu, et non quelque chose que vous n'avez pas le choix.
Certains aiment l'idée d'arrière-plans sombres, de texte clair et de tout ce qui vient avec le mode sombre, tandis que d'autres le trouvent trop polarisant et trop dur par rapport à la façon dont ils ont l'habitude de voir des sites.
À cet égard, nous proposons le mode sombre de trois manières différentes :
- Déterminé par le système d'exploitation de l'appareil
- Activé en utilisant le commutateur à bascule en haut du site dans l'en-tête
- Contrôlé par l'heure de la journée
Le premier est logique. Si vous utilisez le mode sombre à l'échelle du système, c'est parce que vous avez décidé de passer par les paramètres système de l'appareil que vous utilisez, vous voudrez donc voir vos bouchées de poche en mode sombre.
Le second est destiné à vous permettre d'activer le mode sombre si vous ne l'aimez pas, mais aussi de l'activer si vous n'utilisez pas le mode sombre au niveau du système.
Le troisième, nous semble-t-il, consiste à essayer de comprendre les besoins de l'utilisateur sans eux, en s'en souciant eux-mêmes. Le mode sombre est mieux fait lorsqu'il fait noir dehors, c'est-à-dire la nuit - et c'est pourquoi nous avons décidé de le mettre en marche de 10h à 7h, même si les paramètres du système sont réglés sur le mode clair. Nous pouvons le faire en comprenant le fuseau horaire de l'utilisateur et en le configurant en conséquence. Bien sûr, vous pouvez remplacer ce paramètre si vous le souhaitez, via cet interrupteur à bascule très important.
Conception en mode sombre
Le mode sombre ne consiste pas seulement à inverser les couleurs du noir au blanc et du blanc au noir.
Dans Pocket-Lint, nous avons examiné un certain nombre de palettes de mode sombre pour analyser laquelle est la meilleure non seulement en termes d'accessibilité, mais également en termes de lisibilité.
La documentation sur le Web en est encore à ses balbutiements et, bien que certaines palettes fonctionnent bien dans certains environnements, elles ne fonctionnent pas dans d'autres.
Passer des articles "full black" et longs avec beaucoup de mots est devenu fastidieux à lire, et choisir un gris trop clair signifie que les effets sombres du mode sont perdus. Vous devez également tenir compte de la couleur de la police et de la police, de l'espacement des polices en termes de crénage et d'interlignage, et des éléments tels que les hyperliens, les en-têtes, les images et d'autres crédits de "meubles de police" sur la page.
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 à plusieurs niveaux, ainsi que de passer une série de tests d'accessibilité et de lisibilité.
Pour commencer, nous avons utilisé colorhunt.co. Le site Web facile à utiliser vous permet de voir les différentes palettes de couleurs et comment les couleurs se complètent. C'est une ressource fantastique, quel que soit votre mode de conception sombre.
Une fois que nous avons choisi la palette avec laquelle nous voulions travailler, nous nous sommes mis à traduire ces tons en un design de poche délicieux.
Nous avons utilisé la couleur la plus sombre de la palette comme arrière-plan par défaut et la deuxième couleur sombre comme surligneur sur cet arrière-plan.
Vous verrez ces couleurs plus en évidence sur nos pages de hub nouvellement conçues. L'utilisation de la couleur ici éloigne notre conception de "carte" de la page et améliore considérablement la lisibilité. Nous avons également utilisé la couleur pour les règles horizontales autour de l'endroit pour paginer les listes par exemple.
La réaction instinctive serait d'utiliser du bleu sarcelle dans la palette d'hyperliens, sur un fond clair, ce qui fonctionne bien, cependant, c'est l'une des erreurs courantes en matière de mode sombre. Le texte en couleur sur un fond sombre ne fonctionne pas.
Pour lutter contre cela, nous avons remplacé le lien hypertexte peluche de style poche par un trait de soulignement épais qui est souligné au survol plutôt que de colorer le mot ou la phrase associé. Cette approche le rend beaucoup plus facile pour les yeux, et nous l'avons même adopté dans notre thème du mode lumière à l'avenir également.
Pour améliorer la lisibilité, nous avons choisi de colorer le texte de la page en blanc/gris clair, la couleur finale de la palette sélectionnée, plutôt que de choisir "full white". Cela crée une expérience beaucoup plus fluide et nous trouvons cela beaucoup plus agréable pour les yeux en matière de lecture.
Oui, le mode sombre concerne les contrastes, mais vous ne voulez pas qu'il soit trop contrasté. Le noir et le blanc peuvent vraiment être très nets côte à côte.
Une fois que nous avons terminé le mode sombre, nous nous sommes tournés vers la mise à jour de notre nouveau mode clair. Auparavant, la seule façon de conserver un style et un esprit de conception cohérents devait également changer pour s'adapter à la même approche et aux mêmes convictions.
Pour Pocket-Lint, cela signifie un nouveau style de lien hypertexte et une nouvelle couleur de police - une couleur sombre dans la nouvelle palette, plus quelques ajustements et modifications ailleurs pour garder les choses cohérentes.
Disponibilité
Alors que beaucoup voient simplement le mode sombre comme quelque chose de "cool", il existe un certain nombre de raisons principales pour lesquelles il est également bon en termes d'accessibilité. C'était quelque chose que nous voulions nous assurer que l'un des avantages de la mise en œuvre d'un mode sombre sur Pocket Tasty.
Il existe un certain nombre d'outils qui peuvent être utilisés pour tester les couleurs de contraste. Le World Wide Web Consortium est la première organisation internationale de normalisation pour le World Wide Web et dispose d'un ensemble de directives pour le compléter dans un endroit plus accessible.
Contenu Web, guide d'accessibilité (groupes) 2.1 , en particulier, couvre un large éventail de recommandations pour rendre le contenu Web plus accessible.
Il est primordial de s'assurer que les modes clair et sombre présentés par les peluches de poche ont passé ces tests.
Et nous avons donc travaillé avec des directives pour utiliser des couleurs contrastées pour que tout soit le meilleur possible.
Les problèmes de conception
Une fois que nous avons développé une palette de couleurs, la traduire sur le site est assez facile, bien que cela prenne du temps.
Pocket Lint fonctionne depuis 16 ans et c'était le bon moment pour ranger et améliorer le code dans le fichier maître CSS. Le fichier CSS est le fichier qui gère tout le style et la mise en page des articles et des pages du site, c'est beaucoup de travail.
Au fil des ans, avec de nombreux fabricants ajoutant et modifiant le code, la tendance a été d'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 des conceptions sombres et claires et quelque chose que vous devez changer lorsque vous avez un schéma de couleurs positif et négatif.
Un autre défi consistait à choisir une seule icône à utiliser sur le site pour indiquer aux lecteurs qu'ils pouvaient basculer entre le mode clair et le mode sombre quand ils le souhaitaient.
Avec le mode sombre encore à ses balbutiements, il n'y a pas une seule icône utilisée sur le Web. Ceux qui ont déjà implémenté le mode sombre ont choisi différentes icônes et textes à symboliser ont le choix. La lune, le soleil, les ampoules et les mots sont utilisés avec un peu de soin et d'attention.
Après avoir conçu et testé plusieurs icônes différentes avec les membres de l'équipe, la famille et les amis, nous nous sommes installés sur l'icône Crescent Moon, quelque chose de solide ou de vide selon que le mode sombre est activé ou désactivé. Nous pensons que c'est le plus logique et facile à comprendre, peu importe où vous êtes ou quelle langue vous parlez.
Prochaines étapes
Nous avons maintenant mis en place un mode sombre sur Pocket-Lint, nous prévoyons de continuer à surveiller la façon dont il est utilisé par les lecteurs et si nos choix de conception causent des problèmes ou des questions lorsqu'ils sont disponibles pour un public beaucoup plus large.
Mode sombre