La semaine dernière, j’ai lu chez A List Apart un article qui m’a énormément plu de Kevin Goldman, Material Honesty on the Web. L’auteur s’interroge sur « l’honnêteté » d’une page web qui ne respecte pas la nature même du web. Il commence par rappeler les matériaux du web :
Les matériaux du web se rangent bien en trois catégories.
La base : HTTP, URL et HTML
Le style : CSS
La décoration : « raster graphics » (du graphisme à base de pixels)
Ce n’est pas la première fois que je parle de matériau du web, mais je pense que cette notion est particulièrement importante. J’avais bien aimé la conférence de John Gruber, Apple and the Open Web, qui décrivait les fondamentaux du web comme « les deux HT : HTTP et HTML ». Mais la description me semble plus complète et bien répartie.
Il continue ensuite en décrivant chacun de ces matériaux et ce qu’il considère comme une utilisation honnête. Il est parfois un chouilla extrémiste sur certains sujets (tu sais que c’est extrémiste quand même moi je dis que c’est extrémiste), comme lorsqu’il dit « qu’un effet de lumière comme une ombre portée est malhonnête […] car il n’y a pas de source de lumière dans un écran numérique qui induit cet effet« . Mais il utilise l’exemple d’une brosse à chiotte pour compenser (tu sais que c’est un bon article quand on cite en exemple de design une brosse à chiotte). J’ai particulièrement retenu ce passage sur « la base » (où il cite un autre excellent article de septembre dernier chez A List Apart) :
Le web pourrait presque être considéré comme un matériau composite, constitué de HTTP (le « comment »), des URL (le « où »), et de HTML (le « quoi »). Omettez n’importe lequel de ces ingrédients et vous n’êtes plus en train de faire du web.
Faites ce que vous voulez par dessus, mais si ces protocoles n’existent pas, ce n’est pas du web. Ce n’est pas honnête.
Par exemple, un site en Flash qui n’a pas ces matériaux fondamentaux ne se chargera pas sur de nombreux appareils populaires. Puisque des URL honnêtes pour chaque page n’existent pas en Flash, ce sont vraiment des pages malhonnêtes qui sont difficiles à lier, pas partageables de manière prévisible, et difficiles à naviguer à cause du bouton précédent du navigateur qui peut produire des résultats inattendus. Certains robots de recherche peuvent indexer du contenu en Flash, mais comme ce n’est pas livré avec du HTML honnête, des tas de problèmes de SEO, d’accessibilité et de maintenance font surface. Ce n’est pas un secret que des interactions pauvrement prévues peuvent être malhonnêtes pour exactement les mêmes raisons.
Le concept important décrit ici, c’est de construire son site « par dessus » cette couche de matériau. L’inverse, ce serait de concevoir son site indépendamment de ces matériaux, par exemple dans Photoshop, et de construire son site par dessus cette couche fictive.
Et tout cela m’amène à vous inviter à lire un autre excellent article, publié il y a plus d’un an par Nicolas Hoffmann, qui parle Du web au naturel, du web « bio » :
Il est une chose dont j’ai l’intime conviction en matière de développement et d’intégration web, c’est qu’il faut rester le plus proche possible du fonctionnement naturel des divers éléments ainsi que de la simplicité.
J’ai la même conviction, que ce soit du chargement d’une page à des faux contrôles de formulaires. Concevoir un site autour de son design, chercher à tout prix à avoir le contrôle de son design sur le web, ce n’est pas faire preuve d’intelligence. C’est montrer qu’on n’a rien compris au web.
L’une des tâches les plus difficiles de la conception web est de convaincre vos interlocuteurs de changer, même si vos préconisations sont les plus nobles au monde. C’est en particulier vrai à mon avis dès que ça touche à des domaines non visuels et dont les avantages d’un changement sont plus difficilement mesurables : intégration, développement, accessibilité, référencement… Parfois cette aversion au changement est seulement suggérée, parfois elle est clairement prononcée à voix haute.
Je viens de regarder la conférence Death to Bullshit de Brad Frost après être tombé sur sa magnifique page de présentation. Les conférences de Brad Frost sont en général un bon mélange d’inspiration, d’humour, d’énergie, de chemise à carreaux et surtout de très bonnes réflexions. (Je recommande également chaudement le visionnage de sa conférence For a Future-Friendly Web.)
Il y a un passage dans cette conférence qui a particulièrement résonné en moi. A 32min10, Brad parle de Craigslist :
Je veux aussi vous parler de Craigslist. Parce que j’adooore Craigslist ! J’adore le design de Craigslist. Allez-y, achevez-moi, je l’ai dit.
Ce que j’aime chez Craigslist et son design tout pourri (« its shitty shitty design« ) c’est que vous vous concentrez sur toutes les bonnes choses. Vous n’êtes pas distraits par des fioritures visuelles. Vous êtes à la recherche d’une information et le design l’offre à vous.
Ils sont à la quarante-troisième place dans le top cent des sites les plus visités au monde. Et ils sont là depuis seize ans. Vous croyez qu’ils n’auraient pas eu un peu de temps et un peu d’argent pour revoir leur site ? Ils savent ce qu’ils font.
Ça m’a rappelé un exemple que j’ai donné il y a deux ans, et qui reste pour moi l’un des meilleurs exemples de design français : Leboncoin. Leboncoin est le onzième site le plus visité en France, et est en ligne depuis bientôt sept ans. C’est assez perturbant d’aller sur archive.org et de constater que la page d’accueil n’a quasiment pas bougé d’un iota en sept ans. Il y a eu des petites évolutions, mais le « shitty shitty design » du site est toujours là. Vous pensez qu’ils n’ont pas eu le temps ou les moyens pour revoir leur site ?
Voici un autre exemple pour des sites que je visite quotidiennement : Hacker News et Designer News. Les deux sites ont le même principe : agréger et organiser du contenu soumis et mis en avant par les utilisateurs. Comme leurs noms l’indiquent, Hacker News s’adresse à des hackers, Designer News s’adresse à des designers. Designer News propose une charte graphique soignée et illustrée. Hacker News propose juste un « shitty shitty design« .
D’un point de vue purement esthétique, Designer News est bien plus attrayant. Mais en réalité, je trouve le design de Designer News bien plus difficile à lire que celui de Hacker News. En particulier, les icônes ajoutées sur la gauche pour illustrer le type d’article et leurs couleurs vives nuisent à la lecture des titres des articles, ne sont pas suffisamment explicites (voici l’icône pour les articles qui parlent de design de sites), ou redondantes (voici l’icône pour les sujets de type « Ask DN »). Un bel exemple de « C’est joli, mais…« . Je préfère de loin le « shitty shitty design » de Hacker News qui est bien plus efficace.
Dans sa conférence, Brad Frost conclue son exemple de Craigslist :
Je pense que c’est important pour nous de prendre ces leçons à cœur. Trop souvent j’appelle ça « des beaux morceaux de merde ». Lorsque vous créez ces choses magnifiques, mais qui ne font pas grand chose et où il y a tellement de distraction dans l’interface que nous n’arrivons pas à passer au travers. C’est vraiment important que nous comprenions que, oui, notre métier implique de la beauté visuelle. Mais si le contenu, si la fonctionnalité, si l’accessibilité basique n’est pas là : est-ce que ça vaut le coût ?
Au hasard de mes pérégrinations sur Awwwards (l’équivalent des Darwin Awards pour le web), je suis tombé surMy Provence Festival 2013, un site pour un événement touristique des Bouches-du-Rhône organisé dans le cadre de Marseille-Provence 2013, capitale européenne de la culture. J’ai été séduit par la charte graphique colorée et joliment illustrée du site. Mais mon enchantement est vite retombé.
Le Festival débute chaque fin d’année par un concours de création sur internet ouvert à tous. À l’issue de ce concours, les lauréats et les artistes membres du jury viennent partager une résidence artistique éphémère afin de produire des
Afin de produire des quoi ?
Voilà tout ce que je peux voir sur mon Macbook Air 11″, configuré dans sa résolution maximale de 1366x768px. Le site utilise un défilement spécifique en JavaScript qui ne s’adapte non pas au contenu, mais aux différentes parties de la page. Ce qui signifie que sur mon écran, je ne pourrais jamais lire la suite du texte de présentation.
Motivé, je tente alors ma chance sur mon iPhone.
Pas de chance, le site est totalement bloqué en mode portrait. En bon élève, je prends donc la peine de désactiver le verrouillage automatique de la rotation de mon iPhone, et je le tourne en mode paysage.
Dommage pour moi, je ne peux toujours pas lire le contenu de ce site web. Désespéré, je tente ma chance sur un vieux PC que j’ai sous la main (avec un bon vieux IE7 des familles).
Au final, le seul et unique moyen pour moi de lire le contenu de ce site, c’est d’en désactiver les styles.
Ceci n’est pas du web.
On ne doit pas faire de discrimination sur le web, c’est mal. Bloquer les gens selon leur appareil, c’est mal. Selon la taille de leur écran, leur système d’exploitation ou leur navigateur, c’est mal.
(à lire dans la voix de La Classe Américaine)
Faire ça, c’est passer à côté de l’essence même du web, un moyen de communication destiné à tous. Si vous créez une page HTML, par défaut, elle sera responsive, optimisée retina, compatible de Mosaic à Chrome 25 en passant par Lynx. Le travail d’un concepteur web, c’est de partir de cette base et de la rendre encore meilleure. Le travail d’un concepteur web, ce n’est pas de tout casser pour essayer d’arriver à un quelconque contrôle.
Pour paraphraser Christian Heilmann, si votre site web ne fonctionne qu’à partir d’une certaine résolution, ce n’est pas du web. C’est stupide.
J’ai l’impression que certains concepteurs web considèrent que le chargement d’une page web est un vilain processus qu’il faut absolument cacher aux yeux des gentils utilisateurs. J’avais été surpris de voir ça il y a quelques mois sur la version mobile du site de Fast Company. Mais ce n’est pas un cas isolé. Et il suffit encore une fois d’aller sur Awwwards (un site qui répertorie les mauvaises pratiques du web) pour s’en rendre compte (pim, pam, poum, …). Dans chacun de ces cas, il ne s’agit pas d’attendre le chargement de différents modules d’une application web complexe. Il s’agit juste de masquer aux utilisateurs l’effroyable réalité du chargement d’une page web.
Au contraire : sur le web, c’est une excellente chose. Avant même que votre page web ne soit totalement chargée, l’internaute va pouvoir en prendre le contrôle. Il va pouvoir commencer à lire votre article, commencer à regarder les produits de votre page liste, etc.
Et, magie du web, en tant qu’intégrateur, vous n’avez strictement rien à faire pour qu’une page se charge progressivement. Le navigateur se charge lui-même de télécharger au fur et à mesure les ressources nécessaires afin de proposer le plus rapidement possible une page utilisable.
A l’inverse, ça signifie que pour masquer le chargement d’une page aux yeux d’un utilisateur, vous allez devoir travailler activement pour ça. Vous allez devoir maquetter votre écran de chargement, l’intégrer, développer un script qui l’affiche tant que la page n’est pas totalement chargée. (Ironie du sort : vous alourdissez votre page pour afficher un chargement parce qu’elle est trop lourde parce que vous l’avez alourdie avec votre chargement…) N’avez-vous vraiment rien de mieux à faire ?
Le chargement d’une page web, ce n’est pas sale. C’est naturel. C’est beau. Et c’est l’un des gros avantages du web.
