Curiosité des vacances, j'ai eu l'occasion de tester plusieurs sites (dont certains des miens) sur une tablette plutôt bas de gamme. Évidemment, je ne résiste pas à l'envie de partager cette expérience.

Une mise au point : ce billet n'est pas une charge contre ce genre d'équipement, je m'intéresse plutôt au rendu de sites dessus. Vous excuserez d'avance la piètre qualité des photos, j'ai fait du mieux que j'ai pu.

Préambule

Quand on pense au test sur la vieille croûte, on pense généralement à un vieil ordinateur dépassé ou alors un vieux portable pas mis à jour. Quand on pense tablettes, on pense généralement à l'iPad ou à une autre tablette de bonne facture. Toutefois, le test sur cette tablette relativement récente montre que cette vision du test dans de mauvaises conditions… ne se limite absolument pas aux vieux tromblons de l'informatique.

Présentation très rapide de la bête

Voici la bête, c'est une tablette Go-Nomad :

 | 

La résolution est de 800 par 480 pixels en paysage, le tout est propulsé par un système Android 4.0. L'écran de 7 pouces est de très mauvaise facture, les habitués de l'iPad et de sa réactivité en seront pour leur grade, c'est une vraie horreur, il faut appuyer lourdement pour activer un lien. Le rendu des couleurs est catastrophique, je reviendrai sur ce point quand on consulte des sites.

L'impression générale est : cheap. Tout est tiré vers le bas pour un prix très agressif.

Le rendu de certains sites

C'est là que cela devient rigolo : j'ai pu voir des curiosités de rendu non-sensiques. Mon propre site personnel construit en mobile-first s'affiche globalement bien là où des sites plus simples ont des problèmes de rendu que j'ai pu déjà pu voir sur de vieux navigateurs (genre sur un vieux Safari pour n'en citer qu'un). Ceci dit, je n'ai pas utilisé de propriété extraordinairement moderne, si j'oublie les media-queries bien sûr.

 | 

Mettons au point un détail de vocabulaire : quand je parle de bien s'afficher, c'est que le site est consultable sans souci, on arrive à accéder au contenu. L'affichage n'en est pas optimal ou même beau pour autant, loin de là ! Les dégradés CSS3 sont rendus, mais la faible palette crée des dégradés pas très doux à l'oeil, c'est le moins qu'on puisse dire. Et encore, les photos limitent la mocheté du rendu (!).

Le rendu des webfonts est très très lent. Souvent, la page est chargée mais le texte n'apparait pas avant de looooongues secondes. J'ajouterai bien que le bonheur des webfonts qui embellissent beaucoup les sites est mis à mal, le rendu de certaines étant parfois très laid, sans que je puisse y trouver une logique. De bons contrastes et des tailles de polices pas trop petites limitent la casse cependant.

Toujours au rayon lenteur, si vous faites pivoter la tablette, attendez au moins une bonne dizaine de secondes pour faire la magie responsive s'opérer. Et encore, j'ai essayé sur des sites plutôt légers.

Le défilement est insupportablement – abomifreusement – pénible à effectuer sur ce type d'écran, j'ai réellement adoré les sites avec des liens d'évitement les plus simples possibles. Ne parlons pas de l'exécution de JavaScript, très lente aussi sur les sites « chargés ».

Quelques sites un peu avancés en matière de positionnement CSS sont cassés, mais rien de très surprenant. Quelques curiosités comiques viennent égayer le tout : bordures non rendues (‽), arrondis bouffés arbitrairement (‽‽), détails rendus invisibles.

Conclusion

Si votre objectif est d'être affiché parfaitement partout, vous allez vite déchanter, les détails des designs ne seront pas bien rendus, et ce genre de périphérique ne s'y prête globalement pas. Par contre, l'objectif d'être consultable à peu près partout reste tout à fait atteignable. On parlera de dégradation gracieuse. :)

Le travail sur les performances Web va montrer ici tout son intérêt, le rendu étant lent, il faut vraiment diminuer le poids des pages et limiter le nombre de requêtes. Une bonne mise en cache fait beaucoup de bien. L'idée n'est pas d'offrir un site parfait (ce qui est impossible dans ce cas de figure), mais bien de limiter la casse. Curieusement, les images en Data-URI remplacent avantageusement les dégradés CSS3.

Idem pour l'accessibilité, les efforts dans ce domaine vont montrer leurs fruits dans ce genre de situation. Un site pleinement responsive devrait s'en tirer correctement, s'il n'est pas trop compliqué.

Attention à ne pas aller trop loin dans l'utilisation d'effets : par exemple, les dégradés étant très mal rendus, la lisibilité peut grandement en pâtir. Pareil pour les liens rikikis, si cela peut poser des problèmes sur iPad si on a de gros doigts, imaginez sur ce genre de périphérique ! Le seul moyen que j'ai trouvé pour ne pas devenir fou était une sorte de stylet qui permettait de naviguer un peu mieux.

Le concept de jeu d'équilibriste que connait tout bon intégrateur trouve ici tout son sens. La bonne leçon à retenir : n'oubliez jamais que vos beaux designs peuvent être consultés dans des conditions bien inconfortables.

En tout cas, comme je l'indiquais dans un tweet, tester un site sur ce genre de périphérique, c'est une grande leçon d'humilité pour les intégrateurs et autres web designers.

Bonus

Voici quelques sites connus consultés avec cette tablette. Ils s'en sortent très bien. Curieusement, les photos échouent à rendre le pouvoir enlaidissant de l'affichage de cette tablette, il faut le voir pour le croire !

 |  | 

C'est offert par la maison. ;)