Vous vous demandez ce qui se passe à Smashing? Eh bien, nous avons été occupés. Voici comment nous avons supprimé les libellés flottants, amélioré les performances sur mobile et lancé une nouvelle série d'articles. Oh, et comment vous pouvez contribuer à Smashing aussi.
Il se passe toujours quelque chose dans les coulisses de Smashing. Au cours des derniers mois, nous avons travaillé continuellement sur les performances du site mais nous avons également supprimé les étiquettes flottantes de nos formulaires, repensé nos messages d'erreur, réorganisé notre Tableau de bord d'adhésion refactorisé et ajusté nos tableaux réactifs et travaillé avec de nouveaux auteurs sur un tas de nouveaux articles qui seront publiés sur le site au cours des prochains mois. Alors, voici votre mise à jour mensuelle Smashing.
Floating Labels Are Gone
Après avoir publié l'article d'Adam Silver expliquant pourquoi les étiquettes flottantes sont une mauvaise idée nous avons vu une énorme discussion sur Twitter et dans les commentaires à leur sujet. Vous pouvez sûrement économiser un peu d'espace vertical avec eux, mais leur coût comporte de nombreux problèmes d'accessibilité et de remplissage automatique . Ironiquement, au moment de la publication de cet article fin février, nous avions encore des étiquettes flottantes utilisées dans la plupart de nos formulaires, et nous voulions savoir si leur suppression nous aiderait réellement à améliorer l'expérience globale sur le site.
Avec les étiquettes flottantes, nous avons rencontré les mêmes problèmes avec le remplissage automatique – encore et encore. ( Grand aperçu )
Nous avons donc supprimé les libellés flottants et repensé les champs de saisie, en plaçant les libellés au-dessus du champ de saisie, comme Adam l'a suggéré. Nous avons également profité de l'occasion pour ajouter quelques ajustements subtils à nos formulaires actuels, et nous y travaillons toujours. Mais le résultat était déjà meilleur.
Aucune étiquette flottante utilisée. La valeur remplie automatiquement semble bien aussi! ( Grand aperçu )
Après quelques jours de raffinements, nous sommes tombés sur des problèmes de style avec le remplissage automatique . Nous voulions ajuster la taille de la police et la police utilisée avec le remplissage automatique avec le : - webkit-autofill CSS pseudo-classe – il correspond lorsqu'un élément a sa valeur auto -rempli par le navigateur – mais il n'est pas pris en charge par une gamme de navigateurs, et a franchement causé pas mal de tracas lorsqu'une valeur remplie automatiquement est validée une fois que le visiteur a quitté un champ de saisie.
En fait, nous avons dû examinez différents cas pour la conception du formulaire:
Que se passe-t-il lorsque aucune donnée n'est fournie du tout?
Que se passe-t-il lorsque nous récupérons les données de localStorage et les connectons automatiquement dans les champs de saisie, mais la saisie automatique n'a pas été activée?
Que se passe-t-il lorsque certaines valeurs sont remplies automatiquement mais d'autres ne le sont pas?
Que se passe-t-il avec la validation en ligne et quand validerons-nous?
Que se passe-t-il si certains champs de saisie remplis automatiquement contiennent des erreurs ? [19659016] Comment les valeurs d'entrée devraient-elles apparaître sur : active et sur : focus ?
Franchement, cela s'est avéré être tout un terrier de lapin, et nous sommes toujours à la recherche de tous ces problèmes pour le moment. Étant donné qu'une grande majorité de nos lecteurs – des gens formidables comme vous – utilisent la saisie automatique, il vaut la peine de passer du temps à concevoir une expérience autour de celle-ci.
Formulaires Web repensés, avec quelques ajustements subtils – et sans étiquettes flottantes. ( Grand aperçu )
Après quelques améliorations, environ 2 semaines après la publication de l'article initial d'Adam, nous avons mis les changements en direct . Nous avons réussi à résoudre de nombreux problèmes d'accessibilité et de mise en page sur mobile simplement en supprimant les étiquettes flottantes. Mais nous ne pouvons pas vraiment dire pour l'instant si cela a eu un impact sur les métriques de l'entreprise – eh bien, nous devrons attendre la sortie d'un gros livre pour voir cela.
Green Scores in Lighthouse on Mobile
Working around l'amélioration des performances était un voyage continu sur SmashingMag pendant un certain temps. À la fin de l’année dernière, nous avons remarqué que nous avions constaté une forte baisse des performances en 2020, nous avons donc retroussé nos manches et nous sommes mis au travail. En changeant la livraison de CSS et JavaScript nous avons atterri dans la zone de score verte pour la plupart des pages du site en vue de bureau; Pourtant, les performances sur mobile étaient encore assez faibles en moyenne entre les scores Lighthouse de 60-70 pour la plupart des articles.
La dernière invite pour une optimisation plus agressive était le "Core Web Vitals" tableau de bord dans la console de recherche Google. Le 19 février, plus de 3590 articles ont été signalés avec un mauvais score CLS (> 0,25) – sur ordinateur et sur mobile. Nous avons d'abord pensé que cela pouvait être lié aux ajustements de la bannière de cookies que nous avons effectués récemment, mais il s'est avéré que c'était une mise à jour de la recherche Google qui semblait nous pénaliser plus agressivement pour un CLS élevé.
Le 19 février, la plupart de nos articles ont atterri dans la zone rouge. ( Grand aperçu ) Plus de 3590 articles – tous signalés comme des pages avec des performances médiocres, malgré toutes nos améliorations au fil des mois. ( Grand aperçu )
Donc nous nous sommes tournés vers Twitter pour demander à la communauté si quelqu'un avait d'autres suggestions sur ce que nous pourrions faire. Les commentaires ont été fantastiques de la part de personnes du monde entier – avec quelques critiques approfondies soumises via les DM de Twiter, et des réflexions générales de personnes sur ce que nous pourrions faire.
Gael Metais a suggéré de sous-ensemble plus agressivement les polices Web et d'examiner les problèmes de mise en cache avec nos fichiers AVIF. Le lendemain, nous avons sous-défini les polices et les avons mises en ligne. Nous n'avons pas pu résoudre rapidement le problème AVIF en raison de la façon dont la gestion des médias fonctionne actuellement, mais Barry Pollard a suggéré de tester si l'utilisation du codage base64 pour les images serait utile.
] L'encodage en base64 semblait être un concept un peu étrange dans le monde de HTTP / 2, mais nous avons décidé de construire un petit prototype pour tester si cela aide. Alors, c'est ça? Oh oui, c'est sûrement le cas.
Nous avons été très surpris par les premiers résultats. Après quelques itérations, nous avons fini par servir nos photos de profil d'auteur LCP d'une manière légèrement alambiquée mais assez efficace:
Si un navigateur prend en charge AVIF, il obtient une chaîne encodée en base64 de l'image AVIF (
Si un navigateur ne prend pas en charge AVIF, il obtient un fichier JPEG (correctement mis en cache),
La négociation du contenu se fait via + srcset dans le navigateur.
Cela ne fonctionnerait que pour les photos de profil de l'auteur LCP sur la page d'accueil et sur les pages d'articles. Pour le moment, environ 35% de notre trafic mobile se fait sur iOS de sorte que ces utilisateurs n'obtiendraient pas les images plus rapidement, mais encoder uniquement une grande image JPEG ou encoder des fichiers AVIF et JPEG serait inutilement bloat HTML que nous voulions éviter.
Nous avons ensuite ajusté notre construction pour générer automatiquement des chaînes de base64 pour les fichiers AVIF pendant la construction (si les images d'auteur sont disponibles en tant qu'images AVIF). Cela nous permet également de le supprimer facilement lorsque nous n'en avons plus besoin.
De plus, nous avons supprimé les doublons et les redondances avec le YellowLab.Tools qui a remanié certains CSS basés sur des rapports de Les outils d'audit CSS et ajusté la configuration de notre liste de navigateurs à réduisent les optimisations pour IE10 et IE11.
Score vert sur mobile, pour la page d'accueil et pour les pages articles. ( Grand aperçu )
Dans l'ensemble, nous avons:
réduit la charge utile des polices Web de 38%,
réduit la taille du CSS critique de 14%,
réduit la taille de JS fichiers de 8%,
a (probablement) augmenté la taille du HTML d'environ 1%,
L'impact était assez perceptible! Pour la première fois depuis des années, nous avons trouvé notre chemin vers la zone de score verte de 90–95 sur mobile tout en effectuant nos tournées autour de 96–100 sur ordinateur . Et cela avec une application React fonctionnant en arrière-plan et de nombreux scripts en arrière-plan.
Encore un peu de travail à faire, en particulier dans le monde JavaScript, mais nous semblons être sur la bonne voie. sur le point de mettre en œuvre f-mods avec l'aimable et généreuse aide de Simon Hearne .
Et le meilleur: tout le mérite revient à l'incroyable communauté ] et des gens généreux, passionnés et gentils qui nous ont envoyé des suggestions et des conseils via Twitter. Pour cela, nous sommes très reconnaissants – c’est la vraie force et la gentillesse des gens de la communauté. Merci! ❤️
Nouvelle série d'articles sur Smashing
Nous n'étions pas seulement occupés par les performances et les optimisations UX. Vous visitez probablement le site à cause des articles que nous publions, et nous avons donc expérimenté quelque chose de nouveau.
En mars, nous avons commencé à travailler sur une nouvelle série d'articles consacrés aux outils et ressources qui peut vous aider en tant que concepteur ou développeur à améliorer votre travail. Vous pourriez les voir comme de bons rafles à l'ancienne, mais nous prenons le temps de préparer des pièces avec des pointeurs que vous pouvez utiliser de temps en temps au fil du temps .
Un aperçu des générateurs CSS, récemment publié ici sur SmashingMag. En action: une cellule organique border-radius .
Nous avons commencé avec des outils autour de CSS, mais attendez-vous à plus de pièces similaires autour de tout le reste du front-end. Nous espérons vous garder sur vos gardes avec eux, alors préparez-vous! Et voici les premiers articles que nous avons publiés jusqu'à présent:
Nous avons également contacté pour inviter de nouveaux auteurs et des gens intelligents comme vous à travailler sur études de cas intéressantes de vos projets en cours. Alors s'il vous plaît contactez-nous si vous avez récemment travaillé sur un projet intéressant et stimulant – que ce soit autour de l'accessibilité, CSS / JS, performances, migration, refactoring ou à peu près n'importe quoi d'autre. Ne vous inquiétez pas si vous n'avez jamais écrit auparavant – nous sommes là pour vous aider et vous guider.
De plus, si vous avez publié un outil open-source et que vous aimeriez attirer davantage l'attention sur celui-ci, s'il vous plaît faites-le nous savoir également et nous serions ravis que vous présentiez votre projet ici dans le magazine. Et, bien sûr, si vous avez des commentaires, laissez les commentaires ici et dites-nous ce que vous en pensez!
Nouveaux ateliers en ligne sur Smashing
Presque un an il y a quelques années, nous avons commencé à organiser nos propres ateliers en ligne et chacun d'entre eux a été une expérience incroyable pour toute notre équipe. Avec de merveilleux participants du monde entier qui se sont réunis pour apprendre ensemble, tant d'idées ont vu le jour – en particulier dans les sessions de conception et de codage en direct.
Voici un bref aperçu des ateliers que nous avons prévus pour le ** les mois prochains **:
Ah, nous avons aussi lots d'ateliers parmi lesquels vous pouvez choisir 3, 5 ou même 10 billets pour les ateliers de votre choix – en cours, à venir ou à venir . N'hésitez pas non plus à vous abonner ici si vous souhaitez être le premier à être informé de l'arrivée de nouveaux ateliers. De plus, vous avez également accès à billets pour les lève-tôt .
Notre rencontre gratuite :: Rejoignez Smashing Meets!
Le 27 avril, vous pouvez rejoignez-nous en direct sur Smashing Meets une rencontre en ligne conviviale et inclusive pour les personnes qui travaillent sur le Web. Cette édition « Actions Speak Louder » propose trois sessions étonnantes où nos experts concevront et coderont en direct – pour aider une ONG incroyable à améliorer son site.
Smashing Meets est gratuit pour tout le monde, alors dites à vos amis et collègues de se joindre à nous! Bien sûr, nous aimerions que vous rejoigniez notre communauté et deveniez membre. Un Smashing Membership commence à seulement 3 USD par mois. Vous avez accès à tous les livres numériques Smashing, aux webinaires et recevez de nombreux cadeaux et des remises amicales sur des événements, des services et des produits. 🎪
Smashing Podcast: Branchez-vous et inspirez-vous
L'année dernière, nous avons publié un nouvel épisode Smashing Podcast toutes les deux semaines, et les commentaires ont été impressionnants ! Avec plus de 56k téléchargements (un peu plus d'un millier par semaine, et de plus en plus!), Nous avons eu 34 invités sur le podcast avec des antécédents différents et donc beaucoup à partager!
Si vous ne voyez pas un sujet que vous aimeriez entendre et en savoir plus, n'hésitez pas à contacter l'hôte Drew McLellan ou contactez-nous via Twitter à tout moment – nous serions ravis de
Et enfin… Notre Newsletter par e-mail de Smashing amical
Avec notre Newsletter de Smashing nous visons à vous apporter informations utiles et pratiques et partager quelques-unes des informations utiles des choses sur lesquelles les gens travaillent dans l'industrie du Web. Il y a donc beaucoup de gens talentueux qui travaillent sur des projets brillants, et nous vous serions reconnaissants si vous pouviez aider à faire passer le mot et leur donner le crédit qu’ils méritent! De plus, en vous abonnant il n'y a pas d'envois de tiers ni de publicité cachée, et votre soutien nous aide vraiment à payer les factures. ❤️
JavaScript, Bundlers, Frameworks
Techniques et outils CSS
Email Productivity and Meetings
Front-End Accessibility
C'est un Wrap!
Ouf, merci d'avoir lu jusqu'à la fin! Nous sommes une petite équipe avec un peu plus de 15 personnes passionnées et dévouées dispersées dans le monde entier, et nous faisons de notre mieux pour vous aider, vous et notre merveilleuse communauté, à vous améliorer dans notre travail. Alors merci d'être resté si longtemps !
Franchement, nous avons hâte de vous voir en ligne et en personne, mais une chose est sûre: nous sincèrement vous apprécions être fracassant mois après mois, et pour cela, nous sommes éternellement reconnaissants. Et bien sûr, nous vous tiendrons au courant de nos mises à jour – c'est sûr! 😉 (Mais vous pouvez toujours vous abonner à notre newsletter aussi!)
Presque un an il y a quelques années, nous avons commencé à organiser nos propres ateliers en ligne et chacun d'entre eux a été une expérience incroyable pour toute notre équipe. Avec de merveilleux participants du monde entier qui se sont réunis pour apprendre ensemble, tant d'idées ont vu le jour – en particulier dans les sessions de conception et de codage en direct.
Le 27 avril, vous pouvez rejoignez-nous en direct sur Smashing Meets une rencontre en ligne conviviale et inclusive pour les personnes qui travaillent sur le Web. Cette édition « Actions Speak Louder » propose trois sessions étonnantes où nos experts concevront et coderont en direct – pour aider une ONG incroyable à améliorer son site.
(cm, il)