L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Ateliers et audits
Avec la nouvelle année qui approche et les résolutions de tous encore mis à l'épreuve, nous revenons lentement à nos projets quotidiens. Et ce faisant, nous nous concentrons sur les nouveaux objectifs pour 2021: améliorer l'accessibilité, la conversion, l'engagement, la rétention et bien sûr les performances Web . Nous avons tous des objectifs personnels différents pour cette année, mais une chose nous unit tous: améliorer le Web pour tous.
Le temps entre les années est toujours un bon moment pour se calmer; mais c’est aussi un moment merveilleux pour faire de la recherche, de la réflexion, de l’écriture et peut-être même du codage et de la conception non sollicités. Et presque comme s'il s'agissait d'une tradition annuelle (c'est en fait le cas), Vitaly a lu tout ce qui s'est passé dans le front-end en 2021 et a tout compilé dans la liste de contrôle des performances frontales 2021 encore une fois.
Ce guide couvre à peu près tout ce dont vous avez besoin pour créer des expériences rapides sur le Web aujourd'hui – à partir de métriques aux outils et aux techniques et stratégies front-end. Il s'est avéré très utile pour de nombreux lecteurs au cours des dernières années, alors j'espère qu'il vous sera également utile. Vous pouvez également modifier la liste de contrôle ( PDF MS Word Doc et Apple Pages ) et l'ajuster à vos besoins personnels, ou même l'utiliser pour votre organisation .
Maintenant, sans plus tarder, jetons un coup d'œil à ce que l'équipe Smashing vous réserve dans les prochains mois.
Planifiez votre année avec des ateliers en ligne
Avez-vous assisté à l'un des nos ateliers encore? Nous sommes ravis à chaque fois que nous organisons des ateliers pratiques en ligne avec tous les merveilleux participants du monde entier qui se réunissent pour apprendre ensemble. Cela s'est avéré être une excellente occasion de se connecter avec des gens du monde entier et de partager des expériences en direct. Tant d'idées ont vu le jour grâce aux sessions de conception et de codage en direct et de nombreuses personnes ont également trouvé de nouveaux amis!
Ça va encore mieux: nous avons maintenant 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! Choisissez les ateliers en ligne de votre choix – au meilleur prix et aux meilleures dates – pour vous, votre équipe ou votre agence. Aller aux lots d'ateliers .
Nous continuons à travailler sur le programme pour cette année, et il y a d'autres ateliers à annoncer. Faites-nous savoir si vous souhaitez en créer un, contactez-nous sur Twitter DM et nous nous engageons à faire de notre mieux pour y parvenir. 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 .
Nouveau: Audits en ligne fracassants sur le front-end et l'UX
La semaine dernière, nous avons lancé en silence notre nouveau petit produit – audits en ligne – examen vidéo de 30 à 60 minutes avec un rapport écrit de nos résultats. C'est un moyen simple et rapide de valider vos idées et d'obtenir un feedback honnête et impartial (pour l'instant uniquement de Vitaly) sur le front-end et l'expérience utilisateur de votre site Web, application ou maquettes. De plus, des consignes et des points d'action pour faire mieux.
Réservez un audit de votre choix et partagez quelques détails sur votre site Web, votre application ou des maquettes, et nous vous répondrons dans presque pas le temps!
Smashing Podcast: Branchez-vous et inspirez-vous
Cette année, nous avons publié un nouvel épisode Smashing Podcast toutes les deux semaines, et les commentaires ont été géniaux ]! 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 pour héberger Drew McLellan ou entrer en contact via Twitter à tout moment – nous serions ravis de
Restez à l'écoute pour le prochain épisode qui sortira le 26 janvier!
Smashing Newsletter: Best Picks
Avec notre newsletter hebdomadaire notre objectif est de vous apporter des informations utiles et pratiques et de partager certaines des choses utiles 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!
Aussi, 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. ❤️
Intéressé à parrainer? N'hésitez pas à consulter nos options de partenariat et contactez l'équipe à tout moment – ils ne manqueront pas de vous répondre dès qu'ils le pourront.
] Voici quelques-uns des articles de newsletter populaires que nous avons récemment partagés dans notre newsletter:
Compatibilité des polices locales par défaut
Les polices par défaut varient considérablement selon les systèmes d'exploitation. Pour fournir un moyen facile de rechercher les polices par défaut d'un système, en particulier celles qui doivent être disponibles via CSS font-family Zach Leatherman a créé Font Family Reunion .
Le tableau de compatibilité fonctionne comme un Puis-je utiliser pour les polices locales par défaut: Une fois que vous avez entré une font-family il vous dira s'il est pris en charge, ainsi que les cinq familles de polices de mots-clés CSS standard ( serif sans-serif monospace et le moins connus fantasy et cursive ) sont alias dans chaque système d'exploitation. Un pour les signets.
Amélioration des performances des polices Google
Les polices auto-hébergées sont généralement considérées comme l'option la plus rapide lors de l'utilisation de polices Web. Cependant, les polices Google peuvent également être rapides: leur capacité à servir les plus petits fichiers de polices possibles à des agents utilisateurs et des plates-formes spécifiques et leur prise en charge relativement nouvelle de font-display via le paramètre URL & display = swap sont déjà une bonne base. Et, comme le montre Harry Roberts il y a pas mal de choses que vous pouvez faire pour améliorer encore plus leurs performances et atténuer de nombreux problèmes pour lesquels Google Fonts est généralement connu.
Pour son article " Les polices Google les plus rapides ", Harry a parcouru le terrier des tests de performances pour trouver la meilleure combinaison de polices Google rapides: chargement asynchrone CSS, chargement asynchrone des fichiers de polices, activation de FOFT, récupération rapide des fichiers CSS asynchrones et préchauffage des domaines externes. Toutes ces techniques combinées peuvent sembler un peu écrasantes au début, mais Harry conclut son article avec un extrait mince et facile à gérer qui vous aide à tirer le meilleur parti de Google Fonts.
#### Responsive Emails Made Easy
Coding Des e-mails propres et réactifs qui offrent une expérience solide dans tous les clients de messagerie populaires peuvent être un défi de longue haleine. HEML est là pour changer cela. Le langage de balisage open source vous donne la puissance native du HTML sans avoir à gérer toutes les bizarreries de l'e-mail. Il n'y a pas de règles spéciales ou de paradigmes de style à maîtriser, donc si vous connaissez HTML et CSS, vous êtes prêt à commencer.
MJML est basé sur la même idée de simplifier le processus de création d'e-mails réactifs. Le langage de balisage est basé sur une syntaxe sémantique qui simplifie le processus tandis qu'un moteur open source fait le gros du travail et traduit le MJML que vous avez écrit en HTML réactif. Une bibliothèque de composants standard vous fait gagner du temps et allège votre base de code de messagerie. Et si vous souhaitez créer le vôtre, le Guide du système de modèles modulaires peut également vous aider. Prometteur!
Modèles d'e-mails HTML à l'épreuve des balles
Faire fonctionner un e-mail HTML sur tous les clients de messagerie n'est pas une tâche facile. Heureusement, il existe de nombreux outils, modèles et frameworks fiables pour vous faciliter la tâche. Par exemple, Maizzle est un framework qui vous aide à créer rapidement des e-mails HTML avec Tailwind CSS et un post-traitement avancé spécifique aux e-mails. Il fournit également quelques projets prêts à l'emploi (Maizzle Starters) avec lesquels vous pouvez commencer immédiatement.
Cerberus et HTML Email fournit de petites collections de modèles fiables et solides pour les e-mails HTML réactifs qui sont bien testés dans plus de 50 clients de messagerie, notamment Gmail, Outlook, Yahoo, AOL et bien d'autres. EmailFrame.work vous permet de créer des modèles de courrier électronique HTML réactifs avec des options de grille prédéfinies et des composants de base, pris en charge dans plus de 60 clients de messagerie.
Stripo Chamaileon Cartes postales Topol.io et Bee Free proposent de nombreux modèles d'e-mails HTML gratuits, Litmus fournit Modèles d'e-mails réactifs pour newsletters, mises à jour de produits et reçus, et CampaignMonitor a un générateur de modèles d'e-mails HTML gratuit avec la fonctionnalité glisser-déposer.
De dégradés CSS à de fausses données
Imaginez que vous avez juste besoin de trouver CSS styles de triangle pour les éléments et les pseudo-éléments. Ou peut-être affiner un peu la palette de couleurs en explorant les teintes et les nuances d'une couleur donnée. Ou peut-être générer un dégradé CSS linéaire et radial pour une section de la page. Il n'est pas nécessaire de tout faire manuellement ou d'essayer de trouver ces extraits CSS partout sur le Web. Vous pouvez toujours les trouver sur Omatsuri .
Omatsuri signifie festival en japonais, et le site est un joli petit festival d'outils de navigation open source pour un usage quotidien. Sur le site, vous trouverez un générateur de triangles, un générateur de nuances de couleurs, un générateur de dégradés, des diviseurs de page, un compresseur SVG, SVG → convertisseur JSX un faux générateur de données, des curseurs CSS et des codes d'événements de clavier . Conçu et construit par Vitaly Rtishchev et Vlad Shilov. Le code source du site est également disponible.
CSS Shadow Generator
Vous recherchez un outil qui générera automatiquement du code CSS pour des box-shadows vraiment lisses et superposés ]? Eh bien, vous allez adorer SmoothShadow . Inspiré d'un article écrit par Tobias Ahlin Bjerrome cet outil astucieux a été créé pour aider n'importe qui à générer le code dont il a besoin sur place.
Une fois que vous l'aurez essayé, il sera difficile de ne pas l'utiliser. Le petit outil vous permet de concevoir visuellement une ombre de boîte lisse en couches, mais également d'ajuster l'alpha, le décalage et le flou avec des courbes d'accélération individuelles. Et c'est encore mieux: le créateur de l'outil, Philipp Brumm a également publié SmoothShadow en tant que plug-in Figma afin que vous puissiez optimiser votre flux de travail comme vous l'avez toujours voulu !
Comprendre les variables CSS
Les variables CSS sont puissantes. Ils cascade normalement, héritent, permettent de réutiliser du code, et ils sont extrêmement permissifs. Mais que pouvez-vous réellement mettre dans une variable CSS pour utiliser pleinement son potentiel? Comme certaines choses ne sont pas si évidentes, Will Boyd a exploré les possibilités dans un article de blog .
Des valeurs unitaires aux mots-clés prédéfinis, chaînes de contenu, images et même valeurs animées fantaisistes, Le résumé de Will met en lumière les éléments les plus courants que vous pourriez souhaiter utiliser en combinaison avec une variable CSS. Un bon aperçu.
Never Stop Learning
L'apprentissage ne s'arrête jamais. Et comme ce sont souvent les petites informations, les bouts de code et les astuces qui se révèlent les plus utiles, Stefan Judis a lancé « Today I Learned ».
Que ce soit la conscience que les filtres SVG peuvent être intégrés dans CSS ou comment dire aux navigateurs que votre site prend en charge les jeux de couleurs, pour chaque petite chose qu'il a apprise, Stefan partage un bref résumé – non seulement lié au CSS, mais aussi accessibilité, bash, git, GraphQL, HTML, JavaScript et bien plus encore. Les bouts de code de Samantha Ming sont également un trésor de sagesse de développement Web rapide mais inestimable qui ne manquera pas de vous faciliter la vie.
Et c'est un résumé!
Nous vous souhaitons sincèrement une merveilleuse cette fois-ci, pleine de rires, de moments mémorables et d'expériences remarquablement fracassantes. D'une part, nous avons hâte de vous voir en ligne ou en personne, mais une chose est sûre: nous apprécions sincèrement que vous soyez fracassant mois après mois, et pour cela nous vous en sommes éternellement reconnaissants.
Restez fracassant! [19659063] Éditorial Smashing « /> (cm, vf, ra)
Source link