Responsive design et Mobile first : ​De quoi parle-t-on ?

Le mobile-first désigne le fait de construire un site en prenant en compte l’architecture mobile et tablette en premier, c’est-à-dire les éléments importants seront mis en avant dans l’ordre voulu sur mobile et tablette.

Le responsive design est un design qui s’ajuste automatiquement en fonction de la taille de la fenêtre, permettant une lecture du site quelque soit le support. Pratique également, mais il ne permet pas de définir l’ordre d’agencement des éléments sur support mobile. Pour certains sites, lorsqu’il y a beaucoup d’éléments sur la version bureau, on se retrouve avec une version mobile très longue.

Pour résumé, le responsive c’est la conception de l’interface pour ordinateur adapté aux mobiles et tablettes tandis que le mobile first se concentre sur la conception mobile puis l’adaptation sur ordinateur. La question qui se posera sera : Faire un site responsive design ou mobile-first ? La réponse n’est pas évidente mais reste qu’il faut que le site web soit visible et ergonomique sur tous supports.

Le Responsive design c’est donc la capacité d’une interface web à s’adapter à la résolution d’un écran mobile. En fonction de la taille de l’appareil utilisé, l’interface s’aligne automatiquement à la résolution de l’écran. L’utilisateur peut alors visualiser le site web sur son appareil mobile, avec le même niveau ergonomique que sur un ordinateur. Le contenu de cette interface est réduit et se concentre sur l’essentiel. On évite de surcharger la page par des informations non indispensables au risque de dégrader l’expérience utilisateur.

• Agrandissez et réduisez la taille de la fenêtre du navigateur sur ordinateur, si l’interface s’adapte, c’est que le site est responsive.
• Utilisez des outils tel que le test d’optimisation de Google, Viewport resizer ou Responsinator pour simuler l’affichage sur mobile. 

• Développer une interface attractive avec un affichage adaptable. Cela garantit un site ergonomique sur la majorité des navigateurs
• Alléger la structure, le code et donc accélérer le chargement des pages
• Consolider le référencement naturel du site (SEO). Cela permet par la suite d’augmenter sa visibilité et sa position dans les résultats de recherche 

Le Mobile first est une conception qui découle du Responsive design mais qui est centrée vers les mobiles et déclinée ensuite seulement pour les écrans d’ordinateurs. 

Le contenu doit être optimisé pour s’adapter à la contrainte de la taille restreinte du mobile. Il faut donc le purger des informations superflues, de façon à mettre en avant seulement l’essentiel.

Quels sont les avantages du Mobile First 

• Assurer la cohérence ergonomique sur toutes les plateformes
• Alléger la taille du site et réduire son temps de chargement
• Faciliter le travail des développeurs et réduire le temps de programmation.

Certaines erreurs sont toutefois à éviter quelque soit la technique employée :

• Se concentrer sur des tailles d’écran prédéfinies plutôt que sur un design adaptable
• Oublier la version bureau
• Cacher du contenu sur la version mobile au lieu de réduire les informations
• Modifier la navigation à tel point que l’on peut avoir l’impression d’être sur deux sites différents.

La décision finale est simple à prendre, utilisez le 80/20. Si 80% de votre public cible utilise un ordinateur, optez pour un Responsive design. Si, au contraire, 80% utilisent un mobile, utilisez la conception Mobile first. 

Il faut garder à l’esprit qu’au-delà de la conception d’un site web en version classique, mobile first ou responsive design, il s’agit pour certaines entreprises d’un impératif pour attirer des clients car la consultation des sites web sur un mobile est forte et toujours en croissance.