1485 sujets

Web Mobile et responsive web design

Une Alertbox toute fraiche de Jakob Nielsen:
http://www.useit.com/alertbox/mobile-usability.html

Beaucoup de discussions sur le Web mobile sont axées sur les technologies. Dans ces discussions, on détermine ce qui est faisable (technologies, compatibilité), et comment c'est faisable (techniques). Mais l'angle technique ne peut pas répondre à la question suivante: que faut-il faire?

C'est là que l'utilisabilité entre en scène. L'article de Jakob Nielsen prend pour point de départ l'expérience utilisateur du surf sur un mobile, fais des observations (utiliser un site sur mobile est une épreuve pour l'utilisateur, le taux d'échec est très élevé, les utilisateurs sont peu enclins à visiter les sites vu la difficulté à les utiliser...), et en tire quelques conclusions.

Je vous laisse découvrir ça.
Ah, sacré Nielsen ! Proposer DEUX sites mobiles à maintenir en parallèle du site "desktop" est carrément aberrant, non ? REviendrait-on à l'époque IE-NS ?

Il existe des technologies pour gérer les contenus envoyés aux mobiles permettant de venir à bout des problèmes qu'à juste titre il pointe du doigt (utilisabilité médiocre, non-ergonomie, faible bande passante, petites surfaces, disparité des outils, etc.), notamment en partant d'un contenu unique et en n'affichant que les parties destinées aux mobiles et sous un aspect designé pour eux.

La grosse question, souvent évoquée ici, est celle de la reconnaissance que l'UA est un mobile, à laquelle il n'apporte pas de solution concrète. Une autre question très importante qu'en revanche il n'aborde pas du tout est celle, autrement plus sidérante, que pose l'existence de "versions mobiles" maintenues en parallèle : comment, en surfant de site en site, passer à coup sûr de version mobile en version mobile ? Je suis sur un site A spécialement désigné pour un mobile, OK. Je clique un lien pour atteindre le site B et j'arrive où ? ... sur la "version desktop" de B. Je fais quoi alors, je cherche la version mobile - à supposer qu'il y en ait une ? Il est totalement déraisonnable de penser que cette affaire de double (triple ?) site solutionne quoi que ce soit : ça présuppose donc que l'utilisateur arrivera toujours par défaut sur une version "desktop" à peu près inutilisable, et qu'à partir de là, et à condition (1) qu'il parvienne à la charger, (2) à la consulter et (3) à l'utiliser, il se débrouillera comme il pourra pour trouver l'autre... Ça c'est n'importe quoi.

D'autre part, la part des écrans classé 1 par Nielsen (1. Regular cellphones with a tiny screen) n'est pas conçue pour (ni utilisée par...) les internautes mobiles. La part classée 2 va être très vite remplacée par du wide-screen, tactile ou pas. Construire une stratégie web mobile là-dessus ne tient pas. C'était vrai autrefois dans le desktop où il se passait des années avant que des changements majeurs se propagent, mais en mobile un an ou deux suffisent pour que les configs soient radicalement transformées. Je rappelle que les premiers 320x240 (ce qu'aujourd'hui on regarde comme de "petits écrans") n'ont que 3 ou 4 ans et que les "grands écrans" tactiles (wide-screen 400px) moins de deux ans. Et l'iPhone n'a qu'un an et demi.

Enfin le "GUI experience through a limited viewport" (utilisation d'une interface graphique utilisateur dans un espace limité) n'a plus beaucoup de sens comme concept à l'heure des netbooks, comme on en a déjà parlé souvent.

On n'a pas besoin d'une "version mobile" pour chaque site, mais d'une "édition mobile" pour chaque site. Ça fait une grosse différence. L'aberration consisterait à considérer que le couple (x)Html+Css viendrait à notre secours en gérant/masquant/réarrangeant les contenus : le problème est que ces contenus n'auraient jamais dû initialement quitter le serveur . C'est donc une gestion fine des contenus et de leur structuration, appuyée sur des langages serveurs, qui feront le web mobile, et sûrement pas la maintenance (avec le coût humain, énergétique, économique, gestion des erreurs, mise en conformation des contenus, etc. que cela implique) de deux sites distincts.

Juste un exemple : imaginons une boutique en ligne avec deux sites (desktop + mobile) et que suite à une mauvaise conformation des contenus les prix ne soient pas les mêmes... vous imaginez la suite ? Alors qu'avec un contenu unique servi sous deux éditions différentes la question ne se pose pas.

Alors pour moi cet article est un pur article d'un théoricien brillant, capable de poser avec intelligence et acuité (Nielsen quand même c'est pas n'importe qui) le doigt sur les vrais problèmes mais qui vire à la cata dès la première esquisse de proposition pratique.

On ne doit jamais oublier que l'apprentissage de la souris à déplacer sur un tapis et son équivalence écran d'une flèche glissant d'un bord à l'autre qu'on utilise en cliquant du doigt quand le texte bleu devient vert a été un apprentissage mine de rien assez complexe (sauf pour vous bande de djeunes qui êtes nés avec cet écran bleuté qui clignotait au dessus du berceau) et que de la même façon un apprentissage du web mobile DEVRA être effectué pour que l'expérience utilisateur soit pleinement satisfaisante. La difficulté est que pour le web "desktop" un outillage technique complet (souris+clavier+écran) existait déjà depuis plus de 10 ans lors de l'arrivée du web, ce qui n'est pas le cas du mobile. La conséquence est qu'il faudra attendre une génération d'internaute nés avec un web mobile dans le berceau pour que tout le monde soit content, et ça Nielsen n'y peut rien. Smiley lol
Arsene a écrit :
Juste un exemple : imaginons une boutique en ligne avec deux sites (desktop + mobile) et que suite à une mauvaise conformation des contenus les prix ne soient pas les mêmes... vous imaginez la suite ? Alors qu'avec un contenu unique servi sous deux éditions différentes la question ne se pose pas.

Donc, pour éviter ça, c'est base de données unique, modèles/classes/fonctions communes, et deux interfaces front-end différentes accessibles à des URL différentes? Auquel cas, c'est exactement ce que ne décrit pas Jakob Nielsen... parce que ce n'est pas son boulot de décrire un tel dispositif. Lui il se contente de dire «deux front-end séparés», ce sont ensuite aux architectes de l'information et développeurs d'être assez intelligents pour ne pas dupliquer les contenus, et réutiliser des méthodes communes... Donc bon, c'est pas incompatible...

Je sais pas, j'ai l'impression que tu as mal interprété la moitié de son article...
Modifié par Florent V. (18 Feb 2009 - 12:41)
oui possible... lu un peu en diagonale comme d'hab.

Mais quand même titrer :
a écrit :
A Separate Mobile Site Is Best
(trad sur le gaz : "Un site à part pour mobile c'est mieux")

et lire en dessous :
a écrit :
Moderately rich sites should build two mobile designs: one for low-end cellphones and another for smartphones and big-screen phones. This strategy is especially good if you're targeting a broad consumer audience with many feature-phone users.
(retrad sur le gaz : "Les sites moyennement importants devraient construire deux projets pour mobiles : un pour les très-petits écrans et l'autre pour les smartphones et les grands écrans. Cette stratégie est spécialement bien adaptée si vous visez un groupe de publics avec toutes sortes de téléphones")


et un peu plus loin :
a écrit :
For many sites, however, the only realistic option is to supplement the main site with a single mobile site
(et re-gaz : "Quoi qu'il en soit, pour de nombreux sites la seule option réaliste est de venir doubler le site principal par un site pour mobiles")

hé ben moi je dis que préconiser ça n'est pas raisonnable du tout, Nielsen ou pas.

Et non, pas deux URL distinctes mais un service web adapté au support requérant. D'où le groooos problème de la détection qui fragilise le dispositif. Cela dit, au pire, en cas de faillite de la détection, ce n'est pas si grave puisqu'on retombe dans la situation où la discrimination entre UA n'est pas faite et où on sert du bon gros "desktop" au mobile qui est généralement capable de s'en sortir.
Juste un exemple pour les images : un rep "img_mobiles" contient toutes les images du site à passer au mobile en version réduite et optimisées pour. La détection de l'UA déterminera simplement le rep où aller piocher les ressources. Les images portant strictement le même nom, on a bien UN SEUL document initial mais DEUX contenus différents servis. Les images inutiles sont en bg dans la Css et la Css "mobile.css" les évacue. Idem pour les scripts, etc. Le "service" des contenus textuels est plus complexe mais la logique reste la même, qu'on parte sur n'importe quel type d'organisation/gestion des datas (Bdd, fichiers .txt, XML etc etc.)

Contre sa théorie des sites doublés je maintiens que mon argument (à chaque changement de domaine on retombe sur la version desktop du nouveau site appelé) est bien la pire des choses qui soit et qu'il n'existe pas de moyen pour l'éviter autre que la détection. Et s'il y a détection alors autant l'utiliser et l'optimiser. Disons que le "double site" est une solution envisageable pour de l'intranet où les utilisateurs ne sont pas censés sortir du domaine. Pour de l'internet c'est suicidaire à tout point de vue.
Je me trompe peut-être, mais ce qu'il dit n'est pas contradictoire avec la détection.
Produire deux site différent, ne veut pas dire automatiquement 2 urls.

Je me demande parfois aussi si on ne veut pas à tout prix assimiler le Web Mobile ou Web dit classique pour en faire un même combat. Pourtant c'est tellement différent.
L'expérience utilisateur est différente, le fait même que c'est mobile change la donne.
L'utilisation et l'idée qu'on en a est à revoir.
Pourquoi ne pas d'un côté souhaiter une uniformisation et de l'autre côté s'adapter à ce qui se fait actuellement. Le bute finalement est d'arriver à toucher un maximum de gens, même si les moyens ne sont pas toujours les meilleurs ou ceux qu'ont voudraient.
Dindon a écrit :
Produire deux site différent, ne veut pas dire automatiquement 2 urls.


Ne jouons pas sur les mots. 2 sites distincts signifient 2 URL distinctes. S'il ne s'agit que de présentations différentes on ne peut pas parler de "site distinct" (déjà que le terme "site" lui-même est sujet à caution), sinon le même site consulté avec CSS est un site, sans CSS un autre site, sans Javascript encore un autre, etc.

a écrit :
L'expérience utilisateur est différente, le fait même que c'est mobile change la donne.
L'utilisation et l'idée qu'on en a est à revoir


Oui, et pour ce qui est à mi-chemin (quelque part entre le gros PDA et le petit netbook) on dit quoi ?
Je doute que par «deux sites distincts» Nielsen parle de deux traitements serveur+client différents pour une même URL. Non, il s'agit plutôt d'une distinction à la www.example.com / m.example.com.

Arsène, je ne suis pas sûr que le problème du suivi des URL soit si important que ça. Bien sûr, c'est une limite de la stratégie deux sites distincts, mais à mon avis ça ne l'invalide pas.

Pour les gros PDA et petits netbooks, c'est de toute manière délicat, qu'il y ait une URL ou deux. Le mieux est peut-être de laisser le choix (une version mobile passera forcément bien dans un petit netbook, et permettra d'avoir un accès plus direct à certains services, ce que les utilisateurs apprécieront peut-être... ou bien ils préfèreront avoir accès à la version «desktop»), avec peut-être quelques ajustements côté client sur la largeur (réduction du colonnage -> 3-4 colonnes vers 2 colonnes).

Partant, si le choix se fait avec deux URL distinctes plutôt qu'uniquement via un lien modifiant disons un cookie, n'est-ce pas tout aussi efficace et plus clair pour l'internaute?
Perso, je vais bientôt me lancer dans un thème pour mobile (avec mon site géré par Dotclear2) et on pourra passer d'une version à l'autre avec un thème switcher dans la partie publique du site.

En effet, si il est possible d'utiliser les media queries et autres techniques pour avoir un rendu adapté sur mobile, il n'en restera pas moins un problème : le poids de la page html, d'autant plus que dans le cas de l'iphone (et peut-être aussi pour les autres navigateurs mobiles basés sur webkit), il n'y a pas de mise en cache du code html. Je vais donc faire une page au code dépouillé, très légère, avec une css adaptée. Avantage : les liens seront les mêmes que l'on soit en version mobile ou normale, pas de contenu dupliqué donc. Smiley smile
Modifié par Patidou (19 Feb 2009 - 10:48)
@Patidou : je ne sais pas ce qui se cache sous ThemeSwitcher mais si c'est juste un skin qui masque certains contenus en CSS (display ou visibility ou autre) la question n'est pas là : elle est que tout ce que n'affichera pas le mobile ne doit pas sortir du serveur. Masquer à l'utilisateur un contenu qu'il aura chargé est la chose la plus inepte du monde : rien que les les emm... et aucun des avantages Smiley smile Il paye pour loader (en temps, en énergie, en coût, etc) et ne peut même pas voir ce pour quoi il a payé. Encore une fois c'est vraiment un travail au niveau de la gestion des contenus et des détections qui est au coeur de la question "mobiles".

@Florent : " Pour les gros PDA et petits netbooks, c'est de toute manière délicat, qu'il y ait une URL ou deux. Le mieux est peut-être de laisser le choix " Oui c'est comme ça que je travaille actuellement :
- si le mobile est détecté (media-query + JS + fix du viewport) et que handheld est reconnu, il charge l'interface CSS dédiée et une variable de session est créee ($mobile)
- si le mobile est détecté mais qu'il n'accepte pas handheld (c'est le cas aussi des netbooks) il charge screen par défaut en tant qu'interface et crée aussi $mobile. Un "skiplink" supplémentaire propose alors à l'utilisateur de basculer en CSS mobile (en tant que choix utilisateur réservé à ce cas de figure, ce "skiplink" est masqué dans la CSS mobile).
- si le mobile n'est pas détecté c'est que c'est un écran plus large. Sinon tant pis... disons que l'UA fait tout pour être inutilisable en tant que webviewer !

La session (ou un cookie, c'est pareil...) sert à filtrer le contenu qui sort au moment de la requête : images piochées ailleurs, contenus textes assemblés autrement par PHP, etc.
C'est sûr que ça fait un peu plus de travail de dév (quoique développer un second site n'est pas neutre non plus) et un peu plus de charge serveur mais en attendant qu'on y voie plus clair ça me semble la solution la plus performante actuellement. Elle répond à peu près à tous les cas de figures.
Mais je suis bien d'accord qu'on est devant un mur pas facile à franchir et que ces "bricolages" temporaires devront bien s'arrêter un jour avec des solutions plus sûres, plus stables et plus économiques.
Comme le dit le W3C dans son infinie sagesse : "until user agent..." : jusqu'à ce que les agents utilisateurs soient capables de le faire sans nous c'est à nous de le faire Smiley smile
Modifié par Arsene (19 Feb 2009 - 15:14)
Arsene,

Rien de tout ça, dc2 fonctionne avec des thèmes, par exemple celui qui est en cours sur mon site pour le moment est graylvetica. Normalement, le changement de thème est réservé à l'administrateur, avec le thème switcher (paramétrable) c'est le visiteur qui change le thème grâce à des liens (et un cookie) sur la partie publique. Tu peux voir le fonctionnement de la chose sur le site dotaddict donné plus haut en regardant les démos des thèmes (le contenu est le même, c'est l'habillage qui change). Smiley cligne
Modifié par Patidou (19 Feb 2009 - 16:31)