Le « mobile first » consiste à concevoir d’abord la version mobile d’un site. Et c’est très très à la mode. Mais nous, le mobile first, ce n’est pas notre tasse de thé… Sommes-nous à contre-courant ?
Pourquoi « mobile first » ?
Aujourd’hui, si tu ne penses pas mobile first, tu es comme les gens de 50 ans qui n’ont pas de Rollex : tu as raté ta vie.
En 2022, la part du trafic internet sur mobile pourrait dépasser les 60 % alors qu’elle atteignait péniblement 10 % il y a 10 ans. Une ascension vertigineuse à l’origine du « mobile first » : partant du principe que votre site sera majoritairement consulté sur smartphone, de nombreuses agences web conçoivent en premier lieu la version mobile d’un site. Logique nous direz-vous… C’est un point de vue. Et on ne le partage pas.
Pourquoi notre approche semble-t-elle à contre-courant de cette tendance majoritairement adoptée comme une vérité, un dogme ?
Sommes-nous sommes old school, dépassés ?
Nous sommes plus qu’une simple agence web
Pour la conception d’un site, notre travail consiste à mettre en scène l’identité visuelle au sein d’un site internet. Dit autrement : nous sommes une agence de communication visuelle qui fait du web.
Soit.
Mais qu’est-ce que ça change ?
Et quel rapport avec le « mobile first » ?
Épurer plutôt qu’enrichir
Ce n’est pas parce que les gens passent beaucoup de temps dans leur cuisine que les architectes conçoivent d’abord la cuisine puis la maison autour (hé hé, avouez que c’est bien vu !). Ainsi, lorsque nous abordons la conception de votre site internet – vitrine ou ecommerce –, nous concevons le plan d’ensemble puis soignons tout particulièrement la cuisine si c’est là que vous passez le plus clair de votre temps. Parce que c’est une démarche créative logique.
De la même façon : imaginons que vous veniez nous voir pour la création de votre logo, en nous disant qu’il sera majoritairement utilisé en version réduite sur de très petits supports. Faire du « very small first » reviendrait à produire d’abord la version réduite du logo, puis à l’enrichir. Or, votre logo et le socle de votre identité visuelle. À ce titre, il doit fonctionner dans tous les cas de figure : en petit, en grand, en noir et blanc, etc. Concevoir la version réduite en premier n’aurait pas de sens. À vrai dire, ce serait même impossible. Parce que comme son nom l’indique, elle est issue de l’original.
Webdesign « mobile only » : ergonomie et identité visuelle sacrifiées ?
On voit de plus en plus de sites conçus « mobile only ». C’est un choix délibéré où la version desktop est purement calquée sur la version mobile. Dès lors, visuellement, la version desktop n’est qu’un « gros site mobile ».
Or, naviguer sur mobile et sur desktop se fait naturellement de manière différente. Ça, c’est une question d’ergonomie.
Par ailleurs, les écrans desktop sont de plus en plus grands. Question webdesign, un « gros site mobile », c’est loin d’être la panacée.
Erreurs courantes issues de la démarche « mobile first »
En version desktop, il est souvent facile de repérer un site conçu « mobile first ». Parce que cette démarche est moins adaptée à une ergonomie et un webdesign soignés quelle que soit la taille de l’écran.
-
Non-respect de la hiérarchie de l’information
La hiérarchie de l’information permet de mettre en avant les éléments les plus importants. Or, on voit souvent des mises en scène inadaptées. Résultat : l’ordre des priorités n’est pas respecté et certains éléments capitaux passent presque inaperçus.
Par exemple, sur ce site, les éléments de réassurance passent au second plan de lecture. Or, le marché de la cigarette électronique étant hyperconcurrentiel, il est essentiel de se démarquer et que cela se voit.
-
Déstructuration des pages
Généralement, dans les versions desktop des sites « mobile first », les éléments sont simplement redispatchés tel quel sans tenir compte des spécificités de la navigation sur ordinateur. Conséquence : les pages sont déstructurées, et cela nuit à l’expérience utilisateur – ux.
On trouve par exemple beaucoup de menus type « burger », pas du tout adaptés à la navigation sur desktop – en dehors des rares cas où c’est un choix artistique pour la mise en valeur de très beaux visuels.
On voit aussi des éléments de navigation à des emplacements inadaptés, obligeant l’internaute à faire le grand écart avec sa souris d’un bout de l’écran à l’autre.
-
Webdesign : ça flotte
Quand la version desktop n’est pas réfléchie, on se contente généralement d’un fond de page pour « combler ». Parce que le container – espace dédié aux contenus – est beaucoup trop large. Résultat : l’espace n’est pas optimisé.
Bref, il y aurait mille choses à dire…
Alors ça se passe comment… Vous les faites quand maquettes de la version mobile ?
Nous maquettons d’abord la page en version desktop, puis – tant que c’est chaud – en version mobile. Et nous présentons le plus souvent les deux en même temps.
Les deux versions sont maquettées parce qu’elles ne répondent pas aux mêmes contraintes et aux mêmes exigences : elles ne peuvent tout simplement pas être les mêmes dans un format différent.
Comme nous l’avons dit plus haut, dans le cadre d’une démarche créative structurée, il est évidemment plus logique d’épurer que d’enrichir. De la même façon – oui, on aime bien les métaphores… –, les lignes de prêt-à-porter des grandes maisons découlent des collections haute couture, et non l’inverse : les designers « s’éclatent » puis ils épurent.
