Rester connecté et apprendre les uns des autres

L'espace numérique a évidemment ses défis, mais il nous offre également d'incroyables opportunités de se connecter et d'apprendre de façons que nous ne voudrions pas ne pourra pas faire autrement. La situation avec COVID-19 nous a mis au défi d'envisager des façons dont nous pourrions offrir une expérience similaire à SmashingConf et un accès à des experts tout comme dans un atelier en personne – sans avoir à quitter votre bureau.

Avec des plats à emporter perspicaces, des exercices, l'accès à des diapositives, des enregistrements et des questions-réponses amicales, cela a déjà été une expérience incroyable! Des personnes du monde entier ont littéralement collaboré à des exercices de groupe, ce que nous n'aurions jamais pu réaliser avec un événement en personne.

Et nous ne faisons que commencer! Nous avons déjà un programme d'ateliers en ligne prêt pour vous afin que vous puissiez commencer à marquer vos calendriers et nous rejoindre à tout moment. Quelle meilleure façon de renforcer vos compétences en ligne et d'apprendre des informations pratiques et exploitables par des experts de l'industrie – en direct!

Aimez-vous ce que vous voyez, mais avez-vous peur de vous absenter du travail? Eh bien, vous ne pensiez sûrement pas que nous laisserions votre pendaison? Nous savons à quel point cela peut parfois être difficile, et nous avons donc préparé un petit modèle soigné Convaincre votre patron pour vous aider. Bonne chance!

Prêt pour le prochain livre fracassant?

C'est ça! Paul Boag Cliquez! Encourager les clics sans astuces louches est actuellement dans sa phase de production finale et la pré-version commence le 5 mai . Ce guide pratique comprend 11 chapitres remplis de conseils qui peuvent vous aider à commencer à améliorer votre taux de conversion en quelques étapes simples. Vous pouvez souscrire à une remise de pré-commande et être l'un des premiers à mettre la main sur le livre.

Comme pour le livre précédent, des exemplaires imprimés de The Ethical Design Handbook ont fait le tour du monde, et nous avons pu voir quelques réponses heureuses et critiques réfléchies . Si vous souhaitez également une copie, vous pouvez télécharger un extrait PDF gratuit (5 Mo) pour avoir une première impression du livre – nous sommes sûrs que vous ne serez pas déçus!

Aussi , au cas où vous l'auriez manqué, il y a un Smashing Podcast épisode mettant en vedette deux des auteurs du livre: Trine Falbe et Martin Michael Frederiksen . Ils discutent de ce que cela signifie pour un design d'être éthique et comment nous pouvons apporter des améliorations à nos propres projets.

Drew a également interviewé Laura Kalbag Eduardo Bouças Stéphanie Walter et bien d'autres. Vous pouvez vous abonner et régler à tout moment avec n'importe laquelle de vos applications préférées!

Sujets tendances sur SmashingMag

Nous publions chaque jour un nouvel article sur divers sujets d'actualité dans l'industrie du Web. En voici quelques-unes que nos lecteurs ont semblé apprécier le plus et ont recommandé plus loin:

• « Meilleures pratiques avec les crochets React »
  par Adeneye David Abiodun
  Cet article couvre les règles de React Hooks et comment les utiliser efficacement dans vos projets. Veuillez noter que pour suivre cet article en détail, vous aurez besoin de savoir comment utiliser React Hooks.
• " Inspired Design Decisions With Herb Lubalin "
  by Andy Clarke [19659026] Comment pouvons-nous combiner des éléments pour développer des en-têtes puissants et des appels à l'action? Comment utilisons-nous du texte HTML pré-formaté et l'élément de texte en SVG pour un contrôle précis sur le type? Comment optimiser les SVG et rendre le texte SVG accessible? Dans cet article, nous allons explorer cela.
• « Faire des données structurées dans le processus de conception »
  par Frederick O'Brien
  La modernisation de l'optimisation des moteurs de recherche ne vous permet d'obtenir que jusque là. Au fur et à mesure que les métadonnées deviennent plus intelligentes, il est plus important que jamais de les intégrer dans le processus de conception dès le début.
• 19659026] Vous n'avez pas besoin de connaître vos arbres à partir de vos gouttes pendantes. Si vous utilisez Git tous les jours et que vous avez l'impression de jongler, voici quelques trucs et astuces pour vous faciliter la vie.

Meilleurs choix de notre newsletter

Nous serons honnêtes: toutes les deux semaines , nous avons du mal à garder les numéros de Smashing Newsletter à une longueur modérée – il y a juste donc beaucoup de gens talentueux qui travaillent sur des projets brillants! Félicitations à toutes les personnes impliquées!

Intéressé par le parrainage? N'hésitez pas à consulter nos options de partenariat et contactez l'équipe à tout moment – ils seront sûrs de vous recontacter immédiatement.

Conseils pour diriger une télécommande Équipe

Diriger une équipe de conception à distance peut être un peu intimidant, surtout si c'est votre première fois. Heureusement, d'autres personnes se sont retrouvées dans la même situation auparavant et ont développé des stratégies pour maintenir l'équipe productive et efficace, peu importe où tout le monde pourrait être localisé. Mark Boulton en fait partie.

À la lumière des événements récents où de nombreuses équipes doivent passer au travail à distance, Mark en a résumé quelques simples mais utiles approches qui l'ont aidé à diriger des équipes à distance pendant des années. De la poursuite des rituels de votre équipe à la gestion des attentes en matière de disponibilité et au coaching des personnes à travers les hauts et les bas que le travail à distance entraîne, les conseils de Mark ne sont pas difficiles à adopter, mais ils peuvent faire une réelle différence. (cm)

Accès aux poignées avec les unités CSS Viewport

Les unités CSS Viewport nous offrent un moyen de dimensionner les choses de manière fluide et dynamique, sans avoir besoin de JavaScript. Si vous ne vous êtes pas encore plongé dans le sujet, Ahmad Shadeed a écrit un guide utile sur les unités de fenêtres CSS .

Commençant par un aperçu général des unités de fenêtre vw vh vmin et vmax le guide explique comment les unités de fenêtre diffèrent des pourcentages et explore les cas d'utilisation pratiques des unités de fenêtre et comment les implémenter dans vos projets. Juste la poussée dont vous auriez pu avoir besoin pour faire le changement. (cm)

Un meilleur téléchargeur de fichiers pour le Web

Construire un meilleur téléchargeur de fichiers pour le Web. C'était l'idée derrière le téléchargeur d'images JavaScript Uppload . Créé par Anand Chowdhary, le téléchargeur d'images est open-source et peut être utilisé avec n'importe quel backend de téléchargement de fichiers. Et avec plus de 30 plugins, il est également hautement personnalisable.

Les utilisateurs peuvent faire glisser et déposer leurs fichiers pour les télécharger ou les importer depuis une caméra, une URL ou les médias sociaux et plusieurs autres services (il y a même une option pour prendre et télécharger une capture d'écran simplement en entrant une URL). Pendant le processus de téléchargement, les utilisateurs peuvent appliquer des effets aux images et ajuster les filtres comme la luminosité, le contraste et la saturation. Si cela est excessif pour votre projet, vous pouvez sélectionner uniquement ce dont vous avez besoin et faire trembler le reste, bien sûr. Uppload prend en charge les navigateurs jusqu'à IE10. Pratique! (cm)

Plugin Flip Counter Open-Source

Voulez-vous compter à rebours jusqu'à un événement, visualiser une campagne de financement ou afficher une horloge ou un comptoir de vente? Alors le compteur à retournement de Rik Schennink pourrait être pour vous. Le plugin est open-source, convivial pour les mobiles, facile à configurer et il s'en sort sans aucune dépendance.

Outre sa facilité d'utilisation et la flexibilité, Flip brille avec l'animation magnifiquement lisse qui est utilisée pour retourner les chiffres sur les cartes. Selon votre cas d'utilisation, il existe plusieurs préréglages que vous pouvez utiliser comme point de départ pour créer votre compteur à bascule. Le style visuel peut être personnalisé avec CSS. Un joli petit détail. (cm)

Comment écrire un bon code de courrier électronique

Peut-être que vous étiez dans cette situation avant où vous deviez coder un courrier électronique HTML mais que vous aviez des difficultés avec les meilleures pratiques de code de courrier électronique. Pour vous aider à relever le défi, Mark Robbins a mis en place une bibliothèque pour un bon code de messagerie . Vous pouvez simplement copier et coller le code et l'utiliser dans vos e-mails ou vous pouvez en apprendre davantage sur la théorie qui le sous-tend.

La ​​priorité consiste à vous assurer que le code est sémantique, fonctionnel, accessible et répondant aux attentes des utilisateurs, comme le souligne Mark. La cohérence entre les clients de messagerie et la conception parfaite des pixels est également importante, mais toujours secondaire. Un pour les signets. (cm)

Une solution complète pour les info-bulles, les popovers et les listes déroulantes

Si vous cherchez une solution rapide et facile pour les info-bulles, les popovers, les listes déroulantes et les menus, vous voudrez peut-être y jeter un œil à Tippy.js . La bibliothèque fournit la logique et le style impliqués dans tous les types d'éléments qui sortent du flux de votre document et se superposent au-dessus de l'interface utilisateur.

Tippy.js est optimisé pour éviter les retournements et les débordements, il est conforme à WAI-Aria, fonctionne dans tous les navigateurs modernes et, donc la promesse, il offre même des performances élevées sur les appareils bas de gamme. Vous pouvez styliser les éléments avec du CSS personnalisé et TypeScript est également pris en charge. Pratique! (cm)

Outil open-source pour créer des maquettes de produits animées

Que faites-vous lorsque vous manquez un outil dans un but précis? Vous le construisez vous-même. C'est ce qu'a fait Alyssa X lorsqu'elle cherchait un outil pour créer des GIF animés et des vidéos pour présenter un produit. Son point de vue sur le sujet: Animockup .

Avec Animockup, vous pouvez présenter votre produit en action dans une maquette de périphérique. Faites simplement glisser des séquences d'écran dans l'outil basé sur un navigateur et Animockup les place automatiquement dans la maquette souhaitée. Vous pouvez ajouter du texte, des images et ajuster le style, et choisir parmi une sélection de préréglages pour optimiser votre maquette pour le partager sur Twitter, Dribble, Instagram et autres. Un petit assistant utile. (cm)

Créer des dégradés de couleurs CSS avec facilité

La sélection manuelle des couleurs pour créer un dégradé de couleurs nécessite une expérience de conception et une bonne compréhension de l'harmonie des couleurs. Si vous avez besoin d'un dégradé pour un arrière-plan ou pour des éléments d'interface utilisateur mais que vous ne vous sentez pas suffisamment confiant pour vous attaquer à la tâche vous-même (ou si vous êtes pressé), le générateur de dégradé de couleurs que les gens de My Un tout nouveau logo a été créé pour vous.

Propulsé par des algorithmes de dégradé de couleurs, le générateur crée des dégradés bien équilibrés en fonction de la couleur que vous sélectionnez. Il existe quatre styles différents de dégradés qui vont du subtil à un effet nacré et un dégradé de couleurs intense et profond. Vous pouvez ajuster le dégradé avec des curseurs et, une fois que vous êtes satisfait du résultat, copiez-collez le code CSS généré pour l'utiliser dans votre projet. Agréable! (cm)

Diagrammes collaboratifs

Le stylo et le papier sont souvent difficiles à battre lorsque vous souhaitez visualiser une idée avec un diagramme rapide. Si vous recherchez une alternative numérique qui est tout aussi simple et facile à utiliser que vos outils analogiques, vous voudrez peut-être consulter Excalidraw .

Excalidraw est un tableau blanc virtuel sur lequel vous pouvez dessiner. Vous pouvez choisir parmi un ensemble de formes, les connecter avec des flèches ou des lignes, ajouter du texte et de la couleur. Il existe également d'autres options de style, mais l'outil reste assez simple pour que vous puissiez vous concentrer sur ce qui est vraiment important: visualiser votre idée. Une fonctionnalité intéressante qui se révèle particulièrement pratique maintenant que de nombreuses équipes travaillent à distance: vous pouvez partager une session de collaboration en direct avec les membres de votre équipe ou vos clients. Les options d'exportation et d'enregistrement sont également incluses, bien sûr. (cm)

Maîtriser les conventions de dénomination BEM

BEM rend votre code évolutif et réutilisable, l'empêche de devenir désordonné et facilite le travail d'équipe. Cependant, même les développeurs CSS expérimentés éprouvent parfois des difficultés avec les conventions de dénomination. Pour vous empêcher de vous perdre dans le cosmos BEM, les gens de 9elements ont rassemblé le BEM Cheat Sheet avec des suggestions de noms pour certains des composants Web les plus courants: navigation fil d'Ariane, boutons, cartes, listes, onglets, cases à cocher de formulaire, barres latérales, etc.

Si vous souhaitez approfondir encore plus la méthodologie BEM, Luke Whitehouse partage astuces pour résoudre un problème omniprésent dans BEM: petits-enfants c'est-à-dire les éléments qui sont liés à un autre élément, plutôt qu'au bloc lui-même. Luke explore trois approches différentes pour relever le défi: aplatir les petits-enfants et les traiter comme s'ils n'avaient aucun rapport avec leur élément parent, en créant de nouveaux blocs et en étendant la convention de dénomination BEM. Une bonne lecture. (cm)

Une réserve pour les jeux classiques

Vous sentez-vous nostalgique quand vous pensez aux jeux vidéo que vous jouiez dans les années 80 et 90? Eh bien, pourquoi ne pas faire un petit voyage dans le temps où les jeux étaient tout aussi amusants sans les effets fantaisistes avec lesquels ils brillent aujourd'hui?

ClassicReload préserve plus de 6 000 anciens jeux rétro et OD / interfaces abandonnés que vous pouvez jouer directement dans votre navigateur. Vous pouvez rechercher votre favori ou parcourir les jeux par nom, année, genre et plate-forme pour découvrir quelque chose de nouveau. Peu importe que ce soit The Oregon Trail, Prince of Persia ou Dangerous Dave que vous attendez depuis si longtemps, si vous avez un faible pour les jeux, le site vous divertira pendant un bon moment. (cm)

Gestion de HTML DOM et des alternatives jQuery

Comment gérez-vous HTML DOM avec vanilla JavaScript uniquement? Phuoc Nguyen a collecté 100 extraits de script DOM natifs ainsi que des explications sur leur utilisation. Les extraits de code sont étiquetés par niveau de difficulté et varient de basiques (par exemple, détecter si un élément est focalisé) à des tâches plus intermédiaires comme l'exportation d'une table vers CSV et, enfin, des cas d'utilisation avancés comme la création d'un curseur de plage.

En parlant de vanille: si vous utilisez jQuery dans vos projets, il peut être judicieux de vérifier si vous avez réellement besoin de la dépendance supplémentaire ou si quelques lignes de code utilitaire pourraient faire l'affaire. « Vous n'avez peut-être pas besoin de jQuery » répertorie des extraits de code alternatifs utiles qui vous aident à renoncer à jQuery. (cm)

Palettes de couleurs trop descriptives

Avez-vous déjà envisagé de combiner un rose tendre à l'escargot avec de l'acajou non scellé et une pastèque moche comme schéma de couleurs pour votre prochain projet? Eh bien, ce qui peut sembler un peu étrange au premier abord, c'est le concept derrière colours.lol un site d'inspiration chromatique avec des «palettes de couleurs trop descriptives», comme le décrit son créateur Adam Fuhrer.

Créées comme une façon amusante de découvrir des combinaisons de couleurs intéressantes, les palettes sont sélectionnées à la main à partir du bot Twitter @colorschemez . Le flux génère de manière aléatoire des combinaisons de couleurs et fait correspondre chaque couleur avec un adjectif d'une liste de plus de 20 000 mots. Bien sûr, derrière les noms inhabituels se cachent de vraies valeurs hexadécimales que vous pouvez utiliser immédiatement – # FDB0C0 # 4A0100 et # FD4659 dans le cas de rose tendre à l'escargot et ses gars, par exemple. Une couleur amusante. (cm)

Masques SVG à répétition flexibles

Parfois, c'est une petite idée, un petit détail dans un projet avec lequel vous bricolez et que vous ne pouvez pas laisser tomber jusqu'à ce que vous trouviez un sur mesure solution pour y arriver. Rien qui semble être un gros problème à première vue, mais qui vous oblige à sortir des sentiers battus. Dans le cas de Tyler Gaw, ce petit détail était un en-tête flexible avec un petit gribouillis en bas au lieu d'une ligne droite. La torsion: pour rendre le composant à l'épreuve du temps, Tyler voulait utiliser un motif répétitif horizontal transparent qu'il pouvait colorer avec CSS dans n'importe quelle couleur qu'il souhaitait.

Pour faire le travail, Tyler a opté pour des masques SVG répétitifs flexibles . SVG fournit la forme, CSS gère la couleur et mask-image fait le gros du travail en masquant dans le div div sous-jacent qui ne recoupe pas la forme. Une approche intelligente qui peut être utilisée comme base pour des expériences amusantes. (cm)

En signe d'appréciation, Vitaly Friedman a publié ses propres «Smart Interface Design Checklists», un jeu PDF avec plus de 150 questions à poser lors de la conception et de la construction de hamburgers, de carrousels et de tables. Abonnez-vous à la newsletter ci-dessous et recevez-la dans votre boîte de réception immédiatement!

(cm, vf, ra, il)