Par abus de langage courant, on mélange souvent un site « responsive » à un site « compatibles mobiles » voir « compatible touch devices ». La différence est pourtant majeure, il y a d’ailleurs 2 mots distincts pour les différencier: « Responsive design » et d’ « Adaptative design ».

Si la différence vous échappe, je vous recommande l’excellent article de Viljami Salminen ou sa traduction en français par Stéphanie Walter.

Voici quelques pistes et solutions tirées de mes expériences afin de ne pas se limiter au responsive, mais bien de tendre vers une expérience utilisateur adaptée aux devices mobiles et tactiles.

Je pars du principe que votre site est déjà responsive.

Rapidité d’un site sur mobile:

C’est une évidence simple impliquant des solutions parfois lourdes : le critère le plus flagrant dans l’expérience utilisateur d’un site mobile est sa rapidité de chargement.

Les bases

Il y a dans un premier temps les best practices standards à tout site web:

  • regroupement et compression du code (html, css, js);
  • ordonnancement des inclusions (le javascript en bas de page au possible, …);
  • allègement des médias :
    • on supprime les exifs et metas des photos,
    • on utilise le progressive pour le jpg,
    • on utilise des CDN ou des sous domaines headless,
    • on compresse tout ce qu’on peut…

Ligne de flotaison

Dans le cadre de pages longues, on se focalisera sur l’optimisation du content au dessus de la ligne de flotaison. C’est indispensable pour toute page d’entrée à minima: homepage, landing page, …
Si vous souhaitez implémenter cette solution, envisagez la assez tôt car son impact en terme de code n’est pas négligeable. A titre indicatif, sur un site basé en drupal comportant 7 layers différents, il m’a fallut 4 jours sachant que le code était plutôt propre et bien organisé à la base

Rapidité perçue et rapidité réelle

Dans bien des cas, malgré vos effort, le chargement de la page restera long à cause des médias, des limitations de vos serveurs, … Néanmoins, vous pouvez jouer sur la perception de l’utilisateur afin qu’il n’en ressente pas de désagrément. Pour ça, on s’attachera à rendre un premier affichage au plus tôt, même si tout le contenu n’y est pas. Dans les solutions usuelles :

  • chargements de contenus déportés (en ajax) et lazy load, en prenant garde tout de même aux impacts SEO si vous êtes sur un site publique;
  • rendu de la page et affichage d’un loader, dans lequel il faudra afficher une animation (via textes, image de loader, …) pour faire patienter sans ennuyer ;
  • rendre le layout correctement quitte a ce que les contenu mettent un peu de temps (par exemple, les images sont dimensionnées meme si elles ne sont pas encore chargées).

Accessibilité mobile

La littérature abonde, les minimums recquis étant pour moi:

On a des gros doigts

Tous les éléments cliquables se doivent d’être suffisamment grands et espacés pour être cliqués avec un doigt.

Navigation visuelle

Les éléments de navigation (menu, boutons de navigation) doivent être visibles et facilement accessible. Je pense notamment au site dont les pages sont longues. Si le scroll est simple sur un navigateur web, remonter tout en haut d’un très long article sur mobile est fastidieux. Par ailleurs, la navigation par historique – page précédente / suivante – est assez peu utilisée sur les mobiles, et vos utilisateurs doivent pouvoir facilement accéder aux autres contenus de votre site.

Réactivité de l’interface

L’expérience utilisateur est fortement induite par la réactivité du site. D’emblée, il faut savoir que cette problématique n’a pas forcément de solution. Si votre site nécessite du temps réel ou beaucoup d’interactions / animations, vous serez confrontés aux limites techniques du web. Facebook s’y est d’ailleurs cassé les dents. Il existe néanmoins de très nombreuses techniques à essayer avant de jeter l’éponge.

Lag du clic

Je vous ai déjà parlé et donné la solution concerant ce fameux lag de 300 millisecondes, ça se résout très simplement.

Les éléments scrollables

Tout élément scrollable autre que la page elle même à de facheuse tendance à être ralenti. Pour ça, il existe la propriété CSS overflow-scrolling disponible sur iOS. Elle active « Le Momentum Scrolling », rendant la navigation plus fluide. Vous trouverez un exemple sur cette page. Son implémentation n’est pas nécessaires sur toutes les versions iOS/android, mais qui peut le plus peut le moins..


overflow-y: scroll; /* il faut que ce soit scroll, pas auto! */
-webkit-overflow-scrolling: touch;

Le natif avant tout

A l’ère des UI designs, certains frontistes et designers tendent à redesigner des éléments natifs (champs textes, radio, selects, …). Si c’est visuellement plus joli, c’est au mieux peu réactif en navigation mobile, au pire inutilisable ou pas accessible. Pensez donc, au mieux à utiliser les éléments natifs, au pire, à faire un fallback vers des éléments natifs sur les devices mobiles et tactiles…

Statut « active » des éléments sur mobile

Au clic, l’utilisateur doit avoir une réponse immédiate. En CSS, il existe justement le statut « :active » pour ça. Malheureusement, ni iOS ni Android ne respectent correctement cet état. Pour qu’il le prennent en compte systématiquement, il vous faudra ajouter dans votre JS :

document.addEventListener("touchstart", function(){}, true)

Vous pourrez alors personnaliser votre style si ce n’est déjà fait. A noter qu’il vous faudra modifier la propriété css « -webkit-tap-highlight-color », spécifique aux touch devices affectant la couleur de l’état :active. Une autre solution techniquement plus lourde mais complète consiste aussi à gérer le déclenchement des états actifs par vous même. A vous de choisir.

Des animation rapides

Si vous avez besoin d’animation sur votre site, essayez là encore de le faire avec le langage natif léger adapté: le CSS. Si vous tenez tout de même à animer des éléments en javascript, faites le avec une fréquence de 60fps (donc 15 millisecondes tout compris). Au delà, l’animation paraitra saccadée.

Pour le css, il faudra faire attention aux animations et transitions au hover ou au clic et implémenter obligatoirement l’astuce JS du status active. Je vous recommande en outre l’excellente librairie de composants CSS TopCoat, ou la librairies Effeckt, chacune axées sur des solutions performantes pour animer vos éléments de façon efficaces.

Utiliser les gestures mobiles

Avec l’avènement du mobile, sites et applications ont tendance à converger en terme d’UX, et les reflexes naturels de gesture mobile peuvent déjà être implémenter sur vos sites. Le pull to refresh par exemple (je tire l’écran vers le bas pour rafraichir le contenu d’une liste par exemple) s’implémente très rapidement grace à hookjs. La librairie Hammerjs est aussi un atout à garder sous le coude pour la gestion du touch, que ce soit en utiliser une de ses implémentation de base, ou en réalisant votre propre gesture.