Site responsive design ou mobile first ?
Vous avez certainement déjà entendu ces deux termes, mais saviez-vous qu’ils ne désignent pas la même technique de conception de sites internet adaptés aux terminaux mobiles ?
Un site dit mobile first est un site internet dont le webdesign (UI) et l’expérience utilisateur (UX) ont été pensés en priorité pour une utilisation sur des terminaux mobiles. Toute la conception du site web est étudiée pour que l’expérience de navigation sur mobile soit optimale malgré toutes les contraintes liées à ces supports. Vitesses de connexion aléatoires, écrans plus petits, effets visuels réduits, etc. Cela ne signifie pas pour autant que ces sites ne sont pas consultables sur de grands écrans, bien au contraire, les sites web mobile first s’adaptent aux écrans d’ordinateur et offrent le même confort de navigation sur ordinateur que sur mobile.
Avec le responsive design, c’est tout l’inverse, web designers travaillent en priorité pour les ordinateurs de bureau et viennent ensuite s’adapter au format des écrans de téléphone ou tablette. C’est une différence subtile, mais importante, car en responsive design seul l’affichage est adapté pour les smartphones sans tenir compte des autres contraintes techniques des téléphones portables.
La mise à jour page experience de Google en juin 2021 va encore plus favoriser les sites internet qui s’affichent de façon optimale sur mobile en insistant sur les temps de chargement (LCP), l’interactivité (FID) et la stabilité visuelle de l’interface (CLS).
En 2021, le trafic Internet mobile représente déjà 55,56 % du trafic total, il est donc primordial de mettre le mobile au cœur de la stratégie digitale de votre entreprise.
1. Les avantages de la mise en place d'une stratégie mobile first par rapport au responsive design
La mise en place d’une stratégie mobile first est un choix d’autant plus pertinent, si vous visez une bonne position dans les résultats des moteurs de recherche.
Google a mis en place un index mobile first qui favorise les sites web proposant une bonne expérience sur les téléphones portables et a annoncé que l’indexation mobile first se ferait pour tous les sites web, à partir de Mars 2021. Depuis ces changements, 37 % des URL disparaissent du top 10 lors des recherches sur appareil mobile et seul 11 % conservent le même positionnement entre les recherches sur mobile et sur ordinateur. 31 % des URL disparaissent même carrément du top 100 des SERPs sur mobile alors qu’elles y sont présentes sur ordinateur.
En plus de vous apporter un meilleur référencement naturel et donc plus de trafic organique, un site mobile first améliore aussi l’expérience utilisateur et donc votre taux de conversion. Ce sont deux autres des avantages d’une stratégie de conception web orientée mobile first.
2. Quels sont les caractéristiques d’un site « mobile first »
Quand un site est conçu selon les principes de l’approche mobile first, il est totalement adapté à une navigation sur appareil mobile et dispose donc des caractéristiques suivantes :
Largeur des pages totalement adaptée à la taille des écrans des terminaux mobile.
Format, taille et poids des images optimisés spécifiquement pour mobile.
Blocs de textes adaptés (Police, taille, longueur des paragraphes, etc.) pour être lisibles facilement sur mobile.
Design optimisé pour être attrayant sur les petits écrans.
Disposition des liens hypertextes et Call-to-Action (CTA) adapté au mobile.
Optimisation des menus de navigation sous forme de “menu burger”.
Temps de chargement très faibles même avec des connexions en 3G.
Technologies backend prévues spécifiquement pour le mobile. (Minification CSS, Compression Gzip, Mise en cache, etc.)
3. Comment savoir si son site internet est « mobile friendly» ?
Il y a plusieurs façons de tester un site pour savoir s’il est adapté aux mobiles :
Utiliser l’outil de test d’optimisation mobile de la Google search console.
Utiliser la fonction Lighthouse de votre navigateur Google Chrome (sur le site Internet, effectuez un clic droit et sélectionnez « Inspecter », puis Ligthhouse)
Utiliser l’outil Test My Site de Think With Google.
Avec ces outils, vous pourrez visualiser votre site et tester sa compatibilité avec les mobiles.
Vous aurez également des recommandations personnalisées pour améliorer les performances de votre site internet. Si jamais vous souhaitez confier ces optimisations à une agence de création de site internet, vous pouvez nous contacter via le formulaire de notre site internet.
4. Que faire si mon site est incompatible mobile ?
Comme nous l’avons vu précédemment, le trafic sur mobile surpasse maintenant le trafic sur ordinateur de bureau, il est donc essentiel d’avoir un site web adapté. Si après avoir effectué vos tests, vous vous rendez compte que votre site web n’est pas adapté aux mobiles et tablettes, alors la création d’un nouveau site internet ou tout du moins une refonte globale s’impose.
5. Comment effectuer la refonte et le web design de son site pour le rendre “mobile friendly”
Plusieurs possibilités existent pour effectuer la refonte de votre site web et le rendre compatible avec les exigences de Google.
Créer un site mobile dédié sur une URL à part (déconseillé)
Il s’agit d’une des méthodes les plus anciennes pour adapter rapidement un site aux mobiles, néanmoins nous déconseillions fortement sa mise en place, car elle amène son lot d’inconvénients. Cette méthode est une solution palliative, elle ne doit être utilisée qu’en attendant qu’une solution viable soit mise en place (par ex la création d’un nouveau site mobile first).
Cette méthode consiste à créer un site dédié aux mobiles sur une URL dédiée, ce nouveau site serrait une copie du site pour ordinateur de bureau ou le contenu est tout bêtement mis à l’échelle pour être lisible plus facilement sur les mobiles.
Cette méthode apporte un gros risque de duplicate content, car tout le contenu se trouve sur deux urls distinctes au mot près.
Refondre son site grâce au Dynamic Serving
Avec ce type de configuration, l’URL du site et son contenu reste une URL unique. Par contre, les contenus HTML et CSS varient en fonction de l’appareil que l’internaute utilise. Le contenu du site s’adapte de manière dynamique à l’interface du visiteur en fonction de ce que l’on appelle l’user agent.
Cette procédure s’avère contraignante, car vous devez mettre à jour régulièrement la liste des user agent et adapter l’affichage du site en fonction de la taille de l’écran des nouveaux terminaux qui arrivent sur le marché (Tablettes/Téléphones/Autres…).
Obtenir la compatibilité mobile par la méthode du responsive design
La solution du responsive est la solution perenne la plus simple pour adapter un site aux écrans mobiles. Cette méthode permet de prendre en charge de façon automatique et optimale près de 90 % des résolutions d’écrans, car le contenu vient s’adapter à l’écran de façon proportionnelle. Cette approche est la norme depuis 2013.
Si votre site a été créé récemment, il est fort probable que sa navigation intègre par défaut le responsive design.
L’inconvénient du responsive design est que le site a été d’abord été pensé pour des ordinateurs de bureau et ensuite adapté aux smartphones, ses performances ne sont donc pas optimales et il sera donc pénalisé par rapport aux sites mobile first sur Google.
Créer un site mobile first
La création d’un site mobile first reste la solution idéale pour être parfaitement en phase avec les attentes de Google et apporter une expérience utilisateur optimale à vos visiteurs. Si vous avez un projet de refonte de site web ou de création de site internet, c’est la solution idéale pour vous.
La création d’un selon le concept site mobile first allie le meilleur des deux mondes.
Nous espérons que cet article vous a plu, si c’est le cas n’hésitez pas à le partager sur vos réseaux sociaux.
