Battle2Sites : RTL contre RTBF

Spade disposant d’un laboratoire de test pour devices mobiles (ChiconValley), nous avons décidé de partager une série d’observations sur des sites web en les passant au crible d’appareils largement utilisés.

La battle de sites consiste à comparer l’expérience utilisateur sur 2 sites proposant des services comparables, le tout permettant d’évaluer l’adaptabilité aux contextes actuels de consultation.

Pour rappel, au moment de publier cet article, Google annonce pour le 21 avril 2015 une modification profonde du classement des résultats de recherche basée sur l’adaptation aux mobiles des contenus. La question de séparer un site entre deux logiques (un site desktop et une application mobile) aura désormais des conséquences directes sur le trafic organique du site desktop. Les approches « Mobile First » et « Responsive Design » pronnées par Spade depuis sa création deviennent plus stratégiques que jamais #visionnaires

La méthode d’évaluation Battle2Sites

Depuis la précédente battle, nous avons mis au point une grille d’évaluation plus précise qui se divise en 6 grands tests :

  1. Responsive Design
  2. Mobile First
  3. Page Speed
  4. Content First
  5. Qualité du design
  6. Accessibilité et SEO

Une cote sur 100 est obtenue par pondération de ces 6 critères. Ils ont pour objectif d’évaluer la qualité qu’un site web se doit d’avoir pour répondre aux usages contemporains.

La battle : RTLinfo contre RTBF.be

Pour cette battle, nous avons choisi de comparer les sites des 2 principales chaînes TV belges francophones :

Appliquant notre grille d’évaluation, nous arrivons à ces résultats :

Résultats du test RTL vs RTBF selon les 6 critères

And the winner is…

Il se dégage rapidement un avantage pour le site RTBF info qui gagne cette battle.

Après la pondération, nous pouvons annoncer que la RTBF obtient un score de 55 % et RTL un score de 47 %.

RTL=47%, RTBF=55%

Plongeons dans une analyse plus approfondie de ces deux sites.

Le site web de RTLinfo

Ce qui a principalement sanctionné le site, c’est de ne pas appliquer correctement la méthode du Responsive Design.

Le site en tant que tel a été optimisé pour une vue desktop avec une légère adaptation pour la consultation sur tablette horizontale.

Si on redresse la tablette (en l’occurrence lors du test, un iPad), les premiers désagréments apparaissent.

Sur smartphone, le résultat est inconfortable, car appliquant un redimensionnement qui force l’affichage à la taille réelle du site, quel que soit le terminal utilisé, cela oblige à un déplacement dans la page verticalement (normal), mais en plus horizontalement.

La homepage du site de RTL sur un iPhone5s

La plupart des contenus sont coupés à gauche ce qui nécessite pas mal de manipulation pour lire les textes à moins de redimensionner la page manuellement

Stratégiquement, RTL a fait le choix d’orienter ses visiteurs vers l’utilisation de l’application mobile sans doute plus adaptée ou un site mobile à part, ce qui est pour le moins contestable et à déconseiller.

Mobile First

Le site de RTL n’est donc pas non plus « Mobile First » c’est-à-dire qu’il n’a que très peu pris en compte des optimalisations et une conception orientée mobile. On notera quand même des « sliders » qui répondent correctement aux mouvements tactiles (« swipe »).

Un typographie soignée

En terme d’ergonomie et de design, le site se distingue grâce à un typographie moderne et soignée (Proxima Nova) relativement bien paramétrée ce qui rend la lecture agréable de manière générale.

En adaptant la structure des articles et en jouant sur une richesse typographique, on pourrait renforcer le confort et l’expérience utilisateur. Un effort qui ne devrait pas nécessairement être réservé à la presse spécialisée.

Design général confus

Le design général manque de focus sur les éléments prioritaires (ce que l’utilisateur s’attend à voir en priorité, exemple en cliquant sur un chapeau d’article, on s’attend à voir l’article en entier en premier), il y a trop d’éléments parasites : la publicité bien entendu, mais les éléments secondaires comme la barre latérale prennent souvent trop d’importance. Cette tendance noie le contenu principal. Et l’expérience utilisateur est dégradée.

Sémantique visuelle mobile

Il y a également des soucis de sémantiques visuelles. Exemple : en haut à gauche on peut cliquer sur un « menu hamburger » qui annonce conventionnellement un menu principal d’une application mobile en listant par exemple les principales rubriques de navigation. Hors ce menu affiche la liste de tous les sites du groupe RTL. Rien ne permet de comprendre que cette liste se trouve cachée là.

Une solution serait de soit ajouter un label soit de proposer une icône de menu plus appropriée (voire les deux).

Performance Technique mobile

Techniquement, le site de RTL présente de nombreuses lacunes :

GTmetrix PageSpeed performance : Page Speed Grade = 72%, YSlow Grade=63%

Rapport GTMetrik. Cliquez pour obtenir le rapport détaillé.

  • Il n’y a pas de consolidation sur le chargement des ressources (enqueuing ou mise en file)
  • Il n’y a pas de report des ressources dans l’ordre de chargement des éléments
  • La compression des images pourrait être renforcée
  • Aucun script (CSS, JS…) n’est minifié
  • L’envoi des ressources compressées (gzip) pourrait être proposé
  • La taille des images n’est pas spéficiée
  • Le temps d’expiration des ressources pas mentionnés
  • Le validateur HTML du W3C annonce 658 erreurs rien que sur la homepage

L’expérience proposée pour les devices mobiles n’est malheureusement pas encore au point.

Enfin, en terme de SEO  et accessibilité, si la sémantique générale de la page est satisfaisante, on notera malgré tout que de nombreuses images explicatives ne disposent pas de textes alternatifs. On dit souvent que Google est aveugle, il est bien de lui offrir de quoi se nourrir.

Cette image devrait disposer d'un texte alternatif reprenant au minimum le texte descriptif présent dans l'image : "Vent violent à Seraing, Mélanie, 06h"

Cette image devrait disposer d’un texte alternatif reprenant au minimum le texte descriptif présent dans l’image : « Vent violent à Seraing, Mélanie, 06h »

N’ayant pas reçu la moyenne, on peut affirmer que le site de RTLinfo n’est pas encore adapté aux modes actuels de consultation des sites web.

Le site de la RTBF info

Responsive Design

La visite de ce site commence bien, car la homepage respecte les critères méthodologiques du Responsive Design.

Malheureusement on déchante assez vite, car de nombreuses rubriques du site ne sont encore optimisées que pour le desktop.

On imagine que le portail est en transition.

Par exemple, la rubrique culture est pour sa part très bien adaptée dans l’ensemble des formats de consultation.

Mais la rubrique Sport au contraire ne l’est pas du tout.

Nous avons donc décidé d’attribuer la moitié des points sur ce premier critère.

A gauche la homepage du site de la RTBF, la mise en page est adaptée au terminal. A droite, après avoir cliqué pour consulter un article à la une, l'utilisateur est redirigé vers une page qui n'est pas adaptée. A la différence de RTL, au moins, il y a une vue générale qui permet par la suite de zoomer sur une partie pour démarrer le... déchiffrage.

À gauche la homepage du site de la RTBF, la mise en page est adaptée au terminal. À droite, après avoir cliqué pour consulter un article « A la une », l’utilisateur est redirigé vers une page qui n’est plus adaptée. À la différence de RTL, il y a au moins une vue générale qui permet par la suite de zoomer sur une partie pour démarrer le… déchiffrage.

Design et Ergonomie

En terme de design et d’ergonomie, le portail de la RTBF est moins bien conçu.

On regrette pour un portail éditorial le choix de la typographie Arial . Ce qui laisse penser qu’il y a eu peu d’échanges sur le caractère identitaire du site et sur le confort de lecture du visiteur.

Sur les pages Sport, l’oeil se perd rapidement dans un fouillis, difficile de rester concentré sur les points essentiels de la page, énormément de bruit visuel.

La page d'un article dans la rubrique Sports du site de la RTBF

L’article commence où ? Quels sont les éléments essentiels qui le constituent ? Comment distinguer ce qui fait partie de l’article et le reste de la page ?

Sémantique visuelle mobile

En mode mobile, sur la homepage, on regrette l’absence de menu: pourquoi priver les utilisateurs de cet outil précieux ?

Performance Technique mobile

Techniquement, le site de la RTBF s’en sort également beaucoup mieux même s’il reste quelque détails techniques qui amélioreraient encore l’expérience proposée.

RTBF info - PageSpeed - GTmetrix - Page Speed Grade=80%, Yslow Grade=68%

Rapport GTMetrik. Cliquez pour obtenir le rapport détaillé.

  • La majorité des scripts sont compressés
  • La sémantique HTML est bonne et suit la logique du framework CSS Bootstrap

Il reste tout de même plus de 270 erreurs au validateur HTML du W3C, donc au final le site peut facilement mieux faire.

Conclusion

Le site de la RTBF obtient un peu plus que la moyenne à notre test. Il remporte donc la bataille, mais sans briller.

On peut logiquement prévoir qu’en migrant progressivement l’ensemble des rubriques en responsive design et opérant un travail d’ergonomie et design, il atteindra un niveau plus que satisfaisant.

3 commentaires sur “Battle2Sites : RTL contre RTBF

  1. Etant donné que Twitter n’est pas réellement un média adapté pour une réponse correcte à cette interpellation, je me permets de vous répondre plus en détail en commentaire.

    Selon notre grille d’analyse, la RTBF obtient 45% au test qui évalue l’utilisation du Responsive Web Design et RTL 35%.

    La homepage du site RTBF.be est en fait responsive mais malheureusement ce n’est pas le cas de l’entièreté du site ce qui invite l’utilisateur en mode mobile à voyager d’une page adaptée à une page non adaptée. Ce qui explique la note basse de la RTBF mais plus haute malgré tout que RTL puisqu’une approche méthodologique en Responsive Web Design a été appliquée mais pas complètement (migration en cours semble-t-il).

    Le test machine pour vérifier la compatibilité mobile du site selon Google dépend donc évidemment de quelle page vous scannez : la homepage de la RTBF réussit le test ainsi que beaucoup de pages de la section « culture »

    Ceci avait pourtant été, je pense, clairement expliqué dans l’article en ces termes :

    « Par exemple, la rubrique culture est pour sa part très bien adaptée dans l’ensemble des formats de consultation. Mais la rubrique Sport au contraire ne l’est pas du tout. »

    Ceci étant dit, il est donc normal que plusieurs pages du site de la RTBF échouent au test de compatibilité mobile.

  2. thierry dit:

    La RTBF vient de relooker ses pages info, sport et culture
    vous devriez refaire votre comparaison…

    • François Lamotte dit:

      Oui nous avons vu que la RTBF a sorti des nouvelles versions. Ils nous avaient prévenu lors de la publication de l’article. Nous avions pu attirer leur attention sur certains détails intéressants.

Laisser un commentaire

Votre adresse email ne sera pas publiée.

Vous pouvez utiliser ces tags et attributs HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*