Beyond What?
Tellerrand ou "bord de l'asiette" en allemand
Beyond Tellerrand est un week-end de conférence qui a lieu deux fois dans l’année; une fois à Düsseldorf et une fois à Berlin. Originalement créé en 2010 par Marc Thiele, la série d’évènements s’est vu grandir pour finalement atteindre les 500 participants chaque fois. Son but? Un lieu où designers, développeurs et autres peuvent se rencontrer et communier. Les sujets sont vastes, ne s’appliquant pas qu’à une seule part du monde du web; chacun y trouve son bonheur.
Do What?
Painting With The Web
La conférence est présenté par Matthias Ott, dont vous pouvez trouvez se présentation ici. Il débute sa conférence avec l’œuvre de Gerhard Richter dont la réalisation se fait avec intuition et recul, en conversation constante avec le “matériau” (peinture à huile).
Pour lui, c’est le processus créatif ultime comprenant réflexion constante, expérimentation et révision. En confrontation avec la conception du web, deux différences sont soulignés. Premièrement, la toile du web est fluide, responsive et couvre plus de 2300 taille de viewport par rapport à la toile fixe traditionnelle. Or, l’industrie s’obstine à “peindre” au pixel parfait des sites web grâce à des logiciels statiques (Figma, Adobe XD), avec abstraction du dynamique du réel. Deuxièmement, cette conversation avec la matériau se fait à distance (sans code), ce qui rompt la relation et empêche le feedback créatif. Les décisions des designers sont basée sur des hypothèses plutôt que sur la réalité du web
Ensuite, la conférence poursuit sur les fondamentaux du web en tant que technologie, indispensable pour comprendre les qualités et contraintes du matériau, et non toile vierge, avec lequel on travail. Le HTML, créé par Tim Berners-Lee, consiste à transmettre la structure significative pour garantir la portabilité tandis que le CSS, introduit par Hakom Wium-Lee, inclut l’influence partagée (non retenue finalement) et l’idée de la cascade; style suggérés par l’auteur mais modifiables par l’utilisateur, sans prescription. Dans tout cela, le rôle du designer n’est pas de contrôler l’apparence mais de la proposer afin d’assurer l’accessibilité.
Pour Matthias, le CSS moderne est l’outil de conception le plus puissant, surpassant les outils statiques dans certains domaines clés. Pour la typographie, la fonction clamp() (calcul une taille de police s’adaptant automatiquement au viewport) et l’échelle modulaire (utilisation de ratio de tailles police selon la taille de l’écran) vont permettre une adaptation fluide et un contraste harmonieux.
Concernant la couleur, l’espace colorimétriques sRGB n’étant pas disponible sur tous les outils de conception, l’adoption de l’espace OKLCH en CSS devient important. Celui-ci est uniformément perceptible donnant droit à des palettes accessibles par le contrôle la luminosité (L) qui est rendu dynamique par la syntaxe de couleur relative directement dans le CSS.
Finalement, pour la mise en page, le CSS Grid permet depuis 2017 des “layout” réactifs et complexes (en une seule ligne). Cela va être complété par le SubGrid qui propose aux éléments imbriqués d’hériter des lignes et colonnes de la grille parente. Et puis, les Container Queries permettent aux éléments de s’ajuster en fonction de la taille (bientôt le style) du conteneur parent, apportant flexibilité.
En fin de conférence, le conférencier recommande l’adoption de l’Ingénierie de Conception Web qui demande l’intégration plus prématurément du prototypage HTML/CSS/JS. Cela va permettre de percevoir dans le navigateur ce qui fonctionne ; avec par exemple CodePen. Il faut donner la possibilité aux designers de coder tel un architecte qui se soucie du bois de l’acier ou de la physique. En fin de compte la meilleure façon de pratiquer et d’explorer, sans pression, est le site web personnel permettant de maintenir le web ouvert et diversifié.
Thanks Who?
Matthias Ott
Il est consultant en UX et en Web Design Engineer basé à Stuttgart en Allemagne. D’une part, il crée des interfaces utilisateurs et systèmes de design agréables et performants pour le web, plaçant l’utilisateur au centre tout en ayant un état d’esprit axé sur le prototypage. Ceci est important pour valider les concepts et explorer les technologies. D’une autre part, il traduit les concepts d’interaction et designs visuels en composants et interfaces utilisables et responsifs. Il est adepte de l’HTML, CSS et JavaScript qu’il utilise pour construire des solution résilientes et pérennes tout en respectant la nature du web. En plus de cela, Matthias est aussi formateurs et conférenciers où il partage son expérience dans les domaines de l’UX et UI design, du prototypage, du responsive et de l’ingénierie du web.
Re(My)View
Qu'est ce que j'ai découvert
La première chose qui m’a éveillé dans cette conférence est la façon de percevoir le web. En tant que programmateur en formation, j’ai trouvé très intéressant la comparaison établie entre la création l’œuvre de Gerhard Richter et celle d’un site internet.; c’est assez troublant. Ce que je veux dire par là c’est que lorsqu’une page vierge HTML est ouverte, elle est vierge de toute forme. Logiquement, on penserait à une toile. Or, non; le fichier HTML est un déjà un matériau en quelque sorte. Il est donc à se demander que pouvons-nous considérer comme toile vierge? L’écran ou la machine?
Matthias Ott m’a aussi permit de comprendre certain concept qui m’était abstrait; surtout en CSS. La facilité avec laquelle la typographie peut être gérer ou encore, les container queries dont je ne connaissais pas l’existence. Outre, un plaidoyer sur le potentiel (non exploité) d’utilisation du web, le conférencier m’a aussi beaucoup appris sur les bonnes pratiques à avoir. Surtout au début de mon parcours dans le web, j’ai eu droit à une mine d’or d’informations.
Je ne me rendais pas compte de la possibilité que nous offrait le web en matière de développement. J’ai toujours perçu le web comme quelque chose nous permettant de créer mais avec certaines limites. Il faut admettre que j’avais tort. Ce que le CSS nous propose aujourd’hui est phénoménal. Néanmoins, j’ai l’impression que souvent les mêmes choses sont produites; peut-être car c’est ce qui se vend le mieux, surement.
Enfin, la leçon qui m’a le plus réconforté dans ma façon de faire est la suivante; il faut designer dans le navigateur, en code, directement. Je ne suis pas un grand fan de Figma ou autre. J’avoue que passer des heures sur un projet pour sortir quelque chose de statique et limité, n’est absolument pas mon activité préférée. Il faut nuancer par contre, le prototypage est important mais pourquoi sortir quelque chose de statique? Le web est dynamique et je préfère investir mon temps en prototypant quelque chose que je pourrais reprendre pour rendu final.