1 million de visiteurs en 31 jours, sans un euro de budget, c’est possible : les chiffres derrière 100km.space

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 :

• Code Editor, par Panic Inc. : https://panic.com/code-editor/
• CodePen.io : https://codepen.io
• Inspect Browser, par Pdny : https://apps.pdyn.net/inspect/
• GitHub : https://github.com/mobile/
• Ulysses : https://ulysses.app
• MindNode : https://mindnode.com/features
• Spark, par Adobe : https://spark.adobe.com/fr-FR/
• Explain EDU, par Explain Everything : https://explaineverything.com/explain-edu/
• Antidote, par Druide Informatique : https://www.antidote.info/fr/antidote-mobile

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.