Fini les étiquettes flottantes et les scores de phare vert

Il se passe toujours quelque chose dans les coulisses de Smashing. Au cours des derniers mois, nous avons travaillé en permanence autour des 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 de Smashing.

Les étiquettes flottantes ont disparu

Après avoir publié l'article d'Adam Silver sur les raisons pour lesquelles les étiquettes flottantes sont une mauvaise idée, nous avons assisté à une énorme discussion sur Twitter et dans les commentaires à leur sujet. Vous pouvez sûrement économiser un peu d'espace vertical avec eux, mais le coût de celui-ci a beaucoup de problèmes d'accessibilité et de remplissage automatique . Ironiquement, au moment de publier cet article fin février, nous avions encore des étiquettes flottantes utilisées dans la plupart de nos formulaires, et nous voulions savoir si les supprimer nous aiderait réellement à améliorer l'expérience globale sur le site.

Nous avons donc supprimé les étiquettes flottantes et repensé les champs de saisie, en plaçant les étiquettes au-dessus du champ de saisie, tout 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.

Après quelques jours d'améliorations, 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 la pseudo-classe CSS :-webkit-autofill — elle correspond lorsqu'un élément <input> a sa valeur remplie automatiquement par le navigateur — mais ce n'est pas pris en charge sur un gamme de navigateurs, et franchement causé pas mal de tracas lorsqu'une valeur remplie automatiquement est validée une fois que le visiteur quitte un champ de saisie.

En fait, nous avons dû nous pencher sur différents cas pour la conception du formulaire :

• Que se passe-t-il lorsqu'aucune donnée n'est fournie ?
• Que se passe-t-il lorsque nous récupérons les données de localStorage et les insérons automatiquement dans les champs de saisie, mais que le remplissage automatique n'a pas été activé ?
• Que se passe-t-il lorsque certaines valeurs sont remplies automatiquement , mais pas d'autres ?
• Que se passe-t-il avec la validation en ligne et quand validons-nous ?
• Que se passe-t-il si certains champs de saisie remplis automatiquement contiennent des erreurs ?
• Comment les valeurs d'entrée doivent-elles apparaître sur :active et sur :focus ?

Franchement, cela s'est avéré être un véritable terrier de lapin, et nous examinons toujours tous ces problèmes en ce moment. Étant donné qu'une grande majorité de nos lecteurs - des gens formidables comme vous - utilisent le remplissage automatique, cela vaut la peine de passer du temps à concevoir une expérience autour de cela.

Après quelques ajustements, environ 2 semaines après la publication de l'article initial d'Adam, nous avons mis les changements en ligne . 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 mesures commerciales - eh bien, nous devrons attendre la sortie d'un gros livre pour le voir.

Scores verts dans le phare sur mobile

Travailler autour de l'amélioration des performances a été 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 baisse importante des performances en 2020, nous avons donc retroussé nos manches et nous sommes mis au travail. En modifiant la livraison de CSS et de JavaScript, nous avons atterri dans la zone de score verte pour la plupart des pages du site en mode bureau ; pourtant, les performances sur mobile étaient encore assez faibles , se situant 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 tableau de bord "Core Web Vitals" dans la Google Search Console. Le 19 février, plus de 3 590 articles ont été signalés avec un score CLS médiocre (> 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é.

Nous nous sommes donc 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 des critiques approfondies soumises via les DM de Twiter et des réflexions générales de personnes sur ce que nous pourrions faire.

Patrick Meenan a suggéré de retarder l'installation du service worker, que nous avons implémenté le jour même. Apparemment, le service worker installait et activait avant LCP et provoquait un conflit.

Gael Metais a suggéré de créer des sous-ensembles de polices Web plus agressifs et d'examiner les problèmes de mise en cache avec nos fichiers AVIF. Le lendemain, nous avons sous-ensemble les polices et les avons mises en ligne. Nous n'avons pas pu résoudre le problème AVIF rapidement en raison de la façon dont la gestion des médias fonctionne actuellement, mais Barry Pollard a ensuite suggéré de tester si l'utilisation de l'encodage base64 pour les images aiderait.

L'encodage 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 s'il aide. Alors, l'a-t-il fait? 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 :

 <picture> <source type="image/avif"> <img src="https://.../author.jpg" loading="eager" decoding="async" width="200" height="200" alt=""> </picture>

• Si un navigateur prend en charge AVIF, il obtient une chaîne encodée en base64 de l'image AVIF (aucune demande de navigateur).
• Si un navigateur ne prend pas en charge AVIF, il obtient un fichier JPEG (correctement mis en cache),
• La négociation de contenu se fait via <picture> + srcset dans le navigateur.

Cela ne fonctionnerait que pour les photos de profil d'auteur LCP sur la page d'accueil et sur les pages d'articles. À l'heure actuelle, environ 35 % de notre trafic mobile est sur iOS , donc ces utilisateurs n'obtiendraient pas les images plus rapidement, mais encoder une grande image JPEG uniquement, ou encoder à la fois les fichiers AVIF et JPEG gonflerait inutilement le HTML que nous voulions éviter.

Nous avons ensuite ajusté notre construction pour générer automatiquement des chaînes base64 pour les fichiers AVIF pendant le temps de construction (si les images d'auteur sont disponibles en tant qu'images AVIF). Cela nous permet également de le retirer facilement lorsque nous n'en avons plus besoin.

De plus, nous avons supprimé les doublons et les redondances avec YellowLab.Tools, refactorisé certains CSS en fonction des rapports des outils d'audit CSS et ajusté la configuration de notre liste de navigateurs pour réduire les optimisations pour IE10 et IE11.

Globalement nous avons :

• réduit la charge utile des polices Web de 38 %,
• réduit la taille des CSS critiques de 14 %,
• réduit la taille des fichiers JS de 8%,
• (probablement) augmenté la taille du HTML d'environ 1 %,

L'impact a été assez perceptible ! Pour la première fois depuis des années, nous avons atteint la zone de score verte de 90 à 95 sur mobile , tout en tournant autour de 96 à 100 sur ordinateur . Et cela avec une application React fonctionnant en arrière-plan et de nombreux scripts se déroulant dans les coulisses.

Il reste encore pas mal de travail à faire, en particulier dans le monde JavaScript, mais nous semblons être sur la bonne voie - en plus, nous sommes sur le point d'implémenter f-mods avec l'aide aimable et généreuse de Simon Hearne.

Et le meilleur : tout le mérite revient à l'incroyable communauté et aux 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 aux ressources qui peuvent vous aider en tant que concepteur ou développeur à améliorer votre travail. Vous pourriez les voir comme de bons résumés à 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 .

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 :

• Outils d'audit CSS
• Générateurs CSS

Nous avons également cherché à inviter de nouveaux auteurs et des personnes intelligentes comme vous à travailler sur des études de cas intéressantes à partir de vos projets en cours. Alors n'hésitez pas à nous contacter si vous avez récemment travaillé sur un projet intéressant et stimulant, que ce soit autour de l'accessibilité, du CSS/JS, des performances, de la migration, de la refactorisation ou à peu près n'importe quoi d'autre. Pas de soucis 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, faites-le nous savoir également et nous serions ravis que vous présentiez également votre projet ici dans le magazine. Et, bien sûr, si vous avez des commentaires, n'hésitez pas à les laisser ici et à nous dire ce que vous en pensez !

Nouveaux ateliers en ligne sur le Smashing

Il y a presque un an, 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 se réunissant pour apprendre ensemble, de nombreuses idées ont vu le jour, en particulier lors des sessions de conception et de codage en direct.

Voici un bref aperçu des ateliers que nous avons prévus pour les prochains mois :

Ah, nous avons également des forfaits 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. Aussi, n'hésitez pas à vous inscrire ici si vous souhaitez être le premier à être informé lorsque de nouveaux ateliers arrivent. De plus, vous avez également accès à des billets pour les lève-tôt .

Notre Meet-Up gratuit :: Rejoignez Smashing Meets !

Le 27 avril, vous pouvez nous rejoindre 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 » comprend trois sessions incroyables où nos experts concevront et coderont en direct - pour aider une ONG incroyable à obtenir un meilleur site.

Smashing Meets est gratuit pour tout le monde, alors dites à vos amis et collègues de participer ! Bien sûr, nous aimerions que vous rejoigniez notre communauté et deveniez membre. Un abonnement Smashing commence à seulement 3 USD par mois. Vous avez accès à tous les Smashing Books numériques, aux webinaires et recevez de nombreux cadeaux et des réductions amicales sur des événements, des services et des produits.

Smashing Podcast : connectez-vous et laissez-vous inspirer

L'année dernière, nous avons publié un nouvel épisode de Smashing Podcast toutes les deux semaines, et les retours ont été formidables ! Avec plus de 56 000 téléchargements (un peu plus d'un millier par semaine, et en augmentation !), nous avons eu 34 invités sur le podcast avec des parcours différents et tant de choses à 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 à nous contacter via Twitter à tout moment - nous aimerions avoir de vos nouvelles !

Et enfin… Notre lettre d'information conviviale par e-mail

Avec notre newsletter Smashing, nous visons à vous apporter des informations utiles et pratiques et à partager certaines des choses utiles sur lesquelles les gens travaillent dans l'industrie du Web. Il y a tellement de gens talentueux qui travaillent sur des projets brillants, et nous apprécierions si vous pouviez aider à 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 ou de publicité cachée, et votre soutien nous aide vraiment à payer les factures. ️

JavaScript, Bundlers, Frameworks

• Quel est le bon outil de regroupement ?
• Choisir le bon framework JavaScript
• this contre that
• Recherche d'opérateur JavaScript
• Stratégies de migration vers TypeScript
• La liste de lecture du développeur JavaScript

Techniques et outils CSS

• Que signifie 100 % ?
• Les choses surprenantes que CSS peut animer
• Créer de l'aléatoire avec du CSS pur
• Construire des mises en page robustes et modernes sur une seule ligne
• Audit CSS
• Sélecteurs CSS avancés
• Améliorer le contraste avec une superposition

Productivité des e-mails et réunions

• Encodage des révisions de code avec des échelles de rétroaction
• Prendre du temps pour ce qui compte vraiment
• Améliorer le courrier électronique
• Synchronisez les thèmes de couleur pour votre environnement de développement
• Recueillir les commentaires des clients
• Comment rédiger une offre d'emploi

Accessibilité frontale

• Modaux accessibles
• Onglets accessibles
• Implémentation de la navigation au clavier à l'échelle de l'application
• Rechercher et résoudre les problèmes d'accessibilité
• Prise en charge des préférences utilisateur avec prefers-reduced-*
• Autocomplétion accessible
• Rendre les liens d'icônes accessibles

C'est un Wrap !

Ouf, merci d'avoir lu jusqu'au bout ! 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 apprécions sincèrement que vous fassiez du smash mois après mois, et pour cela, nous vous en 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 !)

Restez fracassant, tout le monde !