Meilleures pratiques de conception pour vos sites web mobiles

« Mobile has won« , voilà en substance ce qu’Eric Schmidt, le président de Google, a déclaré sur Bloomberg TV en début d’année. Cette affirmation résume bien la situation dans laquelle nous nous trouvons : un quotidien où les terminaux mobiles sont omniprésents. À partir de ce constat, combien de temps allons-nous nous voiler la face et continuer à penser qu’une application iPhone sous-traitée à un prestataire est une stratégie mobile viable ? Il s’est vendu plus d’1 milliard de smartphones en 2013, optimiser votre site web pour les terminaux mobiles est une priorité parfaitement légitime. Le problème est que la conception optimisée pour smarpthones et autres terminaux mobiles est un exercice qui se complique d’année en année.

Il existe bien des « règles ergonomiques » (7 unbreakable laws of user interface design) et des conventions de conception (Pour bien démarrer dans la conception d’interfaces mobiles), mais elles s’appliquent avant tout aux applications mobiles, ces fameuses applications qui ne sont installées que par une infime partie de vos clients et prospects. Là nous parlons des 99% d’utilisateurs restants, ceux qui vont consulter votre site web sur un smarpthone.

Ces dernières années, la profession s’est enflammée pour le responsive design, cette technique de conception qui permet d’avoir une mise en page qui s’adapte à la largeur de l’écran. Nous savons aujourd’hui que le Responsive Web Design n’est pas une solution, c’est un compromis (même le cabinet Forrester le dit : Responsive Web design not a long-term solution to mobility). Il faut donc investir un minimum de temps dans la réflexion et la conception de la version mobile de votre site web. Heureusement pour vous, il existe une littérature assez détaillée sur le sujet : Ten best practices for designing mobile websites, The top 10 mobile design mistakes, and how to avoid them et 10 Best Practices for Mobile Web Development.

Je vous propose une synthèse de ces articles :

  • Privilégier toujours la performance et la simplicité d’usage sur les aspects esthétiques. J’ai l’impression d’enfoncer une porte ouverte, mais il est toujours important de rappeler ce conseil et de le laisser en tête de liste (cf. Building Smartphone-Optimized Websites).
  • Ne privilégiez pas une application sur un site web. Les applications coûtent chers à développer / maintenir et elles sont compliquées à référencer. Sauf dans le cas très particulier où vous avez des millions de clients qui utilisent votre site toutes les semaines (SNCF, Ventes privées…), un site mobile est de loin la solution la plus rentable. Et surtout arrêtez de faire la promotion de vos applications sur votre site web, ce phagocytage peut se révéler très dangereux.

    Exemple de bandeau parasite pour forcer l'installation d'une application mobile
    Exemple de bandeau parasite pour forcer l’installation d’une application mobile
  • Utilisez une URL unique. Il est très tentant de partir sur deux sites avec deux URLs distinctes, car cela facilite grandement l’organisation des ressources et développements, mais une version en .mobi ou m.URL.com va affaiblir votre référencement. Comme écrit plus haut, le responsive design n’est pas une solution viable, mais il existe d’autres solutions comme la substitution d’éléments côté serveur (Améliorez la performance de vos interfaces mobiles avec RESS) ou l’utilisation de librairies prévues à cet effet comme Mobify.js.
  • Adoptez une approche d’amélioration progressive. Maintenant qu’il y a plus de smarpthones que d’ordinateur, la norme est de concevoir en premier lieu pour les terminaux mobiles, c’est la philosophie du mobile first. Dans ce cadre, les techniques de progressive enhancement sont à privilégier sur celles de graceful degradation. Comprenez par là que les choix par défaut doivent positionner le curseur sur les terminaux mobiles et non les ordinateurs, notamment en ce qui concerne la résolution de référence des images. Les techniques de développement modernes permettent de substituer une version d’image à une autre en fonction du type de terminal, il convient alors de charger par défaut une image de faible qualité et de la remplacer par une de meilleure qualité si c’est opportun, et non l’inverse.
  • Utilisez des tailles de police et des zones de détection plus larges. Le doigt n’est pas un périphérique de saisi très précis, il convient donc de ne pas proposer des menus ou boutons trop petits sous peine d’augmenter les erreurs de manipulation (cf. Recommandations de taille pour les éléments d’interfaces mobiles).

    La taille des items de navigation de ce menu sont trop petits pour un smartphone
    La taille des items de navigation de ce menu est trop petite pour un smartphone
  • Méfiez-vous des pictogrammes. Les pictos sont très pratiques, car ils ne prennent que très peu de place et, car ils n’ont pas besoin d’être traduits. Le problème est qu’ils peuvent être mal interprétés, voir pas du tout. Si le menu de type « hamburger » semble s’imposer comme un standard de conception de facto, bien que pas forcément bien assimilé par le grand public, certains pictos sont carrément impossibles à déchiffrer. N’hésitez pas à faire des recherches et à tester vos pictos pour vous assurer qu’ils ne sont pas un frein.

    Ces pictogrammes ne sont pas très intuitifs
    Ces pictogrammes ne sont pas très intuitifs
  • Vérifiez le point de coupure de vos pages. Tout comme sur les ordinateurs, la limite de visibilité est un critère très important à prendre en compte, surtout pour les boutons d’action principaux. Vérifiez donc que vos messages et boutons principaux sont visibles sans avoir besoin de scroller la page.

    Exemples de limite de visibilité d'une pafge web sur un smartphone
    Exemples de limite de visibilité d’une page web sur un smartphone

 

En plus de ces conseils, je vous invite fortement à consulter les bibliothèques de meilleures pratiques comme celle-ci en anglais : Mobile Web Best Practices, ou la liste des bonnes pratiques Web Mobile proposées par Opquast, un chantier collaboratif lancé l’année dernière : Une checklist Opquast Web Mobile ? Chiche !.

3 commentaires pour “Meilleures pratiques de conception pour vos sites web mobiles”

  1. Posté par David Massiani a dit : le

    De bons conseils à suivre.

  2. Posté par John a dit : le

    Mais oui, arretons les appli mobile, tous aux sites webs.
    A part que cette annee encore, le temps passe sur appli surpasse largemement celui passe sur les sites webs lobile (80/20).
    Les gens veulent des apps mobiles, natives, reactives et pratiquent, un point c’est tout

  3. Posté par Frédéric Cavazza a dit : le

    @ John > Pour mieux appréhender cette question, il convient de faire abstraction des applications du type Facebook, Twitter ou outils de communication (WhatsApp, Tango…). Là je pense que le rapport entre appli et site web est beaucoup plus équilibré. C’est comme si vous me disiez : « les internautes passent 100% de leur temps sur des applis (ex : Word, Outlook…), donc les sites web sont inutiles ». Je reste persuadé que le réflexe de développer une application mobile en première instance n’est pas viable.