Me voici aux commandes d’un site qui n’attire plus aucun visiteur. Enfin, si, je mens un peu, vous êtes désormais environ 500 visiteurs uniques depuis la sortie du confinement à venir chaque jour.

Lors de l’annonce de la grande date et du grand cercle de 100 kilomètres, le site accueillait plutôt 180 000 visiteurs uniques en moyenne. Amenant au total plus d’un million de personnes à effectuer des recherches pour se déplacer autour du domicile.

Un million de personnes. Pour un projet sans aucun budget, sans aucune communication particulière, sans réelle volonté d’attirer des curieux … c’est énorme.

Making-of : un projet créé sur iPad Pro

C’est l’une des informations que je n’avais pas encore diffusée. Le site a été créé à l’origine sur iPad, puis a été corrigé ponctuellement via un MacBook Pro. Mais simplement par opportunité, tout aurait pu être réalisé uniquement sur tablette.

Je suis un fan de la première heure des tablettes, j’y trouve mon compte avec ce format de consommation et de production de contenus. J’ai commencé l’aventure avec un iPad 2 à sa sortie, puis un iPad Air, un iPad mini 4 et un iPad Pro (je n’ai gardé que les deux derniers pour deux usages différents).

Aujourd’hui, mon MacBook Pro ne me sert plus qu’à produire du contenu grâce au multiécran. Le jour où iPadOS pourra gérer plusieurs écrans (hors simple réplication), je pense que j’arrêterai tout simplement d’utiliser un ordinateur.

Sur iPad Pro (avec clavier SmartFolio & Magic Trackpad), j’ai utilisé les applications suivantes pour créer 100km.space :

J’ai commencé par poser par écrit sur Ulysses ce que je souhaitais faire comme projet. Il s’agit d’un outil de prises de notes très puissant (d’ailleurs, je publie cet article directement depuis l’application). Ce dernier me rappelle un peu les grandes heures de Evernote ou de Bear. Une fois les paragraphes écrits, un détour par Antidote permet de retirer les petites erreurs qui pouvaient s’y trouver.

Puis, j’ai transformé les principales idées en carte mentale avec MindNode. Je m’en sers pour ne pas oublier une tâche ou de relier un service. Y déceler les impératifs et catégoriser les choses à faire.

Ensuite, j’ai transformé ma prise de note ainsi que ma carte mentale en mockup rapide dans Explain EDU, dont je me sers avec mes étudiants. Cette application permet de créer des schémas rapidement pour concrétiser une idée, y relier les dépendances, et proposer un début d’interface.

Maintenant que j’ai les idées claires côté “marketing”, je me mets au travail côté développement. Voici le process que j’ai mis en place :

  1. Codepen pour tester rapidement un début de code à distance
  2. Mettre en place l’architecture des fichiers avec Code Editor sur mon serveur distant
  3. Rapatrier mes essais concluants sur le serveur et vérifier les possibles erreurs avec Inspect Browser
  4. Copier une sauvegarde sur un repo sur GitHub
  5. Direction l’étape 1 pour recommencer

Une fois que j’ai un pseudo-site qui permet d’afficher la carte, je termine en ajoutant les éléments de suivi et de marketing :

  • Favicon & bannière OpenGraph via Adobe Spark
  • Suivi via Google Analytics
  • Intégration et optimisation des textes et balises dans la page

C’est pas bien : au tout départ, le site n’était pas du tout RGPD-friendly, j’y ai ajouté le consentement utilisateur ainsi que des mentions légales lorsque les visites se sont envolées.

Avec la rapidité d’exécution de la tablette et la facilité de prise en main des outils, j’ai pu me servir quasi uniquement d’un iPad pour créer ce site. C’était la première fois que je faisais l’exercice, ce ne sera pas la dernière.

Un “petit” projet, qui souhaite rester petit.

Je me rappelle très bien l’avoir écrit et même raconté à plusieurs reprises, 100km.space est un site sans prétention. Créé à partir d’une envie simple, à la portée de n’importe quelle personne souhaitant mettre les mains dans le code.

D’ailleurs, voici à quoi ressemble le coeur du site, ce qui fait en sorte que tout fonctionne :

J’en suis conscient, condensé, cela n’est pas très impressionnant. Et c’est justement ce que je souhaite transmettre. Pour avoir un outil en ligne qui fonctionne, il suffit parfois d’une bonne dose d’observation pour répondre à un besoin identifié.

C’est ce qui a été le cas, j’ai simplement observé ce qui avait été demandé. Je n’ai pas cherché à produire un “truc” qui fasse plus que ce que l’on attend, mais plutôt proposer un outil clé enmain qui puisse aider en quelques secondes n’importe quel internaute.

Les grosses boîtes à outils sont magiques, elles permettent de tout faire (ou presque), par contre, elles demandent généralement une courbe d’apprentissage importante. Ou alors, plus simplement : un temps de chargement long.

Des défauts qui ne sont pas bloquants

Dans le cas de 100km.space, les articles qui en parlent le prouvent : il faut parfois se contenter d’un prototype qui tient la route plutôt qu’une machine de guerre avec une série de béquilles. Loin d’être parfait, le prototype permet d’avancer dans le concret, sans s’attarder à atteindre la perfection.

Prenons par exemple ce qui ne va pas sur le site depuis son lancement :

  • Les feuilles de style ne sont pas minifiées
  • Les scripts JavaScript ne sont pas minifiés
  • Les images ne sont pas optimisées à 100%
  • Certaines classes CSS sont de trop et inutilisées
  • Certaines polices mettent du temps à se charger dans le navigateur
  • La durée de conservation de la mise en cache n’est pas assez longue
  • L’utilisation de scripts distants (Google Analytics / Google Maps)
  • L’utilisation de jQuery pour aller vite
  • L’absence de texte alternatif sur certaines images

Comme on peut le constater, ces “bonnes pratiques” devraient être la priorité de tout produit qui est mis à disposition sur Internet. Sauf dans le cadre d’un prototype, car celui-ci va subir plusieurs itérations avant d’atteindre le stade de “produit fini”.

Or, 100km.space n’est pas un produit fini. C’est un outil qui a été utile, avec une DLC (date limite de consommation) fixée au 02 juin.

Je suis très heureux que le site ne soit plus utile. Cela montre que nous sommes passés à autre chose, dans une autre ère, dans un autre état d’esprit, dans une autre dynamique de déplacements.

Que ce ne soit plus un outil utile se voit rapidement au niveau de la fréquentation du site. Et c’est une superbe nouvelle.

Cette aventure m’a permis d’aller me confronter à des thématiques nouvelles, à des exercices inédits, à un stress quotidien, à une relation très proche avec certains médias nationaux, à une communication quasi quotidienne avec les équipes de Google France.

Car oui, en 31 jours plus d’un million de visiteurs ont recherché plus de 5,8 millions d’adresses en France.

Tout ceci, sur un serveur mutualisé chez OVH, avec les API Google, en technologies HTML/CSS/JavaScript, avec un nom de domaine à moins de 2€. Il n’est parfois pas nécessaire de sortir la grosse artillerie pour arriver à proposer un site. Il n’y a pas de NodeJS, pas d’utilisation des services AWS, pas de PWA … juste une UX fonctionnelle. Et c’est déjà bien.

L’astuce des sites référents

Il y a eu de nombreuses retombées presse, je n’ai pas été contacté en direct à chaque fois, mais j’ai pu aller observer les sites référents côté Google Analytics :

  • LCI
  • Le Monde
  • 20 Minutes
  • Vozer
  • BFM TV
  • Forbes
  • Ça m’intéresse
  • Clubic
  • Libération

La radio, la télévision, les blogs, les magazines en ligne ou les nombreuses communautés sur les plateformes sociales … ces supports sont complémentaires et d’une grande aide au partage de l’information. Il serait étrange de les considérer sur différents niveaux qui ne peuvent se parler. Au contraire, l’interconnexion est à replacer au centre des réflexions. L’impératif est de décloisonner rapidement les canaux d’information.

Ce que va devenir le site maintenant ? Un simple bon souvenir.

Le domaine est loué pour un an, j’espère ne plus avoir à m’en servir. Que nous n’ayons plus à retourner en confinement. Que nous restions libres de nous déplacer.

Ceci sera mon dernier article concernant ce que j’ai eu la chance de vivre à travers ce petit side-project. Je ne m’attends pas à avoir de nouveau un tel pic d’intérêt pour un prochain sujet. Je suis juste content d’avoir proposé quelque chose d’utile, à mon niveau.

Bref, c’était cool. Merci.

A.

Au final, c’est quoi un bon outil ?

Internet est devenu un monde d’outils, chaque usage doit avoir son assistant virtuel pour éviter l’erreur, sa startup dédiée, son pricing bien étudié et présenté dans un tableau à trois colonnes. Toutefois, un outil n’est rien sans l’utilisateur ni le besoin qu’il est supposé « combler ».

C’est le défaut que l’on retrouve bien souvent dans bon nombre d’outils en ligne qui déclenchent la réflexion suivante :

« mais à quoi ça sert vraiment ? ».

Tout dépend en fin de compte de 4 grands principes déjà bien connus et, mais souvent ignorés :

  1. Pas de stress dans la gestion des fichiers, multiplateforme évidemment
  2. Confortable, donc attractif
  3. Peu coûteux, ce n’est qu’un éditeur de texte au final
  4. Bien équipé, compteurs / buts à atteindre / exports possibles

L’aspect multiplateforme doit être au cœur même des réflexions des créateurs d’outils, s’enfermer sur une plateforme est une erreur courante encore trop rencontrée. Si le système d’exploitation est un problème, passons en ligne. Restons universels.

Sans être l’outil le plus beau, il faut qu’il soit assez attirant pour venir y passer quelques heures, déposer ses données, développer des envies … Les interfaces ne sont pas que des tableaux à boutons. Il s’agit d’univers de création à chouchouter.

Si un outil est cher, c’est qu’il doit proposer bien plus que son discours marketing. Finalement, tout outil de création est une version évoluée d’un éditeur de texte. Que ce soit des outils de planifications, de discussions à plusieurs, d’organisation d’équipe, de création graphique … Ces outils ne font que passer un brief écrit en actions visibles.

La gamification est indispensable, mais doit être pensée de façon logique, elle doit servir un but. Les utilisateurs doivent imaginer un monde sans outil contraignant qui détiendrait leurs données dans des bases obscures, sur des serveurs cryptés et des processus d’accès complexes.

« Envie de partir ? OK, voici un zip avec tes informations au format texte. »

C.

Compresser (efficacement) un PDF trop lourd grâce à la magie de la ligne de commande

Ceci ne serait pas un de mes espaces de prise de parole sans une petite intervention purement technique. Après tout, ce qui va suivre devrait intéresser bon nombre de mes collègues producteurs de slides.

Coucou les marketeux ^^

Car l’ennui avec les slides, c’est que ça finit par peser son poids. Et c’est bien souvent les images qui transforment une présentation légère en sumo à transporter via WeTransfer. Ce gros WeTransfer qui -au final- embête bien tout le monde.

Le temps d’envoyer sur la plateforme avec une connexion qui s’avère être trop lente, puis le temps de récupérer le lien à envoyer à son contact, patienter bien longtemps qu’il arrive à ouvrir le lien pour découvrir la présentation. Bref, du temps perdu en données qui transitent et qui polluent.

Car oui, plus un fichier est lourd, plus son bilan carbone est important.

Autant refaire les choses simplement et prendre le temps de compresser tout cela sans perdre (trop) en qualité d’image. Résultat, il suffit d’utiliser notre ami de toujours GhostScript grâce à l’installation via brew.

Direction le Terminal de votre ordinateur fétiche pour installer le package :

brew install ghostscript

Puis, direction votre dossier avec le fichier à compresser (le input.pdf) pour lancer la commande :

gs -sDEVICE=pdfwrite -dNOPAUSE -dQUIET -dBATCH -dPDFSETTINGS=/screen -dCompatibilityLevel=1.4 -sOutputFile=output.pdf input.pdf

À titre d’exemple, un PDF de 650 Mo est maintenant un poil plus partageable : 55 Mo. Oui, c’est plutôt sympa et ça va beaucoup plus vite sans perte de qualité flagrante sur les images.

Bref, c’est cool.