Depuis 2011, Beyond Tellerrand est un événement européen incontournable pour les développeurs, designers et créatifs. Ce rendez-vous, qui a lieu 2 fois par an en Allemagne, est l’occasion de se plonger dans des conférences et des ateliers animés par des intervenants du monde entier, qui viennent partager leurs connaissances et leurs points de vue sur les tendances actuelles.
Matthias est un créatif du web passionné, qui allie design d’expérience et ingénierie. Il adore partager ses connaissances et enseigne le prototypage d’interfaces. Il propose aussi des ateliers sur les pratiques web actuelles, pour que tout le monde puisse se tenir au courant des dernières tendances. En plus, Matthias partage ses réflexions dans sa newsletter “Own Your Web” et sur son site. Là-bas, il explore avec enthousiasme le design, le développement et la culture du web ouvert.
Matthias commence sa conférence en faisant un parallèle entre le web et la peinture. Mais, très vite, il insiste sur la grande différence entre un peintre qui a une relation directe avec sa toile et dont la taille ne changera pas, et le designer qui travaille avec sa propre taille d’écran qui n'est peut-être pas celle de l'utilisateur. Matthias dit d'ailleurs “We are still painting pretty static pictures of website components”.
Il y a plus de 2300 tailles et formes d'écran. Il met ça en évidence avec une photo d'appareils prise par Brad Frost. Le problème du designer c'est le matériel. Il travaille sur une simulation du web, sur un web statique alors que le vrai est fluide et dynamique. Ça l'empêche d’entretenir un dialogue avec son œuvre. Alors que faudrait-il faire ? Pour concevoir la création sur n’importe quel support, nous devons bien comprendre les qualités et les contraintes auxquelles nous sommes confrontés. Donc, il faut être au clair avec toute la technologie du web.
La plateforme web évolue très vite, on peut dire que le CSS est l’outil de conception le plus puissant. Il permet de faire des choses esthétiquement parfaites mais qui ne sont pas accessibles à tout le monde vu que tous les utilisateurs n’ont pas le matériel adéquat pour profiter pleinement de la création et vivent une expérience moins agréable. Il faut donc, plutôt que de penser à l’écran sur lequel nous créons, penser à tous les supports sur lesquels la création sera vue.
Matthias cite Frank Chimero “What would happen if we stopped treating the web like a blank canvas to paint on, and started treating it like a material to build with ?”
Tim Berners-Lee en créant l'HTML avait compris que l’information devait être simple et accessible quelque soit la taille de l’écran. Donc l'HTML ne prend pas en compte les détails de la présentation, c'est le seul moyen fiable d’afficher l’information sur un nombre important d’appareils. Au départ, l’essentiel c'est l’information et non la présentation, mais certaines personnes ont voulu rendre la présentation plus attrayante en ajoutant des fonts et des couleurs. L'HTML a évolué d’un langage donnant l’information accessible à tout utilisateur vers un langage orienté présentation qui ne le rend plus accessible à tous de manière fluide. Puis il y a des utilisateurs qui changent les paramètres par défaut du site web, ce qui change la présentation de la page. Il est donc indispensable que la conception reste flexible selon leurs préférences.
Il y a déjà 25 ans, John Allsopp disait qu'on doit traiter le web comme un support flexible, incontrôlable et imprévisible. Et plutôt que de voir ça comme une faiblesse comme beaucoup le font, nous devrions voir ça comme une force. Le designer doit abandonner le contrôle complet du site , il suggére l’utilisation plutôt que de l’imposer car à la fin l’utilisateur aura toujours le dernier mot. Matthias parle un peu plus technique et voici ce qu'il préconise pour pallier au problème qu’on pourrait rencontrer à la lecture de l’information suivant l’écran et l’appareil. Il faut utiliser en priorité l’HTML — qui est la couche la plus robuste — pour toutes les fonctionnalités qu’elle permet. Ensuite, c'est le CSS qui sera utilisé pour spécifier l’aspect esthétique, puis le JavaScript mais uniquement pour ce que seul JavaScript sait faire, car il est plus puissant, mais aussi plus fragile. Et enfin, l’ARIA, seulement si c’est vraiment nécessaire. Avec ses possibilités de modification, la page devrait fonctionner sur tous les navigateurs, nouveaux comme anciens.
Pour que le design ne soit pas irréalisable, il conseille de faire la conception du site et de coder nos designs directement dans le navigateur pour voir comment ça réagit et si le design est réaliste et réalisable. Il existe déjà un mot pour faire ça, ça s’appelle le web design engineering. Matthias crée un pont entre la conception et le développement. Il invite les devs à designer et les designers à coder pour justement faire des expériences agréables.
Cela n’a jamais été aussi simple aujourd’hui d’avoir des ressources pour apprendre à designer avec du code, donc il faut essayer. Il n’y a pas de meilleur moyen pour apprendre que de se salir les mains avec un vrai projet avec du vrai contenu, donc il nous propose de tester tous les outils qui nous intéressent sur notre propre site web personnel.
Son discours était vraiment captivant ! Matthias Ott a présenté une approche intelligente pour encourager les développeurs et les designers à collaborer de manière plus fluide et simultanée, ce qui permet de créer des sites web plus agréables et intuitifs pour les utilisateurs.
L’historique qu’il a fait du codage dans le web est fascinant. Au départ, l’information brute était privilégiée, le contenu l’emportant sur le contenant. Cependant, les utilisateurs et les concepteurs ont rapidement exprimé le désir de rendre l’information plus agréable à consulter. Cela témoigne de l’esprit pionnier des passionnés du web, toujours prêts à repousser les limites de leurs compétences, même sans y être incités.
J’admire ces personnes qui s’imposent des défis et les relèvent avec enthousiasme, simplement pour le plaisir et la satisfaction de créer quelque chose de beau.
L’idée qu’un designer puisse se lancer dans le développement et qu’un développeur puisse s’essayer au design est particulièrement intéressante et je pense qu’elle représente l’avenir de notre métier. La vraie valeur de sa conférence résidait dans les conseils pratiques qu’il nous a donnés pour garantir une navigation fluide et agréable, quel que soit le matériel utilisé. Il m’a ouvert les yeux sur des possibilités que je ne savais même pas réalisables en matière de conception web, et j’ai vraiment hâte de mettre en pratique les différents outils qu’il nous a présentés dans mes futurs projets.
Si vous avez apprécié cet article, n’hésitez pas à me suivre pour recevoir les prochains