HTeuMeuLeu

Cette nuit, Google a annoncé la fermeture de Google Reader à partir du 1er juillet prochain, dans le cadre d’un « nettoyage de printemps ». Je me fichais pas mal des fermetures des précédents services de Google (Buzz, Video, iGoogle). Mais là, ça me fait tout drôle. Google Reader est un service que j’utilise, et surtout que j’aime utiliser, chaque jour depuis 2006. Je ne doute pas que j’arriverais à retrouver rapidement une alternative.

Mais cette annonce est pour moi assez représentative du Google de 2013.
Froide, sèche, sans appel.

Dans mon esprit, Google Reader fait figure des symboles du Google innovant du milieu des années 2000. Google Maps, Google Docs, Gmail… Bien sûr, ces services avaient pour unique but de rassembler davantage de données sur leurs utilisateurs. Mais ces services répondaient à un besoin.

2013. Le gros projet de l’année pour Google est Google Glass. Des lunettes connectées qui permettront à Google de vous suivre partout, 24 heures sur 24, et d’enregistrer tout ce que vous voyez, tout ce que vous dites, tout ce que vous faites. Pour quel gain pour l’utilisateur ? La possibilité d’avoir les mains libres en prenant une photo. Mon côté geek aimerait être emballé, mais j’ai vraiment du mal.

En 2011, dans une célèbre interview, Eric Schmidt expliquait que le but de Google est « de se rapprocher de la limite du glauque, mais sans jamais la dépasser« . Je ne saurais pas dire exactement quand c’est arrivé (peut-être avec Chrome, peut-être avec Android), mais j’ai le sentiment que Google est bien au-delà de cette limite. Google Glass, Google Shoes, Google Cars… Ces services hurlent : « Comment peut-on récupérer plus d’informations sur des êtres humains à leur insu ? ».

Ce n’est pas forcément nouveau chez Google, mais désormais ça me saute aux yeux.

Il y a une résurgence d’articles récemment sur les pré-processeurs CSS :

• J’en peux plus de vos pré-processeurs, par Cyrilou
• Préprocesseurs, mais c’est de la CSS au fait !, par Nicolas Hoffmann
• Pourquoi je n’utilise pas les préprocesseurs CSS ?, par Vincent De Oliveira

J’avais déjà donné mon avis sur le sujet l’année dernière dans mon manifeste du CSS pur et dur. Il se trouve que depuis cet article, j’ai eu l’occasion de travailler sur un projet utilisant Sass. Mon avis n’a pas vraiment changé, mais mes craintes ont un peu changé de cible.

Le problème, ce ne sont pas les pré-processeurs en eux-même. Mais comme le dit très bien Roy Tomeij chez The Sass Way :

Sass ne crée pas du mauvais code. Ce sont les mauvais développeurs qui le font.

J’en parlais déjà l’année dernière, selon moi, la qualité d’une intégration se mesure sur trois objectifs (dans l’ordre) : l’internaute, le projet et moi. Le problème à mon avis, c’est qu’un pré-processeur incite à se concentrer totalement sur le dernier point (mon petit nombril d’intégrateur) en oubliant totalement le premier (l’internaute). Et le risque, c’est d’oublier totalement pourquoi on fait une intégration et de générer du code bouffi comme celui-ci :

a.icon-listen-bl:hover,
.event-related .box-title a:hover,
.category-related .box-title a:hover,
.readmore a:hover,
.footer a:hover,
.pagination a:hover,
.news a:hover,
.latest-tweet .date a:hover,
.feature .box-header .title a:hover,
.caption .title a:hover,
.full-agenda-link a:hover,
.article a:hover,
.medialib-nav a:hover,
.timeline-months a:hover,
.Timeline .feature .box-footer a:hover,
a.icon-listen-bl:active,
.event-related .box-title a:active,
.category-related .box-title a:active,
.readmore a:active,
.footer a:active,
.pagination a:active,
.news a:active,
.latest-tweet .date a:active,
.feature .box-header .title a:active,
.caption .title a:active,
.full-agenda-link a:active,
.article a:active,
.medialib-nav a:active,
.timeline-months a:active,
.Timeline .feature .box-footer a:active,
a.icon-listen-bl:focus,
.event-related .box-title a:focus,
.category-related .box-title a:focus,
.readmore a:focus,
.footer a:focus,
.pagination a:focus,
.news a:focus,
.latest-tweet .date a:focus,
.feature .box-header .title a:focus,
.caption .title a:focus,
.full-agenda-link a:focus,
.article a:focus,
.medialib-nav a:focus,
.timeline-months a:focus,
.Timeline .feature .box-footer a:focus {
text-decoration: underline;
}

Aucun humain sain d’esprit n’aurait écrit manuellement ce code, bouffi et rempli de sélecteurs peu efficaces.

Un pré-processeur est un outil. Au même titre que votre système d’exploitation, votre IDE, vos bibliothèques CSS ou JavaScript préférées, ce sont des outils.

Si vous utilisez une visseuse électrique et que vous abîmez tous vos pas de vis, il y a des chances pour que soit vous utilisez une mauvaise visseuse, soit vous ne savez pas vous en servir. Un pré-processeur n’est pas un mauvais outil.

Mais comme on dit dans l’informatique : PEBKAC.

En juin dernier, je parlais des inconvénients techniques des boutons des réseaux sociaux. Tout récemment, en étudiant l’impact sur la performance du site d’un client des boutons « J’aime », j’ai découvert quelque chose que j’ignorais totalement. Je suis peut-être la dernière personne sur Terre à avoir appris ça. Mais ça m’a tellement émoustillé que j’ai cru bon de partager ma découverte. Attention, accrochez-vous.

Les boutons « J’aime » de Facebook n’affichent pas les « J’aime ».

Du moins, pas que. Voici ce que dit officiellement la documentation de Facebook :

De quoi est composé le nombre affiché sur mon bouton J’aime ?

Le nombre affiché est la somme :

• Du nombre de « J’aime » sur cette URL
• Du nombre de partages de cette URL (cela inclut le copier/coller d’un lien sur Facebook)
• Du nombre de « J’aime » et de commentaires sur des publications sur Facebook concernant cette URL

C’est visible clairement dans la vieille API REST où l’on retrouve ces trois valeurs distinctes :

• like_count : le nombre de clics sur un bouton « J’aime » associé à cette URL, ou de « J’aime » sur une publication sur Facebook contenant cette URL.
• share_count : le nombre de partage de cette URL sur Facebook.
• comment_count : le nombre de commentaires publiés sur un message de Facebook contenant cette URL.
• total_count : la somme des trois points précédents, affichés sur un bouton « J’aime ».

Vous pouvez tester par vous même en remplaçant l’URL du paramètre urls à la fin de l’adresse suivante (ici avec l’adresse de mon article précédent) :

http://api.facebook.com/restserver.php?method=links.getStats&urls=http://www.hteumeuleu.fr/shitty-shitty-design/

Ce fonctionnement me paraît totalement fou. Cela signifie que le compteur d’un bouton « J’aime » ne reflète en rien l’appréciation de votre page ou de votre marque. Mais plutôt uniquement un volume de réactions générés sur Facebook. J’ai fait quelques tests, et voici ce que j’ai observé.

Imaginons que vous écriviez un article absolument odieux. Quelqu’un va poster votre article sur Facebook avec un commentaire du genre : « Non mais n’importe quoi, quelle merde cet article ! ». Vous venez de gagner un « J’aime ». Un des amis de cette personne va alors cliquer sur le lien « J’aime » de cette publication, et poster un commentaire pour dire qu’il est totalement d’accord. Vous venez de gagner deux « J’aime ». Cet ami va reposter un commentaire quelques minutes plus tard pour corriger une faute de son précédent commentaire. Vous gagnez un « J’aime » supplémentaire. Et ainsi de suite…

Et vous connaissez le meilleur dans tout ça ? Si la publication originale est supprimée (et donc tous les « J’aime » et tous les commentaires associés par la même occasion), vous conservez tous les « J’aime » à votre compteur.

Et toute cette petite machinerie fonctionne également si vous publiez une URL sur votre propre mur dans une publication limitée à votre propre profil (« Moi uniquement »). Vous pouvez donc faire grimper le nombre de « J’aime » sur vos propres URL en vous contentant de poster des commentaires sur votre propre publication visible uniquement par votre propre profil.

Le narcissisme est à son apogée.

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 ?

Non.

Au hasard de mes pérégrinations sur Awwwards (l’équivalent des Darwin Awards pour le web), je suis tombé sur My 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.