Il y a de grandes chances que vous lisiez cet article depuis votre téléphone. En effet, en France près de 70% de la navigation internet s’effectue désormais sur mobile. Qu’est ce que cela implique pour la conception de votre site web ?
Depuis pas mal de temps déjà, la technologie du responsive design permet un affichage mobile adapté, mais pourquoi faut il aller plus loin dans votre démarche de construction de site web en raisonnant mobile first ?
Tout d’abord, c’est quoi le responsive web design ?
Le responsive web design (RWD) est une technologie de création de site web, qui fait qu’un site web s’ajuste automatiquement à l’espace disponible sur l’écran sur lequel il est consulté. C’est à dire que les éléments du site changent de place pour s’afficher correctement et sans avoir à zoomer. En fait, la plupart des thèmes WordPress ont déjà inclus cette technologie.
Quelle est la différence entre mobile first et responsive design ?
Le mobile first inclus la technologie responsive, mais correspond plus à une approche incrémentale de design produit. Lors de la conception du site web, on va imaginer à quoi devrait ressembler le site sur un mobile ( le mobile ici design le smartphone, et pas les tablettes), et, seulement dans un deuxième temps, on imaginera le site web pour la version ordinateur. Ainsi, avec le mobile first, on commence donc par penser aux besoins minimaux du site sur le mobile, aux fonctionnalités essentielles, et ensuite on enrichit, si nécessaire, les éléments pour la version desktop. Cela s’oppose à la version traditionnelle de construction d’un site où l’on avait tendance à implémenter un certain nombre d’éléments, qu’on supprimait ou masquait pour que le site consulté sur mobile soit plus allégé.
Le mobile first, vers la simplicité et l’éco-responsabilité
Le mobile First est donc une approche pour aller à l’essentiel, garder votre site simple et fonctionnel pour le mobile. Nous, développeurs informatiques, sommes d’ailleurs habitués à cette approche avec le développement en mode agile qui incite à prioriser les fonctionnalités. Il en résulte des sites allégés, avec de meilleurs performances, une vitesse de chargement plus rapide, et donc plus “eco-responsables”. Si Internet était un pays, il serait le troisième plus gros pollueur mondial. En matière d’émissions de CO2, internet pollue 1,5 fois plus que le transport aérien. Nous ne pouvons pas rester insensible à cela, et devons intégrer dès qu’il est possible cette approche plus saine de conception.
Le mobile first privilégié pour le référencement avec Google
Google nous incite à tester et améliorer les performances des sites web avec des outils mis à disposition. Concrètement, votre site internet est visité par les robots google pour l’indexer dans les résultats de recherche, et notamment par le Googlebot pour smartphone. L’algorithme de Google prend donc en considération les critères “mobiles” pour établir son classement et faire apparaître votre site plus ou moins haut dans les résultats de recherche. Voilà qui est dit…
Vous savez à présent ce qu’est le mobile first et pourquoi c’est important pour votre entreprise.
Concrètement, un site conçu pour le mobile c’est donc :
Un choix de fonctionnalités minimales et essentielles
Pour garder son site simple, chaque élément doit être fonctionnel. Donc, pas de pop-up intempestifs, pas de pubs inutiles. Pour les photos, on doit se poser la question de savoir si cette photo apporte vraiment quelque chose au visiteur. Il en est de même pour les animations. Le formulaire a t il besoin d’avoir tous ces champs, etc….. d’ailleurs ne serait il pas plus pertinent de relier mon site directement à WhatsApp plutôt que de proposer un formulaire ? Voilà les dilemmes auxquels nous devrons faire face lors de la construction de votre site web.
Un contenu simplifié et plus structuré
Le contenu de vos pages doit être plus clair, plus concis pour l’utilisateur qui lit votre contenu sur petit écran. Le contenu de votre site web doit être également plus structuré pour le référencement mobile avec Google. Cela implique plus de des titres, sous titres, paragraphes courts et espace d’aération.
Un travail sur la performance su site
Pour que la vitesse de chargement des pages soit améliorée, après avoir limité le nombre d’éléments sur la page, on travaille sur la taille des images et leur compression. On peut aussi déférer le chargement de certains scripts et mettre en place un cache pour servir les pages plus rapidement sans avoir à multiplier les requêtes au serveur.
Des fonctionnalités en phase avec l’usage mobile
Votre site mobile doit susciter les interactions avec vos visiteurs, avec des boutons de partage pour les réseaux sociaux, en navigation fixe par exemple comme un menu de mobile, avec peut-être un chat de messagerie. Il faut prévoir un bouton pour scroller efficacement et remonter en haut du site. Il faut adapter les call to actions en privilégiant les actions en lien avec la messagerie du téléphone.
