Mobile First

Mobile first ! Du mobile vers le PC

 

Le mobile est l’avenir du web, le trafic web mobile ne cesse de croître et l’arrivée de la 4G sur les smartphones et tablettes va accélérer encore plus ce phénomène. Les sites web tendent donc de plus en plus à proposer une solution de site mobile, site responsive ou une application.

 

Les enseignements tirés du mobile

 

Cela fait maintenant quelques années que le web est aussi conçu pour des appareils mobiles et c’est une bonne chose pour les sites internet d’une manière globale.
Oui, le mobile nous a appris beaucoup à nous, les professionnels du web. Et comme l’accès au web via PC n’est pas encore mort (loin de là) les règles de création des sites web mobiles s’appliquent de plus en plus aux versions PC.

Les contraintes du web mobile ont forcé les webdesigners à aller au plus simple et à rendre les sites toujours plus performants.
La taille réduite de l’écran nous pousse à mettre l’accent sur certains contenus, les réorganiser et même en retirer certains qui deviennent factices en situation de mobilité.
Considérer un internaute mobile comme “un oeil et un pouce”, tel que le définit Luke Wroblewski dans son ouvrage intitulé Mobile First, a permis d’améliorer la lisibilité, optimiser la navigation et réduire le nombre de clics. Le but est de permettre à des utilisateurs "distraits" de trouver une information plus facilement.

Pourquoi limiter ces optimisations aux mobiles, pourquoi ne pas les appliquer aux sites web d’une manière générale ?

 

Partir du mobile

 

La plupart du temps on créé un site web d’abord pour les ordinateurs, chose normale étant donnée que l’accès au web se fait majoritairement via PC.
On part donc d’une version PC pour l’adapter à une version mobile selon les principes du responsive design.

Responsive design l'approche dégressive

Mais au vu de la croissance du trafic web mobile et des avantages qu’il y a à les optimiser, pourquoi ne ferions-nous pas le chemin inverse ?
Inverser le processus de création des sites web et commencer par la version mobile avant de se consacrer à une version dédiée à un ordinateur c’est ce qu’on appelle de l’amélioration progressive ou plus communément le Mobile First.

Mobile first et responsive, l'approche progressive

Mobile First veut dire créer un site dans sa version mobile d’abord, dans laquelle on laisse de côté le contenu superflu, pas d’images inutiles ni d’éléments de design qui vont noyer le contenu. Sur mobile il faut aller au plus direct.

Les objectifs :

  1. Centrer l’attention de l’utilisateur sur le contenu.
  2. Optimiser les performances d’affichage et de chargement du site en créant un site léger.

Un site conçu de cette manière peut ainsi paraître assez minimaliste mais au final c’est même devenu une mode appelée “Flat Design”.

C’est seulement après qu'on se concentre sur la version PC en ajoutant des éléments de contenu qui n'étaient pas indispensables sur mobile à des endroits où de la place se dégage (écran plus grand = plus d'espace). On pourra alors ajouter des images, des ornements, des plug-ins de réseaux sociaux, des animations ou encore une expérience utilisateur sympa.
Le tout en respectant les principes fondamentaux du Mobile First qui sont "pas de superflu". Ainsi même la version PC va focaliser l'attention sur le contenu en lui même.

Vous constaterez tout de même que parfois on a juste l'impression d'être sur un mobile énorme plus que sur un PC mais ça marche bien, c'est très lisible et confortable.
Bien sur pour réussir un site Mobile First il faut des couleurs vives, des icônes pour habiller le tout façon légère et une belle police sur laquelle on peut jouer dans les titres, les liens et les couleurs.