Site internet responsive et « Mobile First » : Pourquoi est-ce si important ?

Cette méthode de développement et d’intégration de contenu permet, sur le papier, de s’adapter à l’outil de consultation utilisé sans pour autant multiplier les versions de ce même contenu. Le responsive web design se repose généralement sur les feuilles de styles (fichier permettant de régler et dicter le positionnement des éléments sur une page web) et les dernières techniques et standards de la programmation web.

Pour commencer, le principe du « mobile first » est plus lié à une méthode d’intégration de contenu web, que d’une réelle nécessité technique. Ce principe repose sur l’idée que les éléments d’une page web devraient être disposés et organisés, premièrement, pour une interface smartphone, et ensuite, pour une interface tablette et/ou ordinateur.

À la création du web design à proprement parlé, et encore aujourd’hui sur de nombreux sites, même les plus récents, les développeurs et/ou web designers se soucient bien plus du design d’un site sur une interface ordinateur que sur une interface smartphone.

Ce choix entraîne , lors du passage sur le design mobile, une nouvelle contrainte : la « dégradation élégante » (Responsive Retrofitting), ou encore « Comment enlever du contenu et/ou éléments de mon site web pour que ça loge sur mobile, mais que ça reste appréciable et surtout utilisable ? ».

Cette contrainte insinue donc que le design du site web va se voir modifié drastiquement, ainsi que son contenu, et il va en être obligatoire de sélectionner le contenu le plus pertinent et hiérarchiser ce même contenu par ordre d’importance et d’indispensabilité.

Ainsi, le « Mobile First » est tout simplement le fait de développer et designer un site web en partant de l’interface mobile et non celle de l’ordinateur. Par cette méthode, au lieu d’être contraint de retirer du contenu web pour que le site soit utilisable sur une interface mobile ou tablette, nous allons rajouter du contenu qui serra visible que lors du passage du mobile vers l’ordinateur.

De plus, grâce à cette manière de développer, il va nous être possible de ne modifier seulement le design , et pas ce fait le positionnement et la taille des éléments, d’un site sans pour autant affecter le contenu de celui-ci, même si ne pas rajouter de contenu n’est vraiment efficace que dans le cadre d’un site web qui se veut épuré.

Produire du contenu pertinent et savoir que une bonne partie ne serra pas visible sur mobile, c’est bien (en partie) ! Mais le « Mobile First », c’est mieux !

Jusqu’à maintenant, Google ne possède qu’un seul index (base de données de liens) de documents pour la recherche de site concernant le référencement. Mais, selon Gary Illyes, Webmaster Trends Analyst chez Google (porte-parole SEO), Google envisage de créer un index séparé pour la recherche sur mobile.

Et encore, ce n’est pas tout, Google compte faire de ce nouvel index, l’index principal et prioritaire de la recherche sur le moteur de recherche Google. Et ce changement radical n’est clairement pas là par pur hasard.

L’index du mobile devenant le principal index ou index primaire, il sera le seul qui va servir à répondre aux requêtes des utilisateurs sur le module de recherche Google, mais cette fois autant, voir plus, sur mobile que sur ordinateur.

Au début d’Internet, aucun téléphone mobile ne se connectait, et encore si ce n’est qu’ils devaient être mobiles. Cependant, plus de 20 ans après le Big Bang du Net, le mobile a dépassé l’ordinateur comme moyen d’accès à Internet (et ce n’est que le début), avec plus de 56 % des visites de site provenant des mobiles.

Et, selon Google, il est maintenant temps que les éditeurs de contenus comprennent que l’ère du mobile est en marche, et ainsi, qu’ils fassent dorénavant passer le mobile au premier plan, et donc qu’ils optimisent leurs sites afin qu’ils soient totalement compatibles avec le mobile.

Pour ce faire, dans un futur plus proche qu’on pourrait le penser, Google indexera en priorité les versions des pages mobiles en tant qu’index principal et non celles des pages Web pour ordinateurs, qui feront bientôt partie de l’index secondaire.

Et dans l’immense toile que représente le web, quand Google affirme quelque chose, il vaut mieux hocher la tête et faire ce qu’il demande si l’on veux rester premier résultat sur les pages de recherches.

Quelques astuces pour rendre son site responsive de manière automatique :

• Évitez le plus possible les dimensions en pixels (px) car celles si sont fixes, et donc non adaptables lors d’un passage sur une autre interface de consultation de contenu web. Privilégiez des unités de dimensionnement se référant à une valeur dépendante de l’interface utilisée. Pour en citer quelque unes : ◦ Hauteur de l’écran (vh → Viewport Height) ◦ Largeur de l’écran (vw → Viewport Width) ◦ Pourcentage de taille du conteneur (%) ◦ Proportion de la taille de police du conteneur (em) ◦ Proportion de la taille de police de la page HTML à la racine (rem).

• Intégrez au début de votre fichier HTML (dans le cas où vous développeriez votre site de A à Z) l’indication permettant d’informer le navigateur sur le fait qu’il n’as pas a juste écraser votre contenu, mais bien essayer de le replacer comme vous lui avez indiquer dans votre fichier de style.

• Préparez plusieurs versions d’images de tailles différentes pour ne pas vous débattre avec les navigateurs quand il s’agira de les redimensionner. De plus votre site sera plus performant car il n’aura pas à charger des images dont certains pixels et contrastes entre ceux-ci ne seront pas perceptibles, sur mobile, ou tablette pour exemple.