Catégories: Accessibilité, Conférences, HTML / CSS

SmashingConf Freiburg 2022

Les drapeaux de la SmashingConf flottent sur la façade du Historisches Kaufhaus de Freiburg.
Le sublime Historisches Kaufhaus de Freiburg im Breisgau où a lieu la SmashingConf. Photo prise en 2014.

En septembre dernier, j’ai assisté depuis chez moi à la dixième édition de la SmashingConf de Freiburg, dans le sud de l’Allemagne. Retours et notes sur mes conférences coup de cœur de ce très chouette événement.

Évolution des conférences web post-2020: l’approche hybride

La SmashingConf de 2022 était la première depuis trois ans qui se déroulait à nouveau à Freiburg, dans un bâtiment historique emblématique de la vieille ville, après une version 100% en ligne en 2020 que j’avais beaucoup appréciée.

Pour cette dixième édition, la Smashing Team proposé une « petite » nouveauté: nous avions le choix entre assister aux conférence sur place, à Freiburg, ou depuis chez nous grâce à une diffusion en direct via une plateforme de streaming.

Pour ma part, c’est cette deuxième option que j’ai choisie, pour plusieurs raisons.

  • La première: le prix. Le billet pour assister à la SmashingConf depuis le confort de mon canapé coûtait le tiers du billet sur place. Un coût élevé, auquel il aurait fallu ajouter celui du déplacement en train entre Bâle et Freiburg, de deux nuits d’hôtel et des repas pris à Freiburg.
  • La deuxième raison est incluse dans ma phrase précédente: j’apprécie sincèrement de pouvoir assister à ce genre d’événement depuis chez moi, au calme, après avoir dormi dans mon propre lit et mangé un repas cuisiné par mes soins.
  • La troisième raison est d’ordre social: déjà avant la pandémie je ne me sentais pas à l’aise dans les événements qui rassemblaient beaucoup de monde, je vous laisse imaginer ce qu’il en est maintenant.

Je pense qu’on peut également se poser la question de l’impact environnemental de ce genre d’événements, pour lesquels il est courant de faire se déplacer au moins une partie de l’audience à travers le monde. D’autant plus dans le domaine de la tech, n’aurait-on pas intérêt à normaliser le fait de participer à ce type de conférences à distance – y compris pour les intervenant·es ? Peut-on encore seulement se permettre de sauter dans un avion plusieurs fois par année pour un déplacement professionnel de quelques jours, alors que des solutions moins polluantes existent ?

J’avais d’ailleurs beaucoup aimer lire les réflexions de Rémi Parmentier à ce sujet, au retour de la SmashingConf où il était intervenant, après avoir renoncé à donner sa conférence à New York.

L’approche hybride semble se démocratiser dans les événements web et je me réjouis pour ma part de pouvoir assister à davantage de conférences et de workshops sans avoir besoin de me déplacer à travers toute l’Europe, voire plus loin. Ce que je ne faisais d’ailleurs pas: proposer des événements en ligne permet donc probablement aux organisateur·ices de toucher un public beaucoup plus large.


Michelle Barker: Modern CSS layout

On commence avec cette passionnante conférence de Michelle Barker, une véritable CSS-nerd qui nous a présenté quelques très chouettes fonctionnalités récentes et à venir. Je lis régulièrement le blog de Michelle, j’adore analyser ses expérimentations dans CodePen, j’étais donc ravie de pouvoir assister à cette conférence. Son enthousiasme communicatif et ses super démos de code valent vraiment le détour !

Ce que je retiens en particulier de sa présentation:

  • La propriété aspect-ratio qui nous permet enfin de préciser simplement les proportions d’un élément. Particulièrement utile pour les images lorsqu’elle est couplée à object-fit:cover.
  • Les fonctions min, max et clamp, grâce auxquelles on devient moins dépendant des media queries notamment pour définir les tailles de textes ou les espacements.
  • Les container queries, LA nouveauté qui excite tous les adeptes de CSS. Pour ma part j’avoue ne pas m’être encore beaucoup penchée sur la question: cette fonctionnalité a l’air très cool, mais le taux d’usage est encore un peu bas. Ça devrait toutefois s’améliorer rapidement, Chrome, Edge et Safari ont d’ailleurs tous trois implémenté les container queries dans leurs dernières mises à jour – de même que Firefox depuis sa version 110, publiée en février 2023. Un polyfill est également disponible pour les navigateurs moins récents.
  • Subgrid, qui améliore les layouts basés sur display:grid en permettant à un élément HTML d’hériter la grille de son parent.
  • Dernier mais pas des moindres: le pseudo-element :has(), aka le sélecteur parent qu’on attend depuis au moins 15 ans, qui n’est malheureusement pas encore très bien pris en charge par les navigateurs (allez Firefox on se bouge, c’est long 15 ans, ça suffit d’être à la traîne comme ça).

Liens et ressources


Andy Bell: Be the browser’s mentor, not it’s micromanager

Andy Bell nous a présenté sa méthodologie de travail, nommée CUBE CSS.

Il s’agit d’une approche centrée sur CSS, qui ne dépend pas d’une technologie spécifique. CUBE n’est pas non plus un framework, mais vraiment une manière de créer des composants et des interfaces complexes avec CSS. Andy exploite le principe d’amélioration progressive, afin de construire des interfaces fluides et flexibles, qui s’adaptent aux internautes.

« Les utilisateurs et utilisatrices ne bénéficieront peut-être pas de la meilleure expérience, mais ils auront tout de même une expérience qui leur convient. »

– Andy Bell

Voici dans les grandes lignes la manière dont il structure son travail:

  1. Une structure HTML solide, qui rend le contenu du site accessible à tous et toutes;
  2. Des CSS globales pour l’ensemble du site: reset CSS, variables globales, tailles de textes, marges et espacements.
  3. Un système de mise en page basé sur une grille responsive;
  4. Des classes utilitaires qui « font un job et le font bien », par exemple .wrapper, .background-primary, etc.
  5. Des blocs pour créer les composants de base de l’interface: cards, boutons, etc. C’est à cette étape qu’on commence à s’amuser avec des fonctionnalités CSS modernes. Les navigateurs qui ne les prennent pas en compte auront toujours les styles de base sur lesquels se reposer pour que le contenu soit consultable;
  6. Des exceptions qui permettent d’affiner le design, en créant par exemple des variations de certains blocs.

Je ne connaissais pas du tout la méthodologie CUBE, alors qu’elle s’approche pas mal de ma propre méthode de travail. J’ai trouvé cette présentation très intéressante et je vais sûrement m’inspirer des recommandations d’Andy pour optimiser ma manière d’écrire du CSS.

Liens et ressources


dina Amin: Making by breaking

Une présentation un peu différente des autres, pendant laquelle dina Amin nous a raconté le parcours qui l’a amenée à devenir animatrice en stop motion. Sa spécialité: démonter des objets trouvés dans des décharges et créer des séquences vidéos avec leurs composants.

Sans le savoir, j’avais déjà vu son travail à plusieurs reprises, notament l’animation d’intro qu’elle a réalisée pour les vidéos du site CSS Tricks. J’ai beaucoup aimé découvrir les coulisses de ses vidéos et la manière dont elle a progressé dans ce domaine jusqu’à en faire son activité principale.

What’s inside – A stopmotion animation by dina Amin sur Youtube

Liens et ressources


Harry Roberts: Get your head straight

On part dans du plus technique, pour parler performance et optimisation. Harry Roberts s’est spécialisé dans une partie très spécifique d’un document HTML: la zone <head>. Il explique qu’il s’agit de la partie d’une page qui bloque le plus le rendu du contenu, et a donc le plus d’impact sur le temps de chargement par les navigateurs web.

Comment améliorer ça, et donc rendre le chargement de nos sites plus rapide ? Ses trois principaux conseils sont les suivants:

  • Retirer tout ce qui peut l’être: pas de redirections, héberger nous-mêmes les assets du site, déplacer les scripts et les feuiles de style qui peuvent l’être dans le <body>, éviter les @import.
  • Utiliser un validateur HTML pour détecter d’éventuels tags invalides qui bloquent le chargement de la page.
  • Optimiser l’ordre des éléments qui figurent dans le <head>:
    1. Les balises <meta charset / http-equiv / viewport >;
    2. Le <title>;
    3. Les éventuelles feuilles de style qui contiendrait des @import;
    4. Fichiers JS;
    5. Fichiers CSS;
    6. Tout le reste, y compris les balises qui concernent le SEO et le favicon.

Harry nous a également présenté un outil qu’il a développé: ct.css, un bookmarklet qui permet de détecter les éventuels problèmes de performance présents dans le <head> d’une page.

Liens et ressources


Sophie Tahran: Designing with words

La présentation de Sophie Tahran concerne un sujet auquel je ne connais rien du tout, car ça ne fait pas directement partie de mon travail: la conception du contenu, content design en anglais. Il me semble toutefois indispensable de m’intéresser aux domaines qui gravitent autour du mien et qui ont un impact sur les prestations que je fournis. Un site web n’est rien sans son contenu, et je considère que le design et le développement web doivent être à la fois au service des utilisateur·ices et du contenu.

« Le content design désigne la pratique consistant à concevoir un contenu utile, qui guide les utilisateurs et utilisatrices dans leurs expériences numériques. »

– Sophie Tahran

Dans sa présentation, Sophie Tahran commence par définir le content design, avant de partager les étapes principales du processus qu’elle a développé au fil de ses nombreuses expériences professionnelles dans le domaine (elle est actuellement responsable du content design pour The New Yorker):

  1. Être en empathie avec les utilisatrices et utilisateurs: comprendre à qui on s’adresse, quels sont leur besoins, quels mots ils et elles utilisent.
  2. Définir quelles seront les interactions, à quoi la conversation ressemblera.
  3. Explorer des idées: créer des wireframes avec des premiers jets de texte (pas de Lorem ipsum), tester différentes approches, différentes mises en page.
  4. Créer un prototype avec le vrai contenu. À ce stade, elle donne également des conseils pour la rédaction:
    • Traduire le jargon afin de rendre le texte compréhensible pour tout le monde;
    • Rédiger des messages d’erreur précis et utiles, qui permettront de comprendre le problème et comment le corriger (et on évite de blâmer l’utilisateur);
    • Faire attention à la structure des phrases: utiliser la voix active plutôt que la voix passive;
    • Limiter l’utilisation des caractères typographiques spéciaux, qui peuvent détourner l’attention des mots;
    • Attention aussi aux majuscules, qui sont parfois utilisées de manière éronnée;
    • Ne pas hésiter à utiliser des répétitions, et surtout des mots et expressions déjà connues par notre audience.
  5. Tester le contenu auprès de vraies personnes: le contenu est-il compréhensible ? Quels mots sont utiles / confus / inutiles ?

Au fil de sa présentation, Sophie insiste sur l’importance de toutes les micro-décisions qui sont prises tout au long du processus, et qui auront un impact sur le contenu et la manière dont il sera perçu par l’audience du site ou de l’application. Une conception de contenu de qualité permettra de répondre aux attentes des utilisateur·ices, d’anticiper les problèmes éventuels et d’éviter les malentendus; on créera ainsi une meilleure expérience qui aidera à fidéliser les personnes qui utilisent le produit.

Liens et ressources


Manuel Matuzović: Lost in translation

En 2015, lors de la toute première conférence consacrée à l’accessibilité web à laquelle j’ai assistée, Leonie Watson avait commencé par nous rappeler l’importance de respecter la sémantique des éléments HTML. Elle insistait alors sur le fait que, bien avant ARIA, le HTML est l’outil le plus important pour l’accessibilité, en particulier les technologies d’assistance.

En 2022, ce rappel est toujours nécessaire – peut-être même encore plus qu’il y a sept ans.

Lors de leur analyse faite sur un million de pages d’accueil, l’organisation WebAIM ont constaté que 96,8% d’entre elles présentaient des défauts d’accessibilité. La majorité de ces problèmes sont causés par du HTML mal écrit, et facilement corrigeables.

Dans sa conférence, Manuel Matuzović a tenté d’identifier les principales raisons qui peuvent expliquer que de telles lacunes perdurent encore aujourd’hui:

  1. Nous ne sommes pas aussi bons en HTML que nous le pensons, nous ne connaissons pas le langage et sa sémantique suffisamment bien;
  2. Les designers ont trop peu de connaissances en HTML → les personnes qui créent des produits pour le web devraient au moins avoir des connaissance de base dans les langages qui seront utilisés;
  3. Certaines personnes n’en ont juste rien à faire – des internautes, de l’accessibilité;
  4. Nous nous reposons trop sur ARIA → 70% d’erreurs en plus ont été détectées sur les pages d’accueil qui utilisent des attributs ARIA;
  5. Le HTML est plus complexe qu’il n’y parait, et ne se limite pas aux balises et aux attributs → une réelle compréhension de la sémantique est indispensable pour écrire du bon HTML;
  6. Certaines informations importantes ne sont pas visibles sur le design → si on ne connait pas bien le langage, la traduction du design en code risque d’être mauvaise et / ou incomplète.

Liens et ressources

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser les balises HTML suivantes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>