Frederick O’Brien est un journaliste indépendant qui se conforme à la plupart des stéréotypes britanniques. Ses intérêts incluent la littérature américaine, le graphisme, le développement durable… En savoir plus sur Frédéric ↬
Parfois, ce sont les petites choses de la vie sur le Web qui nous font regarder deux fois. Des carrousels à la documentation en passant par les clauses de non-responsabilité concernant les cookies, voici quelques sites prenant le banal et saupoudrant un peu de magie.
Les bonnes idées de conception Web sont si épaisses et rapides qu'il peut être facile de les manquer si vous ne faites pas attention. Cette série est un petit antidote à cela, rassemblant des éclaboussures d'inspiration qui ont attiré notre attention. Qu'il s'agisse d'une nouvelle fonctionnalité hallucinante ou simplement d'un vieux truc livré avec une nouvelle élégance, ils partagent la qualité de nous faire penser un peu différemment.
J'ai récemment écrit un article louant le travail de Saul Bass dans le monde de conception de sites Web . L'un de ses grands cadeaux était de rendre les moindres détails beaux. C'est dans le même esprit que nous lançons cette série en nous concentrant sur les tendances et les fonctionnalités des sites Web que nous avons pris l'habitude d'être ennuyeuses. Comme vous le verrez, ils n’ont pas besoin de l’être. Le truc est souvent dans l'exécution. À peu près tout peut être beau. Pourquoi viser quelque chose de moins?
Pages dans les pages de Glasgow International
Nous sommes habitués à beaucoup de défilement ces jours-ci, mais le site Web du festival international de Glasgow a trouvé un moyen simple et intelligent de gratter cela démangeaisons tout en gardant les pages courtes:
Sur le bureau, la page d'accueil de Glasgow International aligne ses trois sections principales côte à côte et permet de les faire défiler indépendamment les unes des autres . ( Grand aperçu )
Sur mobile, les trois mêmes sections forment une grande colonne. C'est une solution intelligente à la relation mobile / ordinateur de bureau, et une solution assez élégante également. (Criez au bouton «Support», qui commence à tourner lorsque vous passez la souris dessus.)
Le CSS derrière ceci est convenablement simple. Les trois sections se trouvent à l'intérieur d'un conteneur flexible, les trois partageant les valeurs de overflow-y: auto; et height: 100vh; afin qu'elles s'adaptent toujours à la fenêtre du bureau. La touche vraiment sympa ici est d'utiliser scrollbar-width: auto; pour supprimer la barre latérale. Comme les colonnes occupent tout l'écran, vous déterminez intuitivement le fonctionnement de la page dès que vous déplacez votre souris.
Le carrousel 3D de la page de destination sur la page d'accueil de Kenta Toshikura est si élégant que vous pensez presque qu'il est possible de passer à travers l'écran et dans une autre dimension CSS. ( Grand aperçu )
En cas de doute, la tendance est à des arrangements plats et modulaires, mais peut-être devrions-nous penser en trois dimensions un peu plus souvent. C'est un exemple fantastique de pensée latérale transformant ce qui aurait pu facilement être une colonne de boîtes en quelque chose de vraiment mémorable.
La documentation Stripe est l'enseignant que nous voulons tous
La documentation est trop souvent l'une des premières victimes du mile-a-minute du Web rythme. Ce n’est pas nécessaire. Je n'ai aucun scrupule à appeler la documentation de Stripe belle:
Les instructions sur Stripe.com sont accompagnées d'aperçus de code complets, avec différentes lignes mises en évidence selon la section que vous lisez. ( Grand aperçu )
Je suis sûr que la plupart d’entre nous ont une documentation suffisamment mauvaise pour apprécier les efforts déployés dans cette approche. Une navigation claire et hiérarchique pour le contenu, une copie étape par étape de la taille d'une bouchée et, bien sûr, les extraits de code. Les aperçus dynamiques du code sur plusieurs plates-formes et langages sont au-delà, mais alors pourquoi ne le serait-il pas?
Il y a peu de choses plus précieuses – et plus insaisissables – que des ressources d'apprentissage de qualité. Stripe montre qu'il y a un monde de possibilités en ligne au-delà des mots standard sur une page. J'ai déjà partagé ceci (et je vais le partager à nouveau) mais Write the Doc's documentation guide est une ressource formidable pour présenter du contenu informatif de manière utile et dynamique.
Technicolor Dream de Max Böck [19659003] Il y a énormément de choses à aimer sur le site Web personnel de Max Böck mais pour les besoins de cette pièce, je me concentre sur les jeux de couleurs. La plupart des sites Web ont une seule palette de couleurs.
Un petit nombre, mais de plus en plus, passe à un mode sombre, ce qui porte son total à deux. Max Böck en a dix. ( Grand aperçu )
La lumière et l'obscurité sont la nouvelle norme, mais comme Böck lui-même l'écrit dans son article de blog sur le sélecteur de thème seuls les Siths traitent en absolus. Grâce aux propriétés personnalisées CSS magiques, le site bascule de manière transparente entre les schémas de couleurs . Pour une description complète de son fonctionnement, je recommande vivement de lire l'article complet lié ci-dessus. Et pour en savoir plus sur les propriétés personnalisées, Smashing en a aussi beaucoup:
Les thèmes sont nommés d'après les pistes Mario Kart 64 si vous vous posez la question. Sauf Hacker News. Il porte le nom de Hacker News avec la merveilleuse touche d'ajouter «considéré comme nocif» à la fin de chaque titre de billet de blog Böck. parle simplement de la fluidité des sites de nos jours . Le même travail de base pourrait vous permettre d'ajuster les couleurs en fonction de l'endroit d'où les internautes visitent le site, par exemple.
Overpass Sells Sales
Les ventes ne sont pas exactement un secteur qui crie l'innovation, mais le crédit là où le crédit est dû. Les carrousels de Overpass rebondissent, rétrécissent et se dilatent si facilement que vous avez presque l'impression d'interagir avec quelque chose de tactile, comme un élastique.
Ici, les fonctions CSS touch-action et translate3d () CSS sont utilisées à bon escient, rendant les cartes contenant quelque chose qui peut être efficacement déplacé sur l'écran. Dans le cas où le conteneur est saisi, toutes les cartes utilisent l'échelle (0,95) pour reculer très légèrement jusqu'à ce que l'utilisateur lâche prise. Cela donne au carrousel une belle sensation de profondeur et de légèreté.
Les clips audio sont agréables. L'intégration multimédia a été un thème récurrent dans ces exemples. Posez toujours les bases de l'accessibilité, mais soyez audacieux. À ce stade, les seules vraies limites sont celles de notre imagination.
Le commerce électronique rencontre la longue narration sur Mammut
De Steve Jobs à Seth Godin, on dit souvent le marketing est un jeu de narration . C'est quelque chose que beaucoup de sites Web de commerce électronique semblent avoir oublié, chaque page servant page après page de produits brillants flottant devant des arrière-plans blancs parfaits. Vous pouvez presque entendre le bruit de succion des entonnoirs de conversion qui tentent de vous attirer.
C'est rafraîchissant alors de voir une entreprise comme Mammut se lancer dans la narration pour vendre ses produits de randonnée. Leurs articles d'expédition au format long sont aussi immersifs que les plus beaux New York Times avec des clips audio, des cartes et, naturellement, des photographies époustouflantes. Les équipements Mammut sont bien sûr très présents, mais ils sont faits d'une manière qui est de bon goût. Plus important encore, c'est authentique .
Mammut place l'expérience humaine au premier plan. Oui, ils veulent toujours vous vendre des trucs, mais ils veulent aussi célébrer les aventures dans lesquelles ces trucs peuvent faire partie. ( Grand aperçu )
Bien qu'il y ait un style super élégant ici, ce n'est pas la raison pour laquelle je l'ai inclus. D'une certaine manière, il est incroyable de voir à quel point une grande partie du Web est impersonnelle ces jours-ci, le commerce électronique étant un contrevenant particulièrement flagrant.
C'est le genre de chose que les gens partageraient même s'ils n'avaient aucun intérêt à acheter du matériel d'alpinisme. C’est un contenu superbe. Les publications d'influenceurs d'Instagram ressemblent à un jeu d'enfant par rapport à cela. Ces invites de magasinage vous mènent-elles à la caisse de commerce électronique propre et grinçante susmentionnée? Naturellement. Mais, par Dieu, ils le gagnent. Tout le monde n'a pas les ressources pour quelque chose d'aussi avant-gardiste, mais cela montre que le commerce électronique ne doit pas être stérile et sans vie .
Axeptio rend ses cookies savoureux
Vous ne pouvez pas vous balancer un chat sans frapper un avertissement pop-up ces jours-ci. C’est donc bizarre qu’un si grand nombre d’entre eux soient si laids. Le plus souvent, ils se sentent cloués et sans grâce. Maintenant, pour être honnête, c'est parce qu'ils sont cloués et sans grâce, mais certains sont vraiment là pour améliorer votre expérience de navigation ™.
Au lieu de traiter son cookie pop-up comme une mauvaise odeur, Le fournisseur de solutions de consentement Web Axeptio parcourt le chemin en leur donnant un aspect élégant et même plutôt charmant. Avec GDPR (et décence de base ) à réfléchir, il est essentiel d'intégrer la conception éthique dans le tissu d'un site Web.
Axeptio montre un excellent exemple de transparence des données. Pas de murs de jargon juridique, pas de système de désinscription quasi-impossible – juste des informations claires sur l'utilisation des données. ( Grand aperçu )
Une touche intéressante est qu'il n'apparaît pas tant que les utilisateurs ne commencent pas à se déplacer sur le site. Pourquoi déranger les gens s'ils ne sont même pas intéressés par le contenu? Notez également qu'ils ont abandonné le jargon standard du cookie en faveur de quelque chose de plus conversationnel.
Certes, cela ne rend peut-être pas exactement le banal «extraordinaire», mais cela en fait un beaucoup plus classe . C’est une petite touche, mais qui fait une excellente première impression. Sans même regarder la police de caractères pour le moment, j’ai déjà le sens de l’attention d’Axeptio au détail et de son engagement envers la qualité. Une fenêtre contextuelle "Nous nous soucions de votre vie privée" aurait donné une impression très différente.
En ce qui concerne les cookies et les fenêtres contextuelles, nous pouvons tout aussi bien les posséder. La même chose s'applique aux autres agrafes non sexy du Web moderne. Les formulaires de consentement légal, les inscriptions par e-mail et les pages de confidentialité doivent-ils être laids et évasifs, ou devons-nous simplement penser un peu différemment ? Partagez vos impressions ci-dessous!
(vf, yk, il)