Ressources communautaires, bulletin hebdomadaire et renforcement des compétences en ligne

À propos de l'auteur

Jonglant entre trois langues au quotidien, Iris est connue pour son amour de la linguistique, des arts, du web design et de la typographie, ainsi que pour sa mine d'or de…
En savoir plus sur
Iris
…

L'amélioration est une question de constante, continue itération. Si vous êtes dans le coin depuis un bon moment, vous savez que Smashing a subi un bon nombre de changements dans le passé: un nouveau design, une nouvelle mise en page, une nouvelle pile technique, et bien plus encore. Pourtant, cela a toujours été fait avec un contenu de qualité à l'esprit.

Par exemple, nous avons récemment réorganisé la barre de navigation en haut de la page – avez-vous remarqué? Regardez de plus près et vous trouverez des guides soigneusement organisés sur les principaux sujets traités dans le magazine, les conférences et ailleurs. Chaque guide rassemble le meilleur que nous ayons sur ce sujet, pour vous aider à explorer et à apprendre. Et en parlant de guides, nous venons de publier un guide SEO complet plus tôt dans la journée!

En plus de nos guides, livres imprimés, livres électroniques et magazines imprimés, nous sommes ravis d'avoir un autre ajout à nos joyaux incroyablement précieux : rencontrez nos toutes nouvelles listes de contrôle des modèles de conception d'interface . Le co-fondateur de Smashing Magazine, Vitaly Friedman, rassemble, organise et peaufine chaque liste de contrôle depuis des années – nous sommes convaincus que ce jeu de cartes s'avérera toujours utile lors de la conception et de la construction de tout composant d'interface . Vraiment.

Si vous souhaitez (virtuellement) rencontrer Vitaly lui-même et vous plonger plus profondément dans les éléments des modèles de conception d'interfaces intelligentes, vous pouvez assister à son prochain atelier en ligne sur Modèles de conception d'interfaces intelligentes ( Édition 2020) où vous explorerez des centaines d'exemples pratiques sur des sessions en direct de 5 × 2,5 heures.

Veuillez noter que les cartes sont actuellement uniquement disponibles au format PDF – nous faisons notre mieux vaut les imprimer dès qu'il est possible de les expédier dans le monde entier!

Prochains événements en ligne: à bientôt?

Avec encore autant d'émotions COVID-coaster, nous sommes très tristes de la situation actuelle et de ne pas pouvoir vous rencontrer en personne, alors nous avons décidé de déplacer tous nos événements physiques pour 2020 en ligne afin de rester en contact avec notre chère et précieuse communauté.

Malgré les circonstances, nous sommes fiers d'avoir autant d'orateurs brillants à bord , et pour tirer le meilleur parti de tout cela, vous n'avez même pas besoin de voyager pour les rencontrer. Nous promettons donc de créer autant que possible le même sentiment communautaire, mais depuis votre propre domicile (bureau).

• SmashingConf Live (20-21 août)
  Un événement plein de sessions interactives et en direct par une série de conférenciers inspirants et compétents.
• SmashingConf Freiburg Online (7–8 septembre)
  Notre conférence «ville natale» est maintenant mise en ligne et ouverte à tous! [19659021] SmashingConf Austin Online (13-14 octobre)
  Nous avons combiné les événements initiaux d'Austin et de New York qui auront lieu dans un fuseau horaire adapté à tous.
• SmashingConf San Francisco Online ( 10–11 novembre)
  Deux jours complets de front-end, d'UX et de tout ce qui nous relie et nous aide à nous améliorer dans ce que nous faisons.

Pour la conférence, nous utilisons Hopin . Il s'est avéré être la meilleure option en termes de qualité, de fiabilité et d'accessibilité, avec un espace d'accueil et de réseautage, des stands de sponsors et des séances en petits groupes. Pour participer, aucune installation n'est nécessaire! Avant l'événement, nous vous enverrons un lien magique, afin que vous puissiez vous lancer directement dans la conférence.

Apprentissage et réseautage, à la manière fracassante

Nous savons que tout le monde est occupé – et peut même avoir des cours à la maison et d'autres choses à comprendre en plus de cela – nous voulons donc vous soutenir sans perdre votre temps précieux. Nous avons réparti nos ateliers en segments de 2,5 heures sur plusieurs jours et semaines afin que vous puissiez apprendre à votre rythme et à votre rythme ( matériel d'atelier et enregistrements inclus! ).

Veuillez consulter nos réductions groupées si vous souhaitez assister à plusieurs ateliers – vous pouvez économiser jusqu'à 100 $ US et avoir un peu plus à dépenser en crème glacée! ?

D'ailleurs, au cas où vous réfléchiriez à deux fois à participer à des ateliers Smashing parce que vous craignez que votre patron ait besoin juste un peu de persuasion, alors nous sommes là pour vous avec un petit modèle soigné: Convince Your Boss . Bonne chance!

Podcast bimensuel: plein d'inspiration et de perspicacité

Un mardi sur deux, Drew McLellan parle à des experts en conception et en développement de leur travail sur le Web. Vous pouvez vous abonner via votre application préférée pour obtenir de nouveaux épisodes dès qu'ils sont prêts.

Pssst. Au fait, y a-t-il un sujet que vous aimeriez entendre et en savoir plus? Ou peut-être que vous ou quelqu'un que vous connaissez aimeriez parler d'un sujet lié au Web et au design qui vous tient à cœur? Nous aimerions recevoir de vos nouvelles! N'hésitez pas à nous contacter sur Twitter et nous ferons de notre mieux pour vous répondre dans les plus brefs délais.

Pleins feux sur l'accessibilité et le prototypage

Marquez vos calendriers! Nous aurons le grand plaisir d’accueillir Chen Hui Jing et Adekunle Oduye sur notre scène virtuelle Smashing TV. Si vous souhaitez y assister, vous devrez installer le Zoom client for Meetings disponible pour tous les principaux systèmes d'exploitation. (Le téléchargement et l'installation peuvent prendre un peu de temps, veuillez donc le prendre à l'avance si vous le pouvez.)

• « Accessibility With (out) Priorities » le 1 septembre (14h00 heure de Londres)
  Hui Jing abordera les raisons pour lesquelles c'est le cas et discutera des stratégies pour convaincre les clients et les patrons de continuer à «investir» dans l'accessibilité.
• « The Good, The Bad And Ugly Of Prototyping »le 1er octobre (19:00 heure de Londres)
  Adekunle partagera des techniques sur l'efficacité et l'efficacité du prototype, comment créer un cadre pour le prototypage qui s'intègre dans votre et comment utiliser un prototype pour la production.

Sujets tendance sur Smashing Magazine

Nous visons à publier chaque jour un nouvel article consacré à divers sujets d'actualité sur le Web industrie. Vous pouvez toujours vous abonner à notre flux RSS pour être parmi les premiers à lire le nouveau contenu publié dans le magazine.

Voici quelques articles que nos lecteurs ont le plus appréciés et ont encore recommandé au cours du mois dernier:

Smashing Newsletter: Meilleurs choix hebdomadaires et nouvelles

Intéressé par le parrainage? 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.

L'État Des choses en 2020

Avec tant de choses qui se passent sur le Web chaque jour, il est difficile de garder une trace, mais il est encore plus difficile de faire une pause pendant un moment, et de jeter un coup d'œil détaillé sur où nous en sommes actuellement. Heureusement, il existe de nombreuses enquêtes et rapports rassemblant des développements spécifiques en un seul endroit. State of CSS et State of JS mettent en évidence des tendances communes en CSS et JavaScript. Il existe également des études sur Design Systems in 2019 Front-End Tooling et Open Source Security .

Il est bon de savoir où vous en êtes non seulement en termes de compétences, mais aussi en termes de salaires: c'est là que Levels.FYI Salaires aide, ainsi que ] Salaires UX Designer et Design Census 2019 . De plus, assurez-vous de passer en revue State of Remote Work 2020 qui met en évidence les tendances pour rendre le travail à distance plus efficace. Un mot d'avertissement: certains d'entre eux peuvent être biaisés en raison des données démographiques qu'ils ciblent, alors prenez les informations avec un grain de doute.

Plonger dans les vocabulaires HTML et CSS

Si vous vous trouvez souvent à la recherche du mot correct à utiliser pour cette chose particulière dans votre code CSS et HTML, nous sommes sûrs que vous mettrez immédiatement en signet les ressources suivantes. Grâce à Ville V. Vanninen vous pouvez désormais apprendre la différence entre les doctypes, les noms d'attributs, les balises, les fonctionnalités multimédias – le tout de manière interactive.

]

Vous trouverez une jolie liste interactive de termes CSS ainsi qu'un autre utile dédié au vocabulaire HTML où vous pouvez cliquer sur l'un des termes affichés sur le côté droit pour mettre en évidence les parties pertinentes de l'exemple de code présenté sur la page. Les listes sont également disponibles en différentes langues .

Conseils pratiques pour renommer un produit

Renommer un produit? Et quel est le bon moment pour le faire? De nombreuses personnes se posent ces questions à mesure que leur produit devient plus mature. L'équipe d'Overflow était dans la même situation il y a quelque temps.

Pour refléter l'évolution de leur produit, qui est devenu facile à utiliser et pratique outil de diagramme de flux dans un outil utilisé pour la communication de conception et les flux de travail de présentation, ils ont décidé qu'il était temps de changer de marque. Dans l'article « Evolving the Overflow Brand », ils partagent leur approche et ce qu'ils ont appris en cours de route. Des idées intéressantes et des points à retenir que vous pouvez intégrer dans votre propre processus de refonte. Un défi qui contribue particulièrement à rendre le défi plus accessible: considérez votre produit comme un être humain et imaginez à quoi il ressemble et comment il se sent pour visualiser la nouvelle identité de votre marque.

Boutons désactivés et comment faire mieux

" Les boutons désactivés sont nulles. »C'est une déclaration forte que fait Hampus Sethfors contre ce modèle d'interface utilisateur répandu. Comme le fait valoir Hampus, les boutons désactivés nuisent généralement à l'expérience utilisateur, provoquant de l'irritation et de la confusion lorsque rien ne se passe lorsqu'un bouton comportant un mot d'action comme «Envoyer» est cliqué. Mais ils n'empêchent pas seulement les gens d'accomplir des tâches avec le moins d'effort possible, les boutons désactivés créent également des barrières pour les personnes handicapées – en raison de problèmes de faible contraste et des technologies d'assistance incapables de naviguer vers les boutons désactivés. Maintenant, comment pouvons-nous faire mieux?

Hampus suggère de garder les boutons activés par défaut et d'afficher un message d'erreur lorsqu'un utilisateur clique dessus. Si vous souhaitez indiquer qu'un bouton est désactivé, vous pouvez utiliser CSS pour le rendre un peu grisé (compte tenu du contraste, bien sûr), mais gardez-le activé et concentrez-vous sur un message d'erreur significatif. Un petit détail qui fait la différence.

Le bouton «Retour» UX

Nous passons souvent un peu de temps à obtenir une fonctionnalité parfaite ou à améliorer le design avec des fonctionnalités interactives audacieuses. Nous mesurons l'impact de nos décisions dans des tests A / B, étudions la conversion et les taux de clics, analysons le trafic et recherchons les problèmes courants d'entonnoir. Mais les données ne véhiculent qu'une partie de l'histoire . Le plus souvent, les clients ont des problèmes très différents, souvent sans rapport avec nos fonctionnalités ou notre conception.

La qualité d'une expérience se manifeste dans des situations où quelque chose se passe de façon inattendue . Que se passe-t-il lorsque le client recharge accidentellement la page au milieu d'une commande, par exemple lors du défilement vers le haut et vers le bas sur un téléphone mobile? Le formulaire de paiement est-il effacé lorsqu'un utilisateur remarque une faute de frappe sur un nom sur une page d'avis? Que se passe-t-il lorsqu'un client clique sur le bouton "Retour" dans un processus en plusieurs étapes dans notre application à page unique?

En fait, le comportement inattendu du bouton «Retour» a souvent de graves problèmes d'utilisabilité, et certains d'entre eux sont mis en évidence dans l'article de Baymard Institute Design Patterns That Violate «Back» Button Expectations . Cela vaut la peine de tester le bouton «Retour» pour les superpositions, les lightboxes, les liens d'ancrage et les sauts de contenu, le défilement infini et le comportement de «charger plus», le filtrage et le tri, les accordéons, l'extraction et l'édition en ligne.

Nous pouvons utiliser l'API HTML5 History, ou spécifiquement history.pushState () pour invoquer un changement d'URL sans rechargement de page. L'article entre dans les détails en mettant en évidence les problèmes courants et les solutions pour faire les choses correctement. Cela vaut la peine d'être lu et mis en signet, et d'y revenir de temps en temps.

Solutions CSS modernes pour les anciens problèmes

En ce qui concerne la mise en page et le style, certains problèmes continuent d'apparaître dans tous les autres projets – les cases à cocher et les boutons radio de style, fluide échelle de type, styles de liste personnalisés ou navigation dans la liste déroulante accessible.

Dans sa série, Modern CSS Stephanie Eckles plonge dans les solutions CSS modernes pour les anciens problèmes CSS, en examinant de plus près chacun d'entre eux et en explorant les techniques les plus fiables pour que les choses fonctionnent bien dans les navigateurs modernes. Stephanie fournit également des démos et des extraits de code prêts à être utilisés. Une série fantastique qui vaut la peine d'être consultée et à laquelle vous pouvez vous abonner!

Fun With Forms

Les formulaires Web sont littéralement partout – des formulaires d'abonnement aux filtres et tableaux de bord, mais ils ne sont pas faciles à obtenir. Comment traitons-nous la validation en ligne? Où et comment afficher les messages d'erreur? Comment concevons-nous et construisons-nous des contrôles de saisie semi-automatique? Pas étonnant qu'il n'y ait pas de pénurie de ressources sur la conception de formulaires – et il y en a quelques nouveaux qui sont apparus récemment.

Geri Reid a collecté Form Design Guidelines avec les meilleures pratiques, des informations de recherche, des ressources et des exemples. Dans Fun With Forms Michael Scharnagl rassemble quelques faits obscurs et des choses amusantes à faire avec les formulaires. Adam Silver a beaucoup écrit sur les meilleures pratiques en matière de formulaires Web dans son blog – et a également publié un système de conception de formulaires Web . Enfin, Heydon Pickering a encore quelques modèles de composants inclusifs pour les formulaires dans son blog. Toutes les ressources formidables dont vous devez tenir compte lors de la conception ou de la création de formulaires – pour nous assurer de ne pas commettre d'erreurs coûteuses sur toute la ligne.

Un soulignement CSS uniquement, animé et enveloppant

Les soulignements sont difficiles, surtout si vous voulez faire quelque chose qui va au-delà du bon vieux ' texte-décoration: underline . Inspiré par un effet de survol qu'il a vu dans le lien souligné sur le blog de Cassie Evans, Nicky Meulemann a décidé de créer quelque chose de similaire: un soulignement coloré avec un effet de survol où la ligne se retire et est remplacée par une ligne de couleur différente .

La torsion: les lignes ne doivent pas se toucher pendant l'animation et, surtout, les liens qui s'enroulent sur de nouvelles lignes doivent avoir le soulignement sous toutes les lignes. Si vous souhaitez suivre étape par étape la procédure, assurez-vous de consulter le didacticiel de Nicky .

Guide de configuration d'un flux de travail de développement sur Mac

Configuration d'un environnement de développement sur un un nouvel ordinateur peut être déroutant, pas seulement si vous êtes nouveau dans la programmation. En collaboration avec des contributeurs de la communauté Web, Sourabh Bajaj a publié un guide complet qui vous aide à faire le travail facilement.

Le guide est une référence pour tous ceux qui souhaitent mettre en place un environnement ou installer de nouvelles langues ou bibliothèques sur un Mac. De Homebrew à Node, Python, C ++, Ruby et bien plus encore, il vous guide étape par étape à travers tout ce que vous devez savoir pour que les choses soient opérationnelles. Les contributions au guide sont les bienvenues.

(cm, vf, ra)