photo d'une foule de personne devant une scène ou un homme s'y tient debout

Travailler le web sans le restreindre

Beyond Tellerand

Qui ?

Beyond Tellerrand a été fondé en 2010 par Marc Thiele. Il s'agit d'un évenement qui réunit toute sorte de passionné venant du monde entier qui viennent présentées leurs idées. Parmis ces invités il y'a notamment Maggie Appleton, Shirley Wu, Cassie Evans et bien entendu, Matthias Ott dont nous parlerons un peu plus tard dans cet article.

Quoi ?

Beyond Tellerrand est un festival où la créativité, la technologie et les talents de tous les environs se rencontrent. Le nom "Beyond Tellerrand" exprime la volonté de surpasser ses limites. Chez beyond tellerrand, vous devez pensé différement et sortir de votre réalité ennuyeuses.

À quel moment ?

Actuellement, Marc organise ce festival deux fois par an. À deux moments bien distincts de l'années. La rencontre a lieu une première fois en mai à Düsseldorf et une seconde fois en novembre à Berlin. Durant ces deux jours vous aurez l'occasion d'assiter à d'excellentes conférences qui vous permettront d'élargir votre vision des choses.

Matthias Ott

En quelques lignes...

photo du visage de matthias ott, un homme au cheveux brun, qui sourit
Matthias Ott

Matthias Ott est un indépendant en ux design ainsi qu'un ingénieur web de Stuttgart en Allemagne. Il dispose de plus de 15 ans d'expérience dans ce domaine. De par son métier, Matthias est très pointilleux sur le coté responsive des sites web ainsi que leurs accessibilités.

Un prof en web

Naturellement, lorsqu'on sait faire quelque chose, on finit par le transmettre. C'est ce que Matthias a décidé de faire. Depuis 2012, il ensigne à la Muthesius Academiy des beaux arts et du design situé à Kiel, en Allemagne. Il y enseigne les bases du prototypage interractif de l'ux pour les interfaces digitales.

Ses événements

Bien entendu, Matthias n'a pas seulement fait la conférence "Painting with the web" chez Beyond Tellerrand. Durant sa carrière il a eu l'occasion de participé à toute sorte d'évenements, de meet-ups, de conférences en présentiel ou bien en ligne. Il a également organisé de nombreux workshops.

Son blog

Il allait de soi que Matthias ne garde pas toutes ses astuces dans l'ombre. Il a en effet lancé son blog matthiasott.com depuis plusieurs années désormais. Il y poste régulièrement des articles tous plus intéressants les uns que les autres avec des sujets variés.

Matthias Ott – Painting with the web – Beyond Tellerrand Düsseldorf 2025

Dans sa conférence, Mathias Ott parle de l’harmonie du Web et de la façon de designer celui-ci.

Il va d’abord faire un comparatif avec le Web en commençant par montrer une toile de Gerhard Richter, un artiste allemand. Il détaillera ensuite le processus de création de Richter en appelant celui-ci comme étant “le processus créatif ultime”, qu’il définira comme étant une conversation constante avec soi-même.

Il expliquera par la suite que cela lui rappelle beaucoup le Web. Car c’est en quelque sorte une toile aussi. Cependant une des différences qu’il citera est que, sur le web, il s’agit d’une toile infinie qui peut avoir toute sorte de dimensions.

Il va ensuite appuyer son propos en montrant un schéma qui contient toutes les tailles d’écran. Matthias poursuivra en montrant à son public les toiles utilisées par les designers, un modèle figé d’une version mobile, et un autre figé d’une version pour ordinateur. Mais à l’heure actuelle, avec toutes les tailles d’écrans qu’il existe, peut-on vraiment se permettre de designer sur des écrans figés dont les tailles sont dites “à peu près standard” alors qu’il existe autant de tailles différentes ? C’est le sujet que Matthias détaillera tout au long de la conférence.

Durant sa conférence, Matthias pointera du doigt le mur significatif qui s’est dressé entre la page web que les designers créent sur des modèles statiques et la réelle page web sur laquelle on devrait travailler, qui elle est beaucoup plus fluide et dynamique. Il dit par la suite, je cite : « Que se passerait-il si nous changions cela et que nous arrêtions de traiter le web comme une toile blanche à peindre et qu’à la place nous commencions à le traiter comme un matériel à construire ? »

Pour changer sa façon de travailler le web, il énoncera plusieurs propriétés en CSS afin d’obtenir une typographie fluide comme par exemple la propriété clamp() qui permet de définir une taille minimale, une taille préférée basée sur la largeur de la fenêtre et une taille maximale. Le navigateur se chargera ensuite de calculer la meilleure valeur. L’avantage de cette propriété est qu’elle permet de ne pas utiliser les media queries.

Il décalera ensuite sur les espaces colorimétriques en expliquant que les designers ont longtemps été limités au sRGB mais qu’aujourd’hui de nombreux appareils prennent en charge le Display P3 qui est un espace colorimétrique plus grand que le sRGB.

C'est une photo d'une des slides de la présentation, on y voit l'espace colorimétrique du Display P3.
Slide 75 de Matthias exposée lors de sa conférence (voir ses slides)

Il parlera ensuite du modèle OKLCH qui permettrait d’avoir un meilleur contrôle sur les couleurs et ainsi d’avoir un meilleur contraste et donc une meilleure lisibilité sur le web.

Mathias parlera aussi du CSS-grid en pointant du doigt que la majorité des designers n’avaient pas idée de ce qui était possible avec une grille CSS. Il introduira la fonction repeat(auto-fill).

C'est une photo d'une des slides de la présentation, on y lit : ' grid-template-columns: repat(auto-fill, mimax(200px, 1fr)); '
Slide 98 de matthias exposée lors de sa conférence (voir ses slides)

Cette fonction permettrait de définir à quel point les colonnes de la grille peuvent s’agrandir et rétrécir. Voici un exemple pertinent qui a été cité durant la démonstration. Il détaillera en donnant toute sorte d’exemples pour travailler sa grille CSS de sorte à ce qu’elle soit la plus responsive possible.

Il parlera également du subgrid qui permet d’utiliser la grille pour les enfants directs ou bien pour des "sous-enfants" classés plus loin dans l’arbre généalogique.

Pour finir, il y a les container queries qui permettent d’ajuster un élément en fonction de la taille du contenaire dans lequel il se trouve.

Matthias clôturera en beauté la conférence en expliquant que les projets personnels sont des terrains de jeux pour apprendre et explorer de nouvelles possibilités.

Ce que j'en ai pensé

Dans ma présentation de la conférence, j’ai abordé l’introduction de Matthias, je souhaiterais revenir dessus car j’ai trouvé que la comparaison était assez bien faite car on entend rarement parler de la perspective artistique du web. Son introduction était très accrocheuse et donnait envie d’écouter ce qu’il avait à dire. En tant que noob du webdesign, je n’avais jamais entendu une quelconque comparaison artistique avec le web. Et c’est vrai, qu’avec le recul, je n’ai jamais réellement considéré le Web comme une évolution vivante, mais plutôt comme une page blanche qu’il fallait que je remplisse.

C'est une photo d'une slide de la présentation. On y voit Gerhard Richter assis face à une toile verte et bleue. Par dessus cette photo on y lit 'The ultimate creative process. A constant conversation'
Slide 6 de Matthias exposée lors de sa conférence (voir ses slides)

Ici, mathias revient sur le fait qu’en tant que designer, nous continuons de designer nos sites sur un seul et même support, un support figé. Là aussi j’ai trouvé que son approche était pertinente. ça m’a fait réfléchir sur ce que c’était être un vrai designer du web. Et si au lieu de travailler sur un support figé et puis seulement d’adapter sa responsive, on ne changeait pas de façon de travailler en travaillant directement de façon responsive ?

C'est une photo d'une slide de la présentation. On y lit 'We are still painting static picture of web'
Slide 14 de Matthias exposée lors de sa conférence (voir ses slides)

En conclusion

C'est une conférence que j'ai appréciée dans sa globalité. Le sujet était très intéressant et d'actualité. Matthias a su rendre son discours dynamique, ce qui a permis à sa conférence d'être moins lourde et de la rendre plus agréable à écouter malgré les détails techniques donnés par moment.