Comment adapter votre site Internet aux mobiles

Pour qu’un site Web soit plei­ne­ment uti­li­sable sur smart­phone ou tablette, il doit être adapté aux appareils mobiles. Vous pouvez pour cela créer une version mobile d’un site Web ou optimiser un site pour mobile à l’aide d’un design adaptatif ou res­pon­sive.

Pourquoi l’op­ti­mi­sa­tion mobile d’un site Web est-elle in­dis­pen­sable ?

Une mise en page conçue pour un écran de 17 pouces ne peut pas être sim­ple­ment réduite pour un affichage sur tablette ou smart­phone. Les dif­fé­rences ne con­cer­nent pas uni­que­ment la ré­so­lu­tion d’écran, mais aussi les modes de saisie, l’in­te­rac­tion tactile ou à la souris, les pro­por­tions d’affichage et les vitesses de réseau. Autant de raisons d’examiner sé­rieu­se­ment comment optimiser un site Web pour mobile, sans com­pro­mettre son uti­li­sa­tion sur or­di­na­teur.

Les solutions ayant fait leurs preuves sont :

• Mise en page res­pon­sive : la mise en page s’adapte au­to­ma­ti­que­ment aux dif­fé­rentes tailles d’écran et ajuste la dis­po­si­tion des contenus en fonction de l’espace dis­po­nible.
• Mise en page adap­ta­tive : le site charge des versions de mise en page pré­dé­fi­nies selon le type d’appareil, détecté côté serveur ou côté client. Cette approche permet d’optimiser de manière ciblée, par exemple en allégeant la version mobile et en ajustant pré­ci­sé­ment les éléments et la na­vi­ga­tion.
• Site Web mobile ou ap­pli­ca­tion séparée : cette solution répond à certains projets spé­ci­fiques, notamment lorsque des fonc­tion­na­li­tés mobiles dédiées ou des ex­pé­riences im­mer­sives sont né­ces­saires. Elle est toutefois de moins en moins utilisée, car elle augmente l’effort de dé­ve­lop­pe­ment, la main­te­nance et la frag­men­ta­tion.

À cela s’ajoutent de nouvelles exigences et tech­niques :

• Le design mobile first s’impose désormais comme standard : la con­cep­tion débute sur les petits écrans, puis s’étend aux formats plus grands.
• L’op­ti­mi­sa­tion des per­for­mances est devenue in­con­tour­nable : temps de char­ge­ment, Core Web Vitals et gestion raisonnée des images et des scripts in­fluen­cent di­rec­te­ment la durée de visite et les taux de rebond.
• L’in­te­rac­tion tactile et l’ergonomie jouent un rôle clé : boutons suf­fi­sam­ment grands, es­pa­ce­ments adaptés, na­vi­ga­tion intuitive et prise en charge des gestes.

Nous mettons en lumière les avantages et les limites de ces approches et montrons quelle solution permet de créer un site Web mobile friendly et d’atteindre le niveau de mobilité adapté à votre projet Web.

Quels sont les enjeux d’un site Web optimisé pour mobile ?

Google accorde une grande im­por­tance au fait que les sites Web s’affichent cor­rec­te­ment sur les appareils mobiles. L’accent est mis sur la con­vi­via­lité (UX). Les terminaux mobiles disposent d’écrans plus petits que les PC ou les or­di­na­teurs portables et se com­man­dent prin­ci­pa­le­ment par des gestes tactiles ou de balayage.

À cela s’ajoute le fait que la bande passante des con­nexions Internet mobiles est souvent limitée. Les pages Web qui ne s’adaptent pas à la taille de l’écran ou qui reposent sur des éléments au survol ne peuvent ni s’afficher cor­rec­te­ment ni offrir une uti­li­sa­tion con­for­table sur mobile. Lo­gi­que­ment, Google les exclut de la recherche Web mobile ou les signale comme ina­dap­tées. Pour les ex­ploi­tants de sites Web, cela se traduit par d’im­por­tantes pertes de trafic et, par con­sé­quent, par une baisse du chiffre d’affaires.

Comment savoir si votre site Web est mobile friendly ?

Pour vérifier si votre page Web est adaptée aux mobiles, vous pouvez effectuer un test rapide et simple en ligne. De nombreux pres­ta­taires mettent à dis­po­si­tion des outils d’analyse gratuits à cet effet. Nous re­com­man­dons les solutions suivantes, qui per­met­tent de soumettre votre site Web à un test mobile :

• Ligh­thouse : l’outil open source d’analyse de la qualité des sites Web Ligh­thouse permet d’évaluer l’uti­li­sa­bi­lité mobile.
• Analyse de Site Web de IONOS : IONOS propose un outil gratuit per­met­tant de vérifier si un site Web est optimisé pour les mobiles. Pour analyser le code source, l’outil nécessite uni­que­ment l’URL du site. Outre l’affichage de la page Web sur dif­fé­rents appareils, l’analyse couvre trois autres aspects es­sen­tiels d’un projet en ligne réussi : la vi­si­bi­lité dans les moteurs de recherche, la sécurité du site Web et le temps de char­ge­ment des pages.

Quelles approches existent pour créer un site Web mobile ?

Selon le projet, plusieurs options per­met­tent de concevoir un site Web in­dé­pen­dam­ment de l’appareil utilisé : sites Web mobiles distincts, modèles de site Web mobiles en mise en page adap­ta­tive ou res­pon­sive, ainsi que solutions de plugins pour les systèmes de gestion de contenu.

Sites Web mobiles

Les sites Web mobiles cor­res­pon­dent à des documents HTML créés sé­pa­ré­ment du site principal et destinés ex­clu­si­ve­ment à un usage mobile via une URL distincte. Les offres mobiles sont gé­né­ra­le­ment ac­ces­sibles via le nom d’hôte « m » (m.exemple.fr), tandis que la version standard du site reste dis­po­nible sous « www » (www.exemple.fr).

Idéa­le­ment, chaque page dispose également d’une version mobile. Les sites Web mobiles ne doivent toutefois pas forcément être des équi­va­lents 1:1 de leurs versions pour or­di­na­teur. Proposer une page Web mobile en com­plé­ment de la version de bureau est surtout pertinent lorsque les visiteurs con­sul­tent, en situation de mobilité, d’autres contenus que depuis un PC à domicile.

Les sites Web mobiles sont conçus pour les smart­phones. Cela implique une adap­ta­tion à la taille réduite de l’écran, l’uti­li­sa­tion de boutons larges et l’absence de gra­phiques gourmands en données. Sur d’autres appareils mobiles, comme les tablettes, les sites Web mobiles optimisés pour les smart­phones ne s’affichent pas toujours de manière optimale. Il existe néanmoins des cas d’usage dans lesquels la création de sites Web mobiles distincts reste per­ti­nente.

Mise en page adap­ta­tive

Une al­ter­na­tive au site Web séparé pour l’usage mobile consiste à utiliser une mise en page qui s’adapte au­to­ma­ti­que­ment au terminal utilisé. L’affichage d’une page Internet se base alors sur la zone visible de l’écran, appelée viewport. Les mises en page adap­ta­tives reposent sur des break­points définis de manière fixe, c’est-à-dire une grille de con­cep­tion re­la­ti­ve­ment rigide qui propose dif­fé­rentes vues pour des viewports pré­ci­sé­ment définis. Il est courant de prévoir une version pour or­di­na­teur, une version tablette et une version smart­phone. En revanche, une adap­ta­tion fluide à toutes les tailles d’écran, comme avec la mise en page res­pon­sive décrite plus loin, n’est pas possible avec un site Web adaptatif.

Sur le plan technique, les mises en page adap­ta­tives s’appuient sur les media queries (requêtes média). Il s’agit d’un concept CSS3 qui permet d’appliquer des feuilles de style en fonction des ca­rac­té­ris­tiques du support de sortie. En pratique, les sites Web adap­ta­tifs sont optimisés pour certains types d’appareils. Les dé­ve­lop­peurs Web se basent souvent sur des gammes po­pu­laires, comme l’iPhone ou l’iPad. Les pages Web cor­res­pon­dantes ne sont donc pas toujours par­fai­te­ment adaptées à tous les terminaux existants.

Mise en page res­pon­sive

Les sites Web adap­ta­tifs ne proposent qu’un nombre limité de variantes d’affichage. Or, la diversité crois­sante des terminaux mobiles exige des formes de pré­sen­ta­tion toujours plus flexibles. De nombreux ex­ploi­tants de sites Web pri­vi­lé­gient donc aujourd’hui les mises en page dites res­pon­sives par rapport à une con­cep­tion adap­ta­tive. Celles-ci reposent également sur des media queries CSS3. Comme pour la mise en page adap­ta­tive, le serveur fournit le même code HTML à tous les terminaux. Le site Web reste ainsi dis­po­nible sous la même URL dans toutes les variantes d’affichage. Con­trai­re­ment à une mise en page adap­ta­tive, l’ajus­te­ment à la taille de l’écran s’effectue toutefois de manière fluide, sans recourir à une grille rigide de viewports définis de façon fixe. Cette approche permet d’exploiter de manière optimale l’espace dis­po­nible sur l’écran de chaque appareil. Seule une limite su­pé­rieure empêche les sites Web de perdre en li­si­bi­lité sur les grands écrans en raison de colonnes trop larges.

En raison de la com­plexité des mises en page res­pon­sives, la refonte d’un site Web selon ce principe reste cependant chro­no­phage et coûteuse. À cela s’ajoute le fait que, au-delà de la structure, les contenus doivent eux aussi être pensés de manière flexible. Textes, images, vidéos et tableaux doivent idéa­le­ment s’afficher cor­rec­te­ment aussi bien sur une Smart TV que sur un smart­phone. Plutôt que de dé­ve­lop­per leurs propres mises en page, de nombreux ex­ploi­tants de sites Web s’appuient donc sur des systèmes de gestion de contenu comme WordPress, Joomla, Drupal ou Typo3. Ces projets open source bé­né­fi­cient de com­mu­nau­tés étendues et proposent un large choix de templates de design res­pon­sifs, parfois dis­po­nibles gra­tui­te­ment.

Plugins mobiles pour CMS

Pour des présences en ligne déjà exis­tantes reposant sur un système de gestion de contenu, des plugins cons­ti­tuent une solution éco­no­mique pour optimiser ra­pi­de­ment une offre en ligne pour les appareils mobiles. Cette approche convient surtout lorsque les ex­ploi­tants de sites Web sou­hai­tent conserver le thème pour or­di­na­teur d’origine et le compléter uni­que­ment par des fonc­tion­na­li­tés mobiles. Une solution tierce répandue est WPTouch pour WordPress, le système de gestion de contenu le plus utilisé au monde. Le plugin permet de créer une version autonome adaptée aux mobiles. Celle-ci cor­res­pond, dans son principe, à un site Web mobile séparé et est diffusée ex­clu­si­ve­ment pour les appareils mobiles, in­dé­pen­dam­ment du site principal.

Pourquoi Google pri­vi­lé­gie les sites Web res­pon­sives

En dé­ve­lop­pe­ment Web, il est courant de s’aligner sur Google, le leader du marché des moteurs de recherche. Selon ses propres dé­cla­ra­tions, Google pri­vi­lé­gie une con­cep­tion de site Web res­pon­sive. L’en­tre­prise justifie ce choix de la manière suivante :

• Avec les mises en page res­pon­sives, les contenus sont dis­po­nibles sous une seule URL, ce qui facilite leur partage et leur mise en lien.
• Con­trai­re­ment à l’ex­ploi­ta­tion de sites Web mobiles distincts en parallèle d’une version pour or­di­na­teur, Google peut attribuer sans dif­fi­culté des pro­prié­tés d’in­dexa­tion claires aux mises en page res­pon­sives. Il n’est donc plus né­ces­saire de signaler l’existence de pages pour or­di­na­teur ou mobiles cor­res­pon­dantes.
• Les projets Web res­pon­sives im­pli­quent moins de main­te­nance que les présences en ligne com­por­tant plusieurs pages au contenu identique.
• Comme les mises en page res­pon­sives ne né­ces­si­tent pas de re­di­rec­tions, les erreurs typiques liées à l’at­tri­bu­tion de sites Web mobiles séparés sont, par principe, évitées.

Le point le plus important pour Google est toutefois que, pour les sites Web res­pon­sives, un seul crawl suffit, alors que les sites Web mobiles séparés doivent chacun être explorés in­di­vi­duel­le­ment par le robot de Google. Grâce à une con­cep­tion de site Web res­pon­sive, le moteur de recherche économise ainsi des res­sources de manière sig­ni­fi­ca­tive.

Quelles sont les erreurs fré­quentes sur les sites Web mobiles ?

Lors de l’op­ti­mi­sa­tion mobile de sites Web, certains pièges typiques peuvent dégrader l’ex­pé­rience uti­li­sa­teur. De nom­breuses ex­ploi­tantes et de nombreux ex­ploi­tants sous-estiment l’impact des temps de char­ge­ment, de la na­vi­ga­tion et d’autres éléments sur les petits écrans. Voici les sources d’erreurs les plus fré­quentes :

• Choix de la variante de con­fi­gu­ra­tion : le choix entre un design res­pon­sive, un site Web mobile séparé ou une mise en page adap­ta­tive est dé­ter­mi­nant dès le départ. Le design res­pon­sive est pri­vi­lé­gié par Google, mais la décision doit avant tout tenir compte de la cible, des appareils concernés et de la com­plexité du site Web, car un chan­ge­ment ultérieur s’avère souvent long et coûteux.
• GUI peu intuitive : une interface uti­li­sa­teur mal conçue complique fortement l’uti­li­sa­tion sur mobile. Il convient d’éviter les sites Web in­com­plets, une taille de texte trop réduite, des éléments trop petits ou dif­fi­ciles à manipuler, les effets de survol, ainsi que les fonctions dis­si­mu­lées. Une fonction de recherche peu con­vi­viale pose également problème, car les écrans tactiles re­quiè­rent des principes d’in­te­rac­tion spé­ci­fiques.
• Per­for­mance : des temps de char­ge­ment trop longs ont un impact direct sur le com­por­te­ment des uti­li­sa­teurs. Dès trois secondes, de nombreux uti­li­sa­teurs quittent la page, en par­ti­cu­lier sur mobile, où la connexion peut être instable. Les causes fré­quentes sont des images non com­pres­sées ou des formats d’image trop vo­lu­mi­neux, un excès de Ja­vaS­cript, trop de requêtes HTTP, un code non optimisé et l’absence de caching.
• Fenêtres in­tru­sives et bannières pu­bli­ci­taires en­va­his­santes : les su­per­po­si­tions en plein écran, par exemple pour pro­mou­voir une ap­pli­ca­tion ou une ins­crip­tion à une news­let­ter, dégradent l’ex­pé­rience uti­li­sa­teur sur mobile et com­pli­quent l’accès au contenu principal. Il est pré­fé­rable de recourir à des in­ser­tions discrètes qui ne masquent pas en­tiè­re­ment la page. La publicité intrusive doit être évitée sur les appareils mobiles.
• Res­tric­tions dans le fichier robots.txt : si le Googlebot ne peut pas accéder aux fichiers CSS, Ja­vaS­cript ou image en raison de res­tric­tions dans le robots.txt, la page ne s’affiche pas cor­rec­te­ment, ce qui peut pénaliser le clas­se­ment.
• Dif­fé­rences fonc­tion­nelles sur le site mobile : les sites Web mobiles séparés com­por­tent le risque de contenus allégés, de re­di­rec­tions in­cor­rectes ou d’erreurs 404, qui affectent di­rec­te­ment l’ex­pé­rience uti­li­sa­teur. Tous les contenus et fonc­tion­na­li­tés es­sen­tiels doivent être dis­po­nibles sur mobile afin d’éviter toute frus­tra­tion.