De plus en plus, je rencontre des pratiques absolument horribles sur des sites soit disant optimisés pour mobile. Là où j’ai le sentiment que l’ergonomie et l’utilisabilité des sites desktop s’est améliorée, j’ai l’impression qu’on fait un retour 10 ans en arrière sur mobile. Des chefs de projet, graphistes, développeurs et intégrateurs se permettent tout et n’importe quoi sans aucune considération pour les utilisateurs de leurs sites.
Les redirections automatiques foireuses
C’est sympa de vouloir me rediriger d’un site normal vers votre site mobile. Mais si c’est pour me rediriger sur votre page d’accueil mobile, et pas sur la page où je souhaitais aller, ça ne sert à rien. Cet XKCD décrivait bien ce problème.
Exemple : La Redoute
Les alertes pour télécharger une application mobile
Écoutez, si je viens sur votre site, c’est probablement pour une bonne raison. Peut être que je serais intéressé par votre application mobile, mais clairement pas maintenant, pas tout de suite.
Exemple : La Redoute (encore)
Empêcher de zoomer
Ça, ça me laisse complètement abasourdi. On est en 2012, on a des appareils tactiles absolument incroyables, qui me permettent de totalement m’approprier le contenu affiché, en zoomant sur ce que je souhaite regarder ou lire. Et pourtant, de nombreux sites mobiles empêchent de zoomer. Il n’y a aucune raison valable pour ne pas laisser un utilisateur zoomer. Arrêtez de faire ça.
Exemple : Amazon
Masquer la barre d’adresse du navigateur
J’aimerais bien étriper celui qui a lancé cette idée. Oh, bien sur techniquement ce n’est pas compliqué, il suffit de faire un window.scrollTo(0,1). Sauf que cette solution est la pire au monde, car elle ne tient pas compte du fait que vous ayez déjà scrollé ou pas. Et surtout en masquant la barre d’adresse et votre propre URL, vous laissez la porte ouverte au phishing.
Exemple : Amazon (encore)
Empêcher d’afficher la barre d’adresse du navigateur
Encore pire que de simplement masquer la barre d’adresse, certains sites empêchent purement et simplement de remonter pour réafficher la barre d’adresse. Ces sites utilisent en général des barres de menu en position:fixed (le tout simulé en JavaScript bien entendu, tant qu’on y est, autant faire dégueulasse jusqu’au bout). Et puis voilà. C’est fini. Vous êtes bloqués sur ce site. Le seul moyen de changer de site, c’est de fermer l’onglet, et d’en rouvrir un autre. Oh, non bien sûr, sur iOS vous pouvez appuyer sur la barre système tout en haut de l’écran pour scroller tout en haut, mais j’ai un doute sur le nombre de vraies personnes qui connaissent ce raccourci, et qui auront la présence d’esprit de l’utiliser.
Exemple : Paper.li
Ce ne sont que quelques exemples que j’ai croisé récemment. Ce qui me dégoûte, c’est que toutes ces pratiques seraient facilement reconnues comme inacceptables sur PC. Sérieusement, vous empêchez aussi à vos utilisateurs de scroller ou de zoomer sur vos sites desktop ? Non. Alors, arrêtez de le faire sur mobile.
Antoine, le
Pour ce qui est de la barre d’adresse du navigateur je ne suis pas d’accord.
Ils y a certaines « web app » qui justement masquent cette barre pour essayer de ressembler le plus possible à une app native.
Le meilleur article que je connaisse à ce sujet est le suivant : http://cheeaun.com/blog/2012/03/how-i-built-hacker-news-mobile-web-app
Mem's, le
Ce sentiment de retour en arrière de 10 ans est le même avec le « HTML5 à tout prix » comparé Flash avec des effet 3D, ombre portés à tire larigot. Avec « qui marche que sur untel navigateur » mais qui marchera plus dans quelques temps parce que le draft X sera validé et proposera qqch de différents. :/
Actuellement les sites fait en « parallaxe scrolling », pourquoi vouloir absolument faire comme certains, réaliser des sites basé sur du scroll avec de fausses animations ? Plutôt que faire quelque chose d’intelligent.
Laissez nos molettes tranquilles !
François "cahnory" Germain, le
Un truc que je trouve débile dans la redirection vers une version mobile (en plus du problème cité) c’est qu’on mette le device dans l’url. Dans ma tête un contenu avait une adresse unique et en fonction de critères (déduction via UA, choix de l’user,…) on servait la bonne version. Autrement ça pose problème lors du partage d’un lien entre deux devices différents, marre d’être dirigé vers une version mobile en suivant un lien depuis mon poste fixe.
Identitools, le
@Antoine :
Sur un site marchand l’idéal c’est quand même de savoir ou l’on se balade, sur un site de phishing ou le véritable site ? Sans la barre d’adresse le pékin moyen se fera juste sauvagement violer sa carte bleue.
griZouw, le
@Mem’s Ah c’est clair, le parallaxe scrolling, meme combat :-)
Pour moi c’est même pas un retour 10 ans en arrière mais 20 ans, je trouve ça débile et surtout très laid, c’est sympa quand le scroll est fluide, mais la c’est juste saccadé, on dirait qu’on a 5 fps …
Et pourquoi ne pas mettre une video plus simplement ? C’est comme si j’allais au cinéma et qu’on me donnait la manivelle pour faire tourner le film …
Rémi, le
@Identitools : je n’avais pas du tout envisagé cet aspect sécurité/phishing, mais du coup c’est clairement important de ne jamais faire ça. J’ai mis à jour l’article avec ça, merci !
Felipe, le
« Empêcher de zoomer » > même avec un PDF, on peut (PDF quoi, « le truc qu’on peut pas modifier* et qui respecte ma mise en page en tant qu’auteur ») … c’est dire à quel point c’est abasourdissant sur un smartphone.
* soi-disant, ce mythe est tenace ^^
Identitools, le
@Rémi : De rien.
Je m’interroge si c’est bien suffisant. Je pense qu’il doit être possible pour un site de phishing de masquer la barre d’adresse puis d’en émuler une autre identique à la « native » en détectant le type de mobile/tablette qui le lit ainsi que le navigateur, non ?
Art Blackey, le
Eh ben je ne trouve pas sympa de vouloir rediriger automatiquement sur la version mobile, parce que ces scripts de redirection considèrent l’iPad comme un appareil mobile.
Et une version d’un layout designé pour un écran de téléphone, ça ne rend pas très bien sur une tablette qui a la résolution d’un ordinateur 17 pouces.