Mobile first, c'est le bon sens

Introduction

La notion de Mobile First est connue, mais il me semble qu'il est nécessaire d'en reparler afin de bien faire comprendre son importance à tous. En effet, bien que comprise dans les grandes lignes, cette approche me parait bien trop négligée encore aujourd'hui et je souhaite montrer ici les différents avantages et vertus de cette technique.

La raison essentielle

Lorsque la prise en charge des medias queries s'est démocratisée sur les navigateurs, cela a donné des perspectives interressantes aux concepteurs de sites web.

Le responsive a fait son apparition (je ferai volontairement l'amalgame entre responsive et adaptive design tout au long de cet article, car la différence entre les deux ne remet pas en cause l'approche mobile first — me semble-t'il).

Et c'est là que s'est déclaré le problème majeur qui a conduit au Mobile First. On pensait "à l'envers" : faire rentrer une interface web complète dans un écran de téléphone, c'était impossible.

La réflexion a donc amené un raisonnement plus logique : étendre les fonctionnalités essentielles de la version mobile pour les agrémenter sur un grand écran — et pas l'inverse donc.

Le cheminement

Les mobinautes représentent un large pourcentage des utilisateurs. Bien entendu, ce chiffre varie selon les sites consultés, en fonction de leur thématiques, de leur public, etc. Dans tous les cas, sauf exceptions, ce panel d'utilisateurs n'est absolument pas négligeable. Et les chiffres progressent de jour en jour avec une part toujours plus grosse de consultations sur mobile.

On doit donc tenir compte de ce public la plupart du temps lorsqu'on pense à initialiser un projet web.

En ce sens, on doit se poser la question suivante lors de la conception de l'interface (On parle de User Interface — ou UI) et de l'utilisation qui va en être faite (On parle alors d'UX — pour User eXperience) :

Quelles sont les fonctionnalités nécessaires et incontournables de l'application qu'on devra implémenter sur un support mobile ?

Et par extension, il faudra d'abord développer les scénarios d'utilisation sur petit écran — et connexion faible voire inexistante (on reparlera sans doute rapidement de Progressive Web App dans le blog, mais ce n'est pas le sujet du jour). Les fonctionnalités seront alors pensées dans une approche mobile (exemple : pas de souris sur une tablette...) dans un soucis de simplicité maximale — à tous les niveaux.

Une fois la fonctionnalité définie, on pourra alors la repenser, l'adapter ou l'améliorer en terme de design ou d'interactivité pour les autres supports.

Notez que le cheminement inverse est parfois impossible !

Le poids

Un des avantages sérieux de la démarche Mobile First, c'est — notamment — l'expérience utilisateur qui n'en est qu'améliorée, ne serait-ce que par le côté allégé des éléments chargés sur le terminal.

CSS allégés

Le principe du Mobile First, outre la démarche en amont lors de la conception, est également appliqué sur le code CSS fourni au navigateur.

On commence par charger les déclarations pour les mobiles, puis les media queries prennent le relais de manière conditionnelle pour les écrans plus grands. Ainsi, le processeur du mobile ne "lira" que les déclarations qui lui sont assignées.

Medias adaptés

La connexion 5G qui s'annonce est prometeuse, et la 4G est d'ors et déjà très confortable. Mais parfois, on n'a pas de connexion (ou une connexion faible), et il faut en tenir compte. Les connexions sur un téléphone ne disposant pas de wi-fi justifient qu'on essayent de fournir des pages web relativement légères.

Du coup, on doit se demander si tel ou tel media est utile sur mobile. Une video, même légère, peut rendre votre page très lourde, voire inutilisable.

Tout est histoire d'expérience utilisateur : en se mettant à la place de celui-ci, on peut souvent savoir si on a besoin de voir cette photo-ci ou ce graphique-là.

Si une image n'a pour vocation "qu'à" habiller votre page, il est probable qu'il ne faille pas l'afficher sur téléphone...

Si une carte interactive peut être un plus agréable sur un écran 17 pouces, il n'en est pas de même sur un petit écran, surtout si cette carte occupe tout l'écran ! ("Faut-il que la carte occupe tout l'écran ?" "Ne devrais-je pas diriger l'utilisateur directement sur maps.google.com depuis un lien ?").

JavaScript/interactions évoluées

Comme pour les CSS, il faut adapter les interactivités qui nécessitent du JavaScript pour qu'elle soient minimes en terme de poids et aussi s'assurer que tout ça n'est pas trop gourmand en ressources. On a beau avoir des CPUs de plus en plus costauds sur nos téléphones, il est de bon ton de faire en sorte qu'un "vieux" support mobile puisse interagir convenablement sinon confortablement.

Mangez léger, c'est bien

Toute la démarche qui consiste à alléger au maximum les éléments d'une page web aura 2 principaux bénéfices :

• la rapidité d'affichage et d'éxécution bien sûr,
• mais aussi la recherche de simplicité qui est toujours une bonne pratique.

Le design et l'interactivité générale

La façon de naviguer sur un site web avec un téléphone est parfois pénible. Le simple fait de devoir se projeter dans son utilisation permet d'éviter des erreurs importantes.

Exemple : une navigation avec plus d'un sous-niveau est tout à fait inenvisageable sur un écran de 7cm... Et concevoir une arborescence adéquate ne sera jamais problématique une fois appliquée sur un écran plus grand.
Bien au contraire.

Il faut donc y penser lors de la définition de l'interactivité et de l'usage du site, de la page, et de la fonctionnalité à développer.

Ce que je veux dire, c'est que tout ça se pense dès le départ, que ce soit dans l'expression du besoin, ou dans la conception graphique, ou on s'exposera forcément a des problèmes.

Le SEO

La cerise. Google a déjà annoncé la prise en compte des sites optimisés pour mobiles. Cela signifie que votre site aura une meilleure note globale s'il est accessible correctement pour ces terminaux.

Il est à noter que les contenus masqués sur mobiles pour des raisons d'expérience utilisateur sont pris en compte par Google, comme l'a précisé Gary Illyes, ce qui n'a pas été le cas pendant longtemps.

Conclusion

Même s'il est à priori plus facile et plus rapide de concevoir un site web pour un écran d'ordinateur standard en imaginant qu'on pourra extrapoler une version mobile, il n'en est rien.

Dans le cadre d'une web app ou d'un site responsive, il est donc nécessaire de penser Mobile First.

De plus, cette approche a des aspects écologiques (si, si !) que j'évoquerai sans doute dans un prochain billet.