Comment adapter votre site Internet aux mobiles

Néanmoins, les smart­phones ne sont pas les seuls à commencer à voler la vedette aux or­di­na­teurs. En effet, les or­di­na­teurs de bureaux laissent leur place également aux tablettes qui se révèlent ex­trê­me­ment pratiques, tant pour tra­vail­ler que pour naviguer sur Internet. Cette tendance met au défi les ad­mi­nis­tra­teurs de sites Web : une interface qui fonc­tionne gé­né­ra­le­ment sur des écrans de 17 pouces ne peut s’adapter aisément à des surfaces de tablettes ou de té­lé­phones portables. A cela s’ajoutent les spé­ci­fi­ci­tés entre les dif­fé­rents fa­bri­cants d’appareils. Ces raisons sont suf­fi­santes pour s’in­té­res­ser à la manière d’optimiser son site Internet pour les terminaux mobiles, sans que les fonc­tion­na­li­tés n’en soient affectées. La solution est de créer des sites Web dédiés aux mobiles, des templates pour sites mobiles dont les in­ter­faces sont adaptées ou res­pon­sives ainsi que des plugins pour les systèmes de gestion de contenu po­pu­laires. Nous vous éclairons sur les avantages et les in­con­vé­nients des pos­si­bi­li­tés qui se pré­sen­tent à vous, et exposons les al­ter­na­tives pour adapter votre site Internet au monde du mobile.

En pri­vi­lé­giant les sites Internet adaptés aux mobiles, Google met les ad­mi­nis­tra­teurs de sites Web sous pression. Pourtant, les slogans tels que « mobile first » ou « res­pon­sive Web design » ne datent pas d’hier. Mais la dé­cla­ra­tion du leader des moteurs de recherche a tout de même fait son effet. Nombreux sont ceux qui se posent la question de savoir si ces nouvelles exigences peuvent être ren­ta­bi­li­sées. Cela concerne tant les sites Internet de grande envergure que ceux des petites en­tre­prises, qui ne disposent que de sites Internet vitrines. Néanmoins, la mise en œuvre de ces adap­ta­tions est une question de budget. Alors qu’un simple site Internet adapté au mobile peut être simple à réaliser, la création d’une version mobile d’un site déjà existant peut entraîner des coûts con­si­dé­rables. Les pos­si­bi­li­tés doivent cor­res­pondre aux projets Internet : un site Web dédié au mobile, des templates pour sites mobiles avec des in­ter­faces res­pon­sives ou adap­ta­tives ainsi que des plugins pour systèmes de gestion de contenu.

Les sites Internet mobiles sont des documents HTML in­dé­pen­dants des pages prin­ci­pales qui ne servent qu’à une uti­li­sa­tion mobile. Ils disposent d’une adresse URL séparée. Ils sont souvent placés sous le nom de domaine « m » alors que leurs pages standards sont ca­rac­té­ri­sées par « www » :

m.exemple.fr

www.exemple.fr

Dans l’idéal, il faudrait que chaque site Internet dispose d’un pendant pour mobile. Les versions peuvent être dif­fé­rentes. L’objectif premier est de proposer aux mo­bi­nautes l’accès aux contenus. Nous pourrions citer le site mobile du journal Le Monde, qui diffère bien de sa version de bureau, dis­po­nible sous mobile.lemonde.fr. Le but est ici d’afficher les articles les plus im­por­tants de la journée. Aucune rubrique telle que « in­ter­na­tio­nal », « politique », ou « société » n’apparaît. Ce site Internet est mis en page pour les mobiles. Cela se ca­rac­té­rise par une adap­ta­tion du site à la largeur de l’écran, aux boutons et à l’abandon des déroulés d’in­for­ma­tions en continu qui exigent une grande quantité de données et donc de res­sources. Sur d’autres supports tels que les tablettes, les sites Internet mobiles sont les mêmes et ne sont ainsi pas affichés de manière optimale. Ce sont de bonnes raisons pour créer des sites Web dédiés aux mobiles.

Une al­ter­na­tive aux sites Web dédiés aux mobiles consiste à présenter une interface qui convient à tous les écrans. L’affichage d’une page Internet se base sur les champs visibles (le viewport) d’un écran. Les in­ter­faces adap­ta­tives s’orientent sur des points d’arrêts bien définis, soit une grille claire de con­fi­gu­ra­tion où les viewports sont bien délimités. Souvent, les versions d’interface sont à la fois com­pa­tibles avec les desktops, les tablettes et les smart­phones. Il n’est pas facile d’adapter tous les sites Internet à toutes les tailles d’écran. Une adap­ta­tion fluide à toutes les tailles d’écran n’est pas possible avec les sites adap­ta­tifs. Ce qu’on appelle les media queries, qui forment la base technique des in­ter­faces adap­ta­tives. Il s’agit ici d’un concept de CSS3 qui gère le clas­se­ment de feuilles de style vers un support de sortie en fonction de ses pro­prié­tés. En règle générale, les sites Internet avec une interface adap­ta­tive sont optimisés sur des types par­ti­cu­liers d’appareils. Les dé­ve­lop­peurs Web s’orientent vers les gammes de produits les plus courants tels que les iPhones ou les iPad. C’est pour cette raison que ces sites Internet ne con­vien­nent pas à tous les appareils.

Avantages :

• Face aux sites Internet en res­pon­sive design, un design adaptatif est facile à gérer.
• Etant donné que les in­ter­faces adap­ta­tives ne prennent en charge qu’un nombre limité de taille d’écran, les ad­mi­nis­tra­teurs de sites Internet ont plus de contrôle sur la pré­sen­ta­tion de leurs contenus.
• Con­trai­re­ment aux sites Web dédiés aux mobiles, une interface adap­ta­tive n’exige que tous les sites fassent l’objet d’une main­te­nance.

In­con­vé­nients :

• En raison de la con­cep­tion et de la taille de certains écrans, le design adaptatif peut entraîner des problèmes d’affichage.
• La décision d’opter pour certains view­points exige d’analyser les groupes cibles d’uti­li­sa­teurs.
• Con­trai­re­ment aux sites Internet mobiles, toutes les versions disposent du même contenu. Une réduction du temps de char­ge­ment pour les appareils mobiles n’est que par­tiel­le­ment possible.

Les plugins sont une manière in­té­res­sante pour optimiser les sites Internet existants pour les mobiles dans un court laps de temps. Cette option est par­ti­cu­liè­re­ment re­com­man­dée si les ad­mi­nis­tra­teurs de sites Web sou­hai­tent conserver leur thème desktop de base et veulent étendre ce dernier à des fonc­tion­na­li­tés pour mobiles. Une solution populaire est WPtouch pour le système de gestion de contenu (CMS Content managment system) très populaire qu’est WordPress. Ce plugin permet aux pro­prié­taires de sites Web de mettre en place des versions autonomes et faites pour les mobiles. Cela cor­res­pond es­sen­tiel­le­ment aux sites Web dédiés. La nouvelle version est ex­clu­si­ve­ment destinée aux tablettes et aux smart­phones, quelle que soit le site Internet. Une al­ter­na­tive à WPtouch est le programme WP Mobile Detect. Avantages :

• Ce plugin permet d’adapter son site ra­pi­de­ment et ce pour un prix rai­son­nable. Des versions de base sont dis­po­nibles gra­tui­te­ment.

In­con­vé­nients :

• Pour qu’un site internet fonc­tionne sans problème et sans que sa sécurité ne soit mise en péril, il faut avoir recours à un plugin d’un autre opérateur.
• Tous les terminaux reçoivent le même contenu. Les ad­mi­nis­tra­teurs sont ainsi moins libres d’examiner les spé­ci­fi­ci­tés que l’uti­li­sa­tion mobile implique sur leur site. Ce qui n’est pas le cas pour les sites Internet dédiés aux mobiles.

Le dé­ve­lop­pe­ment Web se destine prin­ci­pa­le­ment à Google, qui détient 95 pourcent des parts de marché en France. Les ad­mi­nis­tra­teurs de sites Web qui ne prennent pas en compte les lignes di­rec­trices du géant américain risquent des pertes de trafic sig­ni­fi­ca­tives. D’après les données de Google, ce dernier préfère un design res­pon­sive. Les raisons sont multiples :

• Une interface res­pon­sive met des contenus à dis­po­si­tion sous une adresse URL. Ces derniers peuvent être partagés et utilisés via des liens.
• Con­trai­re­ment aux sites Web dédiés pour mobiles qui sont pa­ral­lèles aux versions desktop, Google peut indexer les in­ter­faces res­pon­sives sans problème. Ainsi, il n’est plus obli­ga­toire de sig­na­li­ser la présence de pages pour desktop et mobile.
• La main­te­nance des projets Web res­pon­sives demande peu d’énergie con­trai­re­ment aux sites qui com­por­tent plusieurs pages iden­tiques.
• Etant donné que les in­ter­faces res­pon­sives n’ont pas besoin de transfert, il est possible d’éviter les erreurs typiques qui peuvent survenir avec les sites Web dédiés pour mobiles.

Les sites Internet res­pon­sives sont faciles et rapides à indexer, tandis que les sites Web dédiés pour mobiles sont in­dé­pen­dants et exigent du temps et de l’argent de la part des ad­mi­nis­tra­teurs. Les in­ter­faces res­pon­sives per­met­tent ainsi aux four­nis­seurs de moteurs de recherche d’éco­no­mi­ser beaucoup d’énergie.