Le webdesign à l’heure des tablettes

On a eu plusieurs fois l'occasion d'évoquer entre nous, avec quelques amis et connaissances, cette tendance forte que l'on voit émerger dans de nombreux sites internet récents :

• retour à une ergonomie simple, sobre,
• restriction du nombre d'entrées, de rubriques,
• visuels omniprésents,
• utilisation de la hauteur, de la largeur de la page.

On a aussi remarqué qu'il devient plus rapide, plus efficace d'effectuer une réservation, une recherche précise sur certaines applications mobiles ou web apps, sur smartphone ou tablette, que sur le site internet de certains prestataires (Accor, Voyages-sncf par exemple).Plusieurs raisons à cela : en mobilité, on va droit au but, et les éditeurs l'ont bien compris ! Et la navigation est conçue pour s'effectuer au pouce, comme l'explique Google dans son site Howtogomo que Pierre avait décrypté dans un billet en novembre dernier, tout est là !Ce sont donc ces facteurs qui conduisent aujourd'hui les webdesigners à appliquer des règles identiques à tous les supports, ou encore mieux, à adapter automatiquement le contenu au contenant, à travers le concept de "responsive webdesign", qui implique de pouvoir lire aussi confortablement un site sur un terminal de 320x240 pixels en mode portrait que sur son écran fixe de 1920x1200 pixels en mode paysage.Pour ce faire, les deux mots de passe qu'il vous faut connaître sont HTML5 et CSS3, le premier étant une évolution du langage html permettant notamment la portabilité sur différents terminaux et préconisé par le W3C, le second signifiant "feuilles de styles en cascade", pour différencier le contenu du contenant. Je laisse les "techos", en commentaires, nous en dire plus que je ne pourrais le faire. En clair, si vous songez à refondre votre site, sachant qu'il risque de durer à peu près trois ans, imposez-les à votre prestataire !Pour vous donner une petite idée de ce que cela peut donner, le site Mediaqueri.es compile des copies d'écran sous quatre résolutions différentes de sites ayant adopté le "responsive design".On peut également y voir une anticipation des usages des internautes, de plus en plus mobinautes, ces derniers étant appelés à devenir majoritaires d'ici deux à trois ans. Et du coup, c'est plutôt la simplicité d'usage et d'ergonomie de la tablette qui va prendre le pas sur le site internet classique. Quelques exemples glânés ci et là :

• Unit Portables, un site qui va faire envie aux amateurs d'accessoires geeks : menu simple, voire basique, photo design des produits, adaptation graphique aux couleurs des produits présentés, et un site qui se navigue encore mieux au doigt qu'à la souris, pas illogique vu la cible !
• Avec Manufacture d'essai, on est dans la mode. On revient là au site qui tient en une page, comme il y a dix ans ! Le menu qui se déroule sur la droite de façon un peu gadget (pourquoi le cacher ?) servira surtout à la souris, puisque sur tablette, on va tout simplement faire défiler la page avec son doigt.
• Restons dans la sape avec Moods of Norway, qui lui n'exploite plus la page dans sa longueur, mais dans sa largeur ! L'invitation à "scroller" s'avère nécessaire, et vous permettra de naviguer dans la différentes rubriques avec un tracteur, un bateau, une limousine et un univers spécifiques à chaque grandes rubriques. Evidemment, le menu en haut peut vous éviter ce long scroll si vous n'êtes pas fan ou l'avez déjà expérimenté. Dommage en passant que les rubriques ne soient pas mise en avant à chaque fois que l'on avance vers la droite. Là encore, le doigt s'avérera plus intuitif que la souris.
• En Espagne, dans le luxe des fauteuils et canapés en cuir de Latorre, on exploite à la fois la longueur comme avec Manufacture d'essai, mais aussi la largeur, avec les photos qui défilent. Particulièrement efficace pour une démonstration en live sur tablette, et vis-à-vis d'une clientèle probablement suréquipée.
• Et parce qu'il n'y a pas le luxe et le glamour, parlons foot avec le Sparta de Prague ! Un visuel détonnant de la place principale et deux supporters (un homme et une femme !) bondissant sur leur canapé (ce n'est pas un Latorre a priori), un clin d'oeil au sponsor principal, et en gros, la chaîne Youtube, la page Facebook, et ce qui semble être des tweets de joueurs. Une flèche vers le haut et vers le bas indique que l'on peut naviguer : on retrouve en haut la chaîne Youtube et la page Facebook, et en bas, la billetterie et l'annonce des prochains matchs, un jeu vous invitant à poster vos photos prises dans le stade pendant le match (merci Google traductor !). Trois pages écran pour échanger avec les fans et leur vendre des places.
• Et pour terminer, le rassemblement des Combi de VW fait lui aussi dans la simplicité, le social, et répond d'emblée à 4 des 5 questions en W : What, Where, When, Why, le Who étant implicitement traité !

Et nous dans le tourisme ? Force est de constater, et nos taux de rebond souvent forts nous l'indique, que nous avons tendance à noyer nos internautes avec trop d'informations, trop de rubriques, un manque de hiérarchisation. Alors évidemment, vous m'objecterez que notre catalogue est souvent plus important que celui des quelques sites ci-dessus ? L'offre plus large ? Et bien il va falloir faire du tri. Parce que nous aussi, nos clients sont de plus en plus mobinautes, sur smartphone ou tablette, et le secteur privé a déjà bien investi le sujet. On vous parlait il y a quelques mois de l'application iPad de Jetsetter par exemple, dont le site internet reprend les codes également. Et dans le tourisme institutionnel ? Le CRT Paris Île de France avait bien tenté il y a déjà trois ans une navigation sur la largeur et la hauteur de la page, sans succès, car un peu trop en avance et avec quelques bugs techniques. C'est la Nouvelle-Zélande, novatrice comme à son habitude, qui s'y essaye avec son scoll sur la hauteur de la page d'accueil, permettant de passer plusieurs scénettes mettant en scène des touristes sur le territoires, et proposant des entrées thématiques, géographiques à l'intérieur. Encore faudra-t-il faire preuve de patience pendant le téléchargement, et avoir une bonne connexion, d'où probablement la non-transposition du principe sur le format mobile.