Conseils et bonnes pratiques pour ouvrir votre site aux smartphones
Il est temps d'ouvrir vos sites à l'Internet mobile. Un projet qui demande une bonne analyse des spécificités de ce nouveau canal. Recueil de conseils et de bonnes pratiques.
Comme beaucoup de révolutions, l'Internet mobile a été annoncé un peu trop tôt. Mais s'il était un peu en retard à son premier rendez-vous, il y a deux à trois ans, il ne fait aucun doute qu'il est parmi nous aujourd'hui.
Il y a six mois, on pouvait encore hésiter, mais en cette rentrée, l'heure est vraiment venue d'ouvrir votre site au Web mobile. Attendre que les navigateurs mobiles s'améliorent encore jusqu'à ce que votre site finisse par être utilisable n'est pas la bonne solution, car ça ne viendra pas.
C'est aujourd'hui que des places sont à prendre. Le Web mobile n'est plus tout à fait un territoire vierge, mais il est encore mal exploré et c'est maintenant que les internautes mobiles construisent leurs habitudes, enregistrent les favoris qui guideront leurs visites futures. Les gagnants du Web mobiles ne seront pas nécessairement ceux du web fixe.
Nous vous proposons ici quelques conseils et bonnes pratiques pour un projet mobile réussi.
Notons qu'il existe un foisonnement de possibilités spécifiques aux mobiles et externes au Web : localisation, orientation et accéléromètre, liaisons avec les applications embarquées, avec la téléphonie, lecture de codes barres 1 ou 2D. Ce sont des sujets également intéressants, mais nous restons ici focalisés sur le Web mobile.
Avant tout, il est intéressant de revenir brièvement sur les obstacles au Web mobile qui un à un ont finalement cédé.
Le premier obstacle était l'espoir qu'avaient pu nourrir les opérateurs de recréer le monde fermé du Minitel, un monde dans lequel chacun contrôlerait son portail pour ses abonnés et gagneraient non seulement sur les communications, mais aussi sur les services offerts. Ils y ont renoncé.
Le second était celui du débit, levé avec l'arrivée et l'extension progressive de la 3G.
Le troisième obstacle était celui des navigateurs, d'ergonomie médiocre, mais surtout interprétant le HTML d'une manière très personnelle. Aujourd'hui, on est passé d'une situation où les sites mobiles devaient s'adapter à tous les smartphones du monde, à une situation où, au contraire, un mobile qui aurait un comportement trop particulier serait disqualifié.
Et bien sûr, il y avait le coût. L'Internet mobile ne pouvait exploser que lorsque les factures n'exploseraient plus ! La généralisation des abonnements illimités règlera ce dernier point.
Nous sommes donc à une période charnière. Dans quelques années, le smartphone ne sera plus juste un nouveau moyen d'accéder au Web, mais sera devenu le principal moyen d'accéder au Web. Les débits vont continuer d'augmenter, et la qualité des navigateurs de progresser, et pourtant, on ne peut pas juste attendre la grande unification : le Web sur mobile nécessitera toujours des dispositions particulières, ne serait-ce que par la taille des écrans et la pauvreté des claviers. Alors, autant s'y prendre tout de suite et capter les nouveaux internautes pendant qu'ils sont à la recherche de sites efficaces.
Des attentes différentes
Avant même de parler d'ergonomie, il faut s'intéresser aux attentes de l'internaute. L'internaute mobile n'a souvent pas les mêmes attentes que l'internaute fixe. Il est sur le trottoir, dans un métro, dans un taxi, un train, une salle d'attente. Parfois il a un peu de temps à tuer, d'autre fois au contraire il est particulièrement pressé. Quoi qu'il en soit, il lui faut le plus souvent une information moins abondante et plus ciblée. Bien sûr, cela dépend de la typologie de site.
Pour un site d'information générale, on est plutôt dans le cas de la personne qui profite d'un moment de libre. Pour une compagnie aérienne, l'internaute veut probablement consulter les retards, ou bien s'enregistrer. Pour un site de distributeur, il est à la recherche du magasin le plus proche, et c'est cette recherche qu'il convient de mettre en avant. On le voit, les situations d'utilisation et donc les attentes peuvent déjà être différentes et il faut en tenir compte.
Articulation Web et mobile.
Les accès Web et mobile ne sont évidemment pas exclusif, au contraire ils peuvent être clairement complémentaires. Avec le temps, on verra certainement émerger une typologie d'internautes 100% mobiles, qui se passeront de poste de travail. Mais pour l'essentiel, on a affaire aujourd'hui à des internautes bivalents, qui accèderont aux mêmes sites parfois depuis leurs postes de travail, parfois depuis leur mobile, selon la situation. Pour eux, il convient de travailler cette complémentarité, de construire un site dont les services sont à cheval sur les deux accès. Ce qui ne signifie pas que tous les services du site doivent être accessibles tant en mobile qu'en Web, mais qu'ils tiennent compte de ce double accès, profitant des spécificités et limites de chaque canal.
Bien évidemment pour des sites qui permettent des espaces personnalisés côté Web, l'internaute doit retrouver sa personnalisation côté mobile, où elle sera plus précieuse encore. Plus l'espace et l'ergonomie sont réduites, plus le ciblage et la reconnaissance sont utiles.
Typiquement, pour des sites d'annonces, d'emploi ou de logement, on aura une articulation entre l'accès Web et l'accès mobile. Sur le Web, on profitera de la facilité de saisie pour définir ses critères de recherche, et sur le mobile on profitera d'un instant de libre pour consulter les annonces nouvelles. D'une manière générale, l'idée est qu'on prépare côté Web son expérience côté mobile.
Faire le meilleur usage de chaque pixel.
Dix fois moins de place
La spécificité la plus forte des mobiles est bien sûr la taille d'écran. La résolution la plus courante est le HVGA, soit 320x480. C'est presque 10 fois moins qu'un écran typique de poste fixe ! Et les pixels sont plus petits qui plus est. Les bons navigateurs mobiles parviennent à afficher une page Web normale dans cet espace minuscule, mais les internautes ne veulent pas passer leur temps à zoomer et dézoomer sur vos pages. Surtout s'il faut déjà zoomer pour voir les titres et savoir si l'article a quelque intérêt. Il est clair qu'il faut adapter son site à ce petit espace.
Fini les colonnes
Bien sûr, s'en est fini du colonage. Avec les écrans de plus en plus grands, le trois-colonnes, voire quatre, s'était généralisé. Sur les smartphones, on doit viser la colonne unique. C'est donc verticalement qu'il faut agencer navigation, contenus principaux, contenus connexes, contenus permanents. Mais en fait, il ne suffit pas d'empiler les anciennes colonnes, il faut commencer par faire un tri sévère : sur un site mobile, on ne répète pas les actualités sur chacune des pages.
Images réduites
Toujours, dans la catégorie « petit écran », il conviendra le plus souvent de redimensionner les images, et d'éliminer peut être certaines images d'ambiance, à faible valeur ajoutée. Ici la qualité des outils pourra rendre l'opération soit transparente, soit assez coûteuse.
Mise en page élastique
Les mobiles ont des formats d'écran divers, et peuvent s'utiliser en mode portrait ou en mode paysage. Dans le temps, la diversité d'écrans va s'accentuer, avec l'arrivée de tablettes situées entre smartphones et notebooks. Il est vrai que dans le Web, on trouve quelques sites dimensionnés en 640 ou bien en 800 pixels de large, et qui laissent d'immenses marges blanches sur les écrans modernes. Sur les mobiles, la surface d'écran est vraiment trop précieuse pour qu'on puisse la gaspiller ainsi. Il convient donc d'adopter une mise en page élastique, en particulier pour les blocs de texte, qui doivent se couler dans la forme de l'écran. Typiquement, il suffit que votre visiteur préfère orienter son téléphone en mode paysage pour que vous ayez un autre facteur de forme. Il ne faut pas, dans ce cas, que le texte s'arrête aux 2/3 de la largeur.
De même, avec les mobiles, la personnalisation de la taille des caractères sera plus utile encore. Il est impératif non seulement que votre site suive les changements de taille demandés, mais aussi qu'il ne casse pas sa mise en page.
Pages hautes
Malgré un chargement des pages long, et un écran petit, il faut ménager au visiteur des phases de lecture sereines. Il préfèrera attendre à la rigueur un chargement de page de 5 secondes, puis pouvoir lire tranquillement pendant 2 minutes, plutôt que d'enchaîner des cycles chargement-lecture de 3 secondes / 20 secondes. Il faut donc construire des pages raisonnablement fournies, et de manière à peu près systématique des pages hautes que le lecteur fera défiler à sa guise. L'habitude des pages hautes est déjà prise sur le Web, elle est encore plus incontournable sur les mobiles, et l'on pourra aller sans difficulté jusqu'à une dizaine d'écrans de haut, soit de l'ordre de 200 lignes de texte.
Contenu d'abord, navigation ensuite
On préfèrera parfois placer le système de navigation en bas de page, plutôt qu'en haut. En effet, la page est si petite que l'on ne verrait souvent qu'un menu, à partir duquel il faudrait déjà faire défiler pour apercevoir le contenu attendu. Dans certains cas même, l'internaute cliquerait sur un lien, et aurait l'impression que la page n'a pas changé, puisqu'elle commence toujours par le même menu.
Si l'on conserve le principe d'un menu supérieur, il doit être très compact, ne pas occuper plus du quart d'un écran typique (soit 120 pixels), et les liens de navigation plus nombreux doivent plutôt être trouvés en fin de page.
Des saisies laborieuses
Moins de saisie
Avec un mobile, le ratio de durée entre un simple lien sélectionné et une saisie de 8 caractères est très différent. La saisie au clavier est jusqu'à 20 fois plus lente. La navigation doit donc privilégier la simple sélection de liens, et éviter les saisies au maximum. Typiquement, une interface de recherche « à facettes », à base de liens successifs, sera beaucoup plus adaptée qu'une interface multi-critères à base de formulaire.
De même la traditionnelle case de recherche du site, qui était incontournable sur un site www, n'est pas toujours utile pour un site mobile, car autant une recherche rapide qui fait économiser 3 liens est précieuse sur le Web, autant en mobile, les 3 liens seront plus rapides qu'une saisie.
Penser aux gros doigts
Depuis l'Iphone, la navigation au doigt s'est généralisée. Elle a beaucoup d'avantages - on perd plus difficilement ses doigts - mais elle ne permet pas de viser aussi précisément. Il sera très difficile avec un smartphone de suivre des menus déroulants qui s'ouvrent sur plusieurs niveaux.
Veiller aussi à bien espacer les liens, pour permettre d'en sélectionner un sans erreur.
Des liens biens clairs
Sur les mobiles, il n'y a pas vraiment de « rollover », de survol à la souris. On ne peut pas compter sur la découverte des liens « à tâtons », ce qui déjà était une mauvaise pratique quoi qu'il en soit. Ainsi, plus encore que sur le Web, il est essentiel que les liens aient un code clair, et soient identifiés au premier coup d'oeil, sans ambiguïté.
Autres particularités
Des pages légères
Une autre recommandation importante concerne les débits, et donc le poids des pages. Avec la quasi-généralisation des accès ADSL, le poids des pages Web a beaucoup gonflé ces dernières années. Aujourd'hui 50% des sites ont un poids total de home page de plus de 350 kO. Les accès mobiles, même 3G, ont des débits variables, mais le plus souvent en dessous de 1 Mbps. Donc entre 5 et 10 secondes pour ces 50% de sites poids lourds. C'est trop. Votre site mobile doit viser des pages de moins de 100 kO, et même viser plutôt les 50 kO si possible. Souvenez-vous aussi qu'il reste des utilisateurs facturés au volume échangé. Ceux-ci seront particulièrement frustrés que vous ayez choisis des enluminures inutiles.
Bien sûr, les recommandations bien connues mais trop rarement appliquées sur le Web, sont plus encore d'actualité. Par exemple l'optimisation des images, le bon usage des directives de cache, la compression des flux, etc,
Les mobiles ont aussi un processeur beaucoup moins puissant, et même si leur logiciel supporte le javascript ils mettent plus de temps à l'interpréter. Les pages à la structure complexes, ou comportant beaucoup de javascript, seront donc des pages lentes, indépendamment même de leur poids.
Navigateurs divers
Il y a plus de navigateurs pour mobiles qu'il n'y en a pour postes de travail, et ils tendent à avoir des variantes. Et il est plus complexe de les tester tous, car on pourra rarement installer 4 navigateurs sur son téléphone. Il vaut donc mieux miser sur la simplicité pour assurer la compatibilité. Même si l'Iphone est très en vogue, il est loin d'être le seul smartphone. Ne faites pas un « site pour Iphone » (comme iphone.liberation.fr), faites bien un site pour tous les smartphones, ce n'est pas si difficile. Evitez surtout de vous lancer dans des clauses conditionnelles du type « si c'est un Iphone, alors ..., sinon, si c'est un Blackberry alors ... ». Vous n'en finirez pas. Visez plutôt un dénominateur commun qui traitera la compatibilité par la simplicité.
Ajax, doucement
Les bons navigateurs mobiles supportent le javascript, mais ce n'est pas parce qu'on peut faire de l'Ajax qu'il faut le faire. Les sites mobiles invitent à un retour à la simplicité. Comme on l'a dit, c'est un peu du fait de la plus faible bande passante et faible CPU, mais plus encore du fait de l'ergonomie beaucoup plus délicate. On aura beaucoup de mal à s'y retrouver sur un mobile avec une page qui bouge, dont des parties se rafraîchissent. Et quoi qu'il en soit, la page est si petite qu'on peut directement le rafraîchir en entier.
Malgré tout, il est un usage courant de l'Ajax qui peut avoir sa place, c'est l'aide à la saisie. Taper des caractères est si fastidieux, qu'un peu d'aide sera bienvenu. A condition que ça marche sans accroc, et que ce soit testé sur une multitude de téléphones.
De même, on supprimera, pour l'instant du moins, tout ce qui est Flash. Certes on va voir apparaître des navigateurs acceptant le Flash, ou du Flash-lite, mais ils sont encore très minoritaires pour l'instant. Et même lorsque ce sera possible, il conviendra encore d'en faire un usage modéré, avec une vraie valeur ajoutée pour l'internaute.
Les vidéos
De même, pour des vidéos, il faudra invoquer les players externes plutôt que de jouer en vignette incrustée dans la page.
D'une manière générale, sur les mobiles, on fonctionnera moins par applications incrustées dans les pages, mais davantage par applications externes. Malheureusement, le moyen de créer un lien vers une application externe dépend le plus souvent de la plateforme.
Moins de contenus ?
En amont même de l'ergonomie et du design, il faudra peut être mener une réflexion sur les contenus eux-mêmes. On peut envisager que les contenus du site mobile ne soient qu'un sous-ensemble de ceux du site Web, une sélection des meilleurs morceaux.
Les sites mobiles utiliseront généralement un sous-domaine en http://mobile.votredomaine.fr. Il existe un domaine top-level en « .mobi », mais il n'a pas grand intérêt. Il est préférable de savoir reconnaître (au moyen du paramètre « user-agent ») les mobiles, parmi les terminaux qui se connectent à votre site www, et de savoir les rediriger automatiquement vers votre site mobile. Ainsi, si l'utilisateur clique sur un lien http://www.votredomaine.fr, il sera redirigé immédiatement vers http://mobile.votredomaine.fr, pour une meilleure expérience de navigation. Pour économiser de la saisie, on pourra accepter aussi http://m.votredomaine.fr, qui redirigera alors vers le http://mobile.votredomaine.fr .
Malgré cela, il est bon de prévoir aussi le chemin inverse, c'est à dire permettre à un visiteur du site mobile de basculer sur le site www s'il le souhaite, pour des contenus plus complets peut être, ou bien parce qu'il voudra voir exactement ce que voient les internautes non mobiles.
Notons que certains acteurs, amazon.com par exemple, servent le site mobile sur leur adresse www, en reconnaissant le terminal mobile, mais sans rediriger. Ca ne nous semble pas être le meilleur procédé, précisément parce que cela retire le choix aux internautes.
Pour celui qui dispose déjà d'un site Web, il faut impérativement construire son site mobile sur les mêmes outils, sur la même base de contenus, et les mêmes processus d'alimentation.
Nouveaux gabarits, nouvelle navigation, sélection de contenu spécifique, retraitement des images, tout cela sur la même base de contenus... il est clair que les sites qui disposent de bons outils de gestion de contenus et mettaient en oeuvre les bonnes pratiques auront peu de difficulté à prendre ce virage et s'ouvrir aux mobiles. La promesse qui leur avait été faite de pouvoir aisément publier les mêmes contenus sur d'autres canaux va enfin pouvoir être tenue.
Conclusion
Depuis les débuts du Web, nous avons vu nos clients se préoccuper de vieux navigateurs en fin de vie, pour assurer une compatibilité maximale. Il est temps de se préoccuper des navigateurs en début de vie.
Comme on l'a vu, le Web mobile exige un retour à la simplicité, et une certaine prééminence du fond sur la forme. La conception d'un site pour mobile aura sans doutes moins besoin de graphistes créatifs, et davantage besoin d'ergonomes avisés, mais aussi de concepteurs qui réfléchissent à un service approprié à ce nouvel accès.
Malgré notre enthousiasme, ne croyez pas que votre site mobile va représenter 10% de votre trafic bientôt ! Il faudra vous contenter d'une toute petite audience au début, même si elle est en croissance rapide. Ce qu'il faut avoir en tête, c'est que les internautes mobiles utiliseront plus encore leurs favoris, et un peu moins de Google (la saisie, toujours...). Ils seront donc plus encore fidélisés par un petit nombre de sites qu'ils auront sélectionnés, accessibles d'un seul clic. C'est une raison supplémentaire pour donner à ces visiteurs la meilleure expérience possible dès à présent, avant qu'ils n'aient mis vos concurrents parmi leurs favoris.