Il était une fois…
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…
L’enjeu caché :
« 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
Un média newsletter-first
Avant toute chose, sachez que Petit Web présente deux particularités majeures par rapport aux autres médias français :
- Le site petitweb.fr est au service de la newsletter envoyée chaque lundi à 44.000 abonnés, et non pas l’inverse, comme dans l’extrême majorité des cas.
- Petit Web ne publie ses articles que le lundi. Un rythme de publication hebdomadaire, difficilement compréhensible pour les robots en charge du référencement sur Google…
Un travail éditorial préliminaire
Benchmark & audit
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.
Une nouvelle baseline
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.
L’évolution de Blob, emblème du Petit Web depuis 2011
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…
Des choix de design et d’UX au service du confort de lecture, de la mobilité et du référencement
Une typographie qui rappelle les premières “newsletters”
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 :
- lisible, elle améliore le confort de lecture
- issue du catalogue Google, l’affichage de la page est d’autant plus rapide
- déclinable en de nombreux styles (light, medium, bold…), elle est facilement utilisable par les équipes Petit Web
- utilisée en informatique dans les lignes de codes, elle rappelle l’univers technologique du média
Un design épuré et uniformisé
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.
Une structure qui respecte l’évolution du positionnement
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 :
- Opinion : un regard d’editorialiste sur l’innovation numérique
- Les indiscrets : l’actualité des acteurs du digital
- La revue du web : une veille sous forme de brèves
Des formats publicitaires plus pertinents
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.
Des fonctionnalités dédiées à l’expérience du lecteur sur le site
La refonte du site a permis d’ajouter quelques fonctionnalités indispensables pour améliorer l’expérience du lecteur :
- un indicatif du nombre de mots de l’article, plus pertinent que l’affichage d’un temps de lecture, trop approximatif selon les habitudes de lecture
- une barre de progression de la lecture, permettant au lecteur de mesurer la quantité de texte restant à lire (très pratique sur des articles dont le sujet est parfois complexe)
- un format de partage simplifié : lorsque le lecteur sélectionne une partie du texte, trois boutons sociaux s’affichent (Linkedin, Twitter, Facebook)
L’optimisation de la performance… sans analytics !
Un choix radical pour respecter le 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.
Booster le nombre d’inscrits à la newsletter
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 :
- 3 étapes, seulement
- 3 champs à renseigner
- les remerciements de Blob via une animation courte.
Un travail SEO spécifique pour améliorer la visibilité du site
Mieux répondre aux critères des robots de Google
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 :
- création d’un nouveau fil d’ariane
- redéfinition des priorités de passage
- ajout du format AMP, avec une sitemap dédiée
- retravail des redirections vers de nouveaux articles, de manière à forcer chaque article a être au moins “maillé” une fois
- ajout de profondeur
- modification de la pagination entre les articles de “Précédent/suivant” à un modèle numérique (1-2-…-7)
Anticiper de évolutions futures de 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.
Renforcer la visibilité de la nouvelle identité
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.
Des résultats encourageants
Un temps de chargement divisé par 7 !
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.
Les robots de Google sont aux anges
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
Une délivrabilité de la newsletter à 9,5/10
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 :
- le format épuré et centré sur le texte,
- le poids de la newsletter (50ko en moyenne),
- la crédibilité de l’envoyeur,
- la bonne tenue de ses serveurs…
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 !
Des premiers commentaires positifs
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…).
