Le multi-écrans doit réinventer notre conception d’un site web

Dans cet article, je vous parle de la création de site multi-écrans, il est important de le dissocier de la stratégie globale multi-écrans qui s’appuie sur la complémentarité des écrans. Ainsi, un contenu pourrait s’afficher en télévision et s’étendre sur le mobile pour permettre aux internautes de réagir. Il pourrait également vous permettre de commencer une commande sur un smartphone, et la terminer sur votre PC. Ce concept fera probablement l’objet d’un article dans les mois à venir.

Depuis le début du Web, nous avons créé des sites pour les écrans de PC. Lorsque l’on parlait de multi-écrans, on prenait la résolution comme seul et unique paramètre, et la solution a été souvent de réaliser le site en 768px de large pour les écrans de 800 pixels, puis, 990. Les internautes qui surfaient sur des écrans de 1280px ou plus ont eu droit à une pub au format skyscraper pour remplir la zone vide, la chance…

Avec l’arrivée des tablettes, puis des smartphones, le défi est devenu plus important. Il fallait passer un site de 990px au minimum de large en 320px pour les smartphones et 768px pour les tablettes. Et ce n’est qu’un début, car, certains smartphones Android ont une résolution de 380px(*2) de large, les tablettes sont également de plus en plus différentes.
Une galère? On ne peut pas pour autant nier l’importance d’une stratégie multi-écrans tant les tablettes et smartphones sont de véritables succès.

Les responsive web design est finalement apparu comme la solution idéale au défi du multi-écrans en permettant à un site de s’afficher de façon optimale quel que soit la résolution, généralement, en créant des CSS qui s’appuient sur les media queries.

Cette solution est plus économique, mais également très restrictive. La première restriction, c’est évidement le fait que la conception du responsive design démarre du site mobile, le site web pour écran Full HD ne serait qu’une déclinaison d’un site mobile. C’est particulièrement frappant sur un site tel que Gizmodo, très léger ou Mashable qui utilise un affichage en tuile.

Mais nous oublions souvent l’autre problème, c’est que les tablettes et smartphones n’ont pas que la résolution qui est différente d’un site classique. Chaque format a ses spécificités.

Le site mobile

  • Il doit se charger rapidement.
  • Le site doit prendre toute la largeur de l’écran.
  • Le moins de chargement de page possible, donc retour à la règle des 3 clics. Je dirais même 2, comme Amazon qui a créé une option «1-Click» pour effectuer des commandes.
  • L’écran est tactile et supporte de plus en plus souvent le mouvement de doigts appelé généralement «Swipe»!
  • Les internautes n’aiment pas écrire de longues phrases sur un site mobile.
  • Le smartphone est équipé d’un Appareil photo numérique et d’un caméscope, mais tous les navigateurs mobiles ne permettent pas de télécharger des photos. Proposez une option d’envoi par email si possible.
  • On regarde moins de vidéos sur smartphone
  • Le flash n’est pas admis
  • Pas de popup
  • Les internautes ne sont généralement pas connectés sur Facebook et Twitter lorsqu’ils passeront sur votre site mobile, car ils préfèrent utiliser les applications dédiées au smartphone. Les boutons «like» fonctionnent donc moins bien sur smartphone.
  • Le mouseover n’est pas possible

Le site pour tablettes.

  • Le site doit prendre toute la largeur de l’écran, mais supporter à la fois le mode vertical et horizontal.
  • Les internautes scrollent de haut en bas, mais également de gauche à droite.
  • L’écran est tactile supporte de plus en plus souvent le mouvement de doigts appelé «Swipe»!
  • Les internautes apprécient de lire de longs textes sur tablette, car ce format est particulièrement bien adapté à la lecture.
  • Les internautes apprécient de regarder des vidéos.
  • La tablette est souvent équipée d’un Appareil Photo Numérique mais tous les navigateurs mobiles ne permettent pas de télécharger des photos. Proposez une option d’envoi par email si possible.
  • Le flash n’est pas admis.
  • Pas de popup.
  • Les internautes ne sont généralement pas connectés sur Facebook et Twitter lorsqu’ils passeront sur votre site, car ils préfèrent utiliser les applications dédiéesà la tablette. Les boutons «like» fonctionnent donc moins bien.
  • Le mouseover n’est pas possible

Le site pour PC

  • Le site ne doit pas prendre toute la largeur de l’écran, car en 1920 de large, il serait inconfortable. Il ne doit pas non plus être trop étroit.
  • Pas de support du Swipe
  • Le PC n’est pas toujours équipé d’une webcam.
  • L’internaute ne regarde pas l’écran dans son entièreté, pour cette raison, les liens les plus importants doivent être placés stratégiquement. Par exemple, il était intéressant auparavant de placer les liens les plus stratégiques près de la scrollbar verticale puis que le curseur de la sourit est généralement à proximité. Néanmoins, ceci ne vaut plus pour les Mac et sur PC, on utilise souvent une roulette de souris pour scroller.

Bien entendu, cette liste n’est pas exhaustive, mais elle vous donne une idée des nombreux défis d’ergonomie à relever pour le créateur d’un site web responsive.

L’autre possibilité, c’est la création d’applications natives dédiées aux systèmes d’exploitation iOS, Android et Windows Mobile. Le coûtp est évidemment bien plus élevé, mais parfois, le résultat en vaut la chandelle.
Hormis les différents avantages en terme de Marketing et de fidélisation, les applications permettent de jouer un peu plus avec les fonctionnalités des devices comme le GPS, l’interaction avec les médias sociaux ou l’APN. Ainsi, le développeur maîtrise mieux sont environnement et peut, par exemple, manipuler les photos ou exploiter le swipe.

L’écran d’une tablette ou d’un smartphone est figé, il faudrait peut-être oublier le défilement vertical que l’on retrouve sur tous les sites, mais au contraire, repenser la conception d’un site web comme si vous n’aviez jamais surfé sur le net. L’application Flipboard est assez intéressante, car la navigation par flip est, en plus d’être originale, très pertinente.

Sur tablette, on peut également exploiter la navigation par swipe horizontale, et par exemple, en profiter pour placer de la publicité pleine page entre 2 écrans que l’on appelle ‘inter-screen’. L’application permet également de supporter un mode offline et beaucoup d’autres choses. Récemment, on a vu des applications de tous les jours tels que l’agenda et la boîte email se réinventer sur Mobile grâce à de très bon travail d’ergonomie, je pense à Mailbox ou Sunrise .

Et au vu des réactions, on peut considérer qu’il y a une vraie attente de la part des internautes de pouvoir découvrir de nouvelles expériences utilisateurs exploitant parfaitement les spécificités des nouveaux écrans.

Et pourquoi les vieux écrans ne s’inspireraient pas des nouveaux écrans?

Personnellement, je trouve plus confortable de lire mes flux RSS sur tablette que sur un ordinateur, pas vous? Je pense que les codes d’ergonomie du PC sont à revoir, mais justement, on y arrive peu à peu. Windows 8 supporte le tactile, mais IE10 a encore du travail. Les Mac utilisent les mouvements multitouche depuis quelques années et je fais partie de ceux qui pensent que c’est une vraie révolution, mais ça peut aller plus loin, évidemment.

Pour les sites internet, nous nous sommes habitués à des codes qui doivent également changer, Facebook et Google tentent des expériences intéressantes en terme de design et ergonomie et avec le responsive design, on a vu de plus en plus de menus de navigation fixés, une tendance qui s’était perdu qui pourtant a du sens en terme d’ergonomie, le fait de pouvoir scroller séparément des zones de la page pourrait également s’imposer.

Mais on tourne en rond, on a l’impression de retrouver le web de l’époque des frameset, parce que l’on s’inspire des apps iOS et Android qui fonctionnent naturellement de cette façon. Ce n’est en rien révolutionnaire, tout juste un retour aux sources. Les vrais changements apparaîtront avec la fin de la souris, lorsque tous les ordinateurs seront tactiles, ça semble peu probable, mais pourtant, on y arrivera un jour et sur ce point, c’est Microsoft qui a pris de l’avance.

Pourquoi en suis-je convaincu? C’est pourtant évident, les fabricants d’ordinateurs devront rapidement répondre à la demande de la génération «tactile», cette génération d’internautes qui ont commencé à surfer sur un iPad mais qui seront à la tête des entreprises de demain. Si le secteur de l’informatique de bureau ne veut pas disparaître, il suivra. La bonne nouvelle, c’est qu’enfin l’HTML5 pourra devenir le langage universel du web, car il n’y aura de moins en moins de raison de créer des interfaces différentes pour tous les supports et ceux qui seront coincés avec leur souris devront utiliser des raccourcis clavier improbables pour contourner le problème.

Avec ma boule de cristal, je prédis un renouveau des sites internet inspiré directement des interfaces des tablettes. Un métier qui se réinvente sans cesse, c’est ça que j’aime dans le web.

Vous désirez réagir à cet article? Retrouvez-le sur la page Facebook de Techtrends

la diffusion d’annonces sur ce site relève de ma responsabilité et ne représente pas les positions d'une entreprise pour laquelle je travaille

Rédigé par
Chris Lefevre
Publié le
27 juillet 2013

12:01

Partagé sur
Partager+Twitter
Partager+Facebook
Partager+LinkedIn
Partager+Google+
Partager+Scoop-it!