Je veux un site Mobile First

Nous recevons de plus en plus régulièrement des cahiers des charges précisant que le site doit "être conçu Mobile First", voire "être Mobile First". Si l'objectif de cette demande est le plus souvent de s'assurer que le site en question sera adapté aux smartphones comme aux ordinateurs "de bureau" (et donc, en théorie, à toutes les tailles d'écrans intermédiaires), la conception Mobile First met en œuvre des principes et des contraintes spécifiques, pour l'agence comme pour le client.

Mais d'abord, un peu de vocabulaire.

Responsive Web Design

Celui-ci est facile : il caractérise un design conçu pour s'adapter à toutes les tailles d'écran. Avoir un site responsive est désormais une quasi obligation (sauf si vous avez un site mobile dédié, par exemple). Pour atteindre cet objectif, vous devez employer une stratégie. C'est ici que vous faîtes un choix entre Progressive Enhancement ou Graceful Degradation.

Progressive Enhancement

L'amélioration progressive, dans la langue de Molière et de Booba, est une stratégie qui consiste à concevoir un site pour les terminaux les plus limités en fonctionnalités. On conçoit donc un site pour smartphone, avec toutes les contraintes que cela impose : (relativement) petit écran, connexion internet au débit potentiellement limité, pas de survol comme avec une souris, etc. Et on améliore progressivement les fonctionnalités du site pour les dispositifs ayant plus de fonctionnalités (une souris, un écran plus grand).

Graceful Degradation

L'opposé du Progressive Enhancement, la dégradation gracieuse (c'est pas beau en français, hein ?) consiste d'abord à concevoir un site pour "les grands écrans". Ensuite, elle consiste à modifier ses fonctionnalités au fur et à mesure que les capacités des terminaux diminuent. Comme la taille de l'écran, en particulier, mais vous commencez à saisir le principe. C'est souvent plus facile à faire au départ, parce qu'on est habitué à concevoir pour des grands écrans, puis plus compliqué au fur et à mesure qu'on se retrouve à se demander comment on va gérer sur un petit écran ce superbe schéma extrêmement détaillé qui donne tout son sens à votre page d'accueil.

Et le Mobile First, alors ?

Le Mobile First, vous l'avez peut-être compris, est un des principes de Progressive Enhancement. Concevoir Mobile First, cela signifie organiser toute la conception du site en partant des contraintes et des usages d'un smartphone. Il faut, pour que cette approche soit pertinente, que votre site cible un réel besoin des utilisateurs de smartphones. D'ailleurs, à quoi servent les smartphones ? Principalement à trois choses :

• obtenir des informations contextuelles, basées sur la localisation : "Quel est le bar servant des craft beers bio sans gluten le plus proche ?"
• réaliser une opération urgente, même si l'utilisateur ne se trouve pas devant le terminal idéal (répondre à un mail de son patron pour faire croire qu'on est encore au bureau, par exemple),
• passer le temps (dans les transports en commun, dans une file d'attente, pendant un repas en famille).

Content First

Concevoir Mobile First, c'est penser avant tout au contenu. Même si les écrans sont de plus en plus grands, la place reste une contrainte importante. Et, on vient de le voir, l'objectif pour l'utilisateur est d'aller vite. Ne soyez pas fixé sur l'objectif "d'augmenter le temps passé par les utilisateurs sur le site", comme nous l'expliquions dans cet article. Hors de question, donc, de noyer le visiteur sous des dizaines de fonctionnalités et de cacher votre contenu derrière une navigation compliquée.

Ah, les grandes images dans lesquelles le visiteur peut laisser son regard se perdre. Dîtes-leur au revoir. Crédit photo : oldskool photography sur Unsplash.

Et ça tombe bien. Un contenu rapidement accessible et des fonctionnalités faciles à utiliser, c'est également ce que souhaite le visiteur qui utilise un smartphone. Vous lui fournirez simplement des fonctionnalités supplémentaires qui améliorent son expérience, puisqu'il y a la place pour le faire. C'est exactement le principe du Progressive Enhancement, ça tombe bien.

Comment ça se passe ?

Exactement comme nous venons de le voir ensemble : nous commençons par concevoir des maquettes fonctionnelles pour smartphones, avec les fonctionnalités essentielles aux utilisateurs mobiles. Et c'est généralement là que ça se complique. Les clients s'inquiètent de ne pas voir certaines fonctionnalités, s'étonnent qu'il n'y ait pas de grandes images. Alors qu'ils ont engagé un photographe spécialement pour ça. C'est très compréhensible. Nous sommes habitués à voir et à valider des maquettes mobiles, cependant le fait de commencer par cette étape n'est pas complètement encore entré dans les habitudes. C'est pourtant le principe de base du Mobile First. Les agences (et les concepteurs de sites en général) ont donc un vrai travail d'éducation à réaliser en amont des projets, mais aussi des bonnes pratiques à mettre en place. On ne peut pas présenter une maquette mobile comme première étape de conception sans expliquer comment l'amélioration progressive va être mise en place. C'est à dire quelles fonctionnalités ont été mises en retrait, pourquoi, et comment elles vont venir enrichir l'expérience des utilisateurs sur tablette, puis ordinateur.