En février 2018, nous entrons en contact avec l’équipe du média Petit Web (44K abonnés), attirés par une seule chose, la qualité du contenu publié sur un sujet qui nous anime chaque jour : le décryptage de l’innovation numérique.
Trois mois et quelques rencontres plus tard, Petit Web demandait à Intuiti de mener la refonte de l’ensemble de son univers digital ! Après avoir proposé à nos amis du Petit Garage de rejoindre l’aventure (pour la partie dev.), le projet pouvait commencer…
« Trouver la bonne alchimie entre la singularité du Petit Web (une identité décalée qui fait sa force), et le respect des critères UX, UI et SEO indispensables au succès de tout univers média aujourd’hui..”
Fabien Chesné, Responsable du pôle UX/UI Intuiti
Avant toute chose, sachez que Petit Web présente deux particularités majeures par rapport aux autres médias français :
Avant d’entamer des enjeux techniques, deux réflexions de fond ont été menées : sur le positionnement de Petit Web vis-à-vis de la concurrence, et sur son identité propre. Pour cela, un large benchmark des interfaces médias en France et aux Etats-Unis, ainsi qu’un audit de l’existant, ont été menés.
Ce travail a abouti à la naissance d’une nouvelle baseline : adieu “décodeur numérique”, bonjour “salade de poulpe digital”. Volontairement décalée et nécessitant quelques instants de réflexion pour devenir compréhensible, cette baseline est là pour retenir l’attention. Petit Web disposant désormais d’une notoriété suffisante pour se passer d’une baseline “explicative”, l’important était d’insister sur l’originalité de son point de vue sur le numérique.
La réflexion sur l’identité a également débouché sur le relooking de Blob, sympathique poulpe rouge-passion, emblème du média depuis 2011. Avec son look flat et ses quatres déclinaisons interactives (avec son sourire, ses lunettes, son journal ou son micro), Blob est prêt à nager vers de nombreux horizons : des interfaces, du print, de l’événementiel et (surtout) de la vidéo.
Ci-dessous, deux comportements de Blob. Le site en présente d’autres…
A première vue, le choix de la police peut surprendre, et tant mieux ! Petit Web a la volonté de se démarquer. Quoi de mieux alors qu’une typographie à chasse fixe, en clin d’œil à l’histoire des premières messageries (télégrammes), ancêtres de la newsletter ?
Surtout, cette police présente plusieurs avantages :
Le design est volontairement épuré afin de mettre en avant le texte et l’aspect éditorial, et ainsi de faire gagner du temps au lecteur. Désormais identique pour le site et la newsletter, il renforce l’identité du média.
L’utilisation de rapports d’échelles différents dans le texte crée du rythme et hiérarchise l’information. Les blancs tournants sont assumés, ils doivent mettre en valeur le contenu et proposer un ensemble aéré. Surtout, ils structurent le contenu, “par le vide”.
Enfin, le fond de page est travaillé en orange pâle, dans le but de ne pas éblouir l’utilisateur avec une luminosité trop importante et d’offrir un contraste optimisé aux différents usages desktop et mobile.
Le parcours du site a évolué. Initialement, deux niveaux de titres co-existaient, sans véritable cohérence. Un parcours trop complexe, tant pour l’utilisateur que pour les robots de Google.
Le choix a donc été fait de recentrer la navigation autour de 4 entrées piliers facilement identifiables (Tendances, Pub et médias, Commerce, Entreprise), qui permettent d’accéder à des problématiques plus précises sous forme de tags.
En plus de ces piliers, le menu présente un lien direct vers les contenus spécifiques à Petit Web, renforçant son positionnement :
Les nouveaux formats publicitaires, basés sur les standards Google, ont pour objectif de faciliter la relation entre Petit Web et ses annonceurs, habitués à produire ces formats pour d’autres usages. Une petit modification de dimensions, mais qui devrait faire gagner beaucoup de temps ! Par ailleurs, le format et le positionnement de ces publicités doivent mieux s’imprégner dans l’expérience générale du lecteur.
La refonte du site a permis d’ajouter quelques fonctionnalités indispensables pour améliorer l’expérience du lecteur :
Le site n’intègre plus de cookies. Oui, vous avez bien lu ! Le choix a été fait, à la demande de Petit Web, de respecter entièrement l’anonymat du lectorat et donc de ne pas le “tracker” via Google Analytics par exemple.
Comment connaître le nombre et la qualité de son lectorat sans Analytics, un chiffre essentiel pour un média et ses annonceurs ? Petit Web étant newsletter-centric, le choix a été fait de ne regarder que les statistiques relatives à la newsletter, consécutives à un acte volontaire et libre de l’utilisateur tels que l’inscription elle-même.
Donner facilement accès à l’inscription à cette newsletter devenait alors un objectif majeur. D’où l’insert d’un bloc spécifique, un “call-to-action sticky” comme on dit dans le métier (NDLR : un bouton qui appelle à une action de l’utilisateur, bouton qui reste fixé au même niveau de votre écran lorsque vous descendez la page).
Le formulaire d’inscription se veut simple et ludique :
Jusqu’ici, la grande majorité du trafic arrivant sur le site petitweb.fr provenait de la newsletter. De nombreuses optimisations ont été apportées, afin de simplifier le travail des robots de Google, et donc accroître le nombre de visites provenant du moteur de recherche Google :
Des micro-données en HTML5 ont été ajoutées. Au-delà de rendre le site beaucoup plus réactif, ce format aide les robots de Google du site et est assez novateur pour anticiper les prochains formats qui pourraient êtres souhaités par le moteur de recherche.
Le travail du SEO peut aussi aider à asseoir le lancement d’une nouvelle identité. Un exemple parmi d’autres est la mise en conformité de Google avec le nouveau logo de Petit Web (recherche dans Google Images, apparition d’une fiche d’identité à droite de l’écran…). Pour cela, un balisage spécifique du logo et des boutons sociaux sur le site ont été ajoutés, forçant les robots de Google à reconnaître ce nouveau logo comme l’officiel.
L’impact de la refonte se voit très clairement en terme de référencement
Selon WebPageTest, le temps de chargement total d’une page du site est passé de 9,96s à 1,41s ! Le temps de réaction est également meilleur, puisqu’il passe de 1,4s à 0,67s. Enfin les 5 indicateurs principaux de WebPageTest sont tous passé en note A !
Des résultats essentiels aujourd’hui, pour optimiser l’expérience vécue par l’utilisateur (des recherches menées par Google en personne montrent que 53% des visiteurs d’un site mobile le quitte si la page n’a pas chargé au bout de 3 secondes), mais aussi pour améliorer le référencement du site.
Il est encore trop tôt pour analyser les performances SEO du site. Mais, à première vue, la nouvelle version du site plait aux robots de Google, qui ont nettement, par exemple, augmentés le nombre de pages explorées par jour.
<<< Ces graphiques montrent une nette augmentation de l’activité des robots de Google. D’abord un immense pic, puis une stabilisation de l’activité à un niveau 2 fois supérieur à la moyenne précédente
MailTester permet d’évaluer le niveau de délivrabilité d’une newsletter. Celle de Petit Web s’établie à 9,5/10, un chiffre largement au-dessus de nos tests habituels, qui tournent plutôt autour de 7/10. Parmi les facteurs qui contribuent à ce bon score :
Anecdote : ce très bon score n’est pas non plus une assurance tout risque. Certaines messageries ont ainsi refusé de délivrer la newsletter du 24 septembre 2018. Intitulée « Dur, dur.. », elle aurait été identifié comme spam car susceptible de partager un contenu à caractère sexuel !
Le meilleur des retours est celui des lecteurs habituels de Petit Web. Les premiers commentaires reçus, sur Twitter ou par mail, sont encourageants.
PS : n’hésitez pas à partager votre opinion sur Twitter, en mentionnant les comptes @petit_web et @Intuiti, on se fera un un plaisir d’intégrer votre commentaire (s’il est sympa et constructif, sinon…).
Envie d’aller plus loin ?