Comment adapter votre site Internet aux mobiles

Néanmoins, les smartphones ne sont pas les seuls à commencer à voler la vedette aux ordinateurs. En effet, les ordinateurs de bureaux laissent leur place également aux tablettes qui se révèlent extrêmement pratiques, tant pour travailler que pour naviguer sur Internet. Cette tendance met au défi les administrateurs de sites Web : une interface qui fonctionne généralement 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écificités entre les différents fabricants d’appareils. Ces raisons sont suffisantes pour s’intéresser à la manière d’optimiser son site Internet pour les terminaux mobiles, sans que les fonctionnalité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 interfaces sont adaptées ou responsives ainsi que des plugins pour les systèmes de gestion de contenu populaires. Nous vous éclairons sur les avantages et les inconvénients des possibilités qui se présentent à vous, et exposons les alternatives pour adapter votre site Internet au monde du mobile.

En privilégiant les sites Internet adaptés aux mobiles, Google met les administrateurs de sites Web sous pression. Pourtant, les slogans tels que « mobile first » ou « responsive Web design » ne datent pas d’hier. Mais la déclaration 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 rentabilisées. Cela concerne tant les sites Internet de grande envergure que ceux des petites entreprises, qui ne disposent que de sites Internet vitrines. Néanmoins, la mise en œuvre de ces adaptations 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 considérables. Les possibilités doivent correspondre aux projets Internet : un site Web dédié au mobile, des templates pour sites mobiles avec des interfaces responsives ou adaptatives ainsi que des plugins pour systèmes de gestion de contenu.

Les sites Internet mobiles sont des documents HTML indépendants des pages principales qui ne servent qu’à une utilisation 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 caractérisé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 différentes. L’objectif premier est de proposer aux mobinautes l’accès aux contenus. Nous pourrions citer le site mobile du journal Le Monde, qui diffère bien de sa version de bureau, disponible sous mobile.lemonde.fr. Le but est ici d’afficher les articles les plus importants de la journée. Aucune rubrique telle que « international », « politique », ou « société » n’apparaît. Ce site Internet est mis en page pour les mobiles. Cela se caractérise par une adaptation du site à la largeur de l’écran, aux boutons et à l’abandon des déroulés d’informations en continu qui exigent une grande quantité de données et donc de ressources. 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 alternative 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 interfaces adaptatives s’orientent sur des points d’arrêts bien définis, soit une grille claire de configuration où les viewports sont bien délimités. Souvent, les versions d’interface sont à la fois compatibles avec les desktops, les tablettes et les smartphones. Il n’est pas facile d’adapter tous les sites Internet à toutes les tailles d’écran. Une adaptation fluide à toutes les tailles d’écran n’est pas possible avec les sites adaptatifs. Ce qu’on appelle les media queries, qui forment la base technique des interfaces adaptatives. Il s’agit ici d’un concept de CSS3 qui gère le classement de feuilles de style vers un support de sortie en fonction de ses propriétés. En règle générale, les sites Internet avec une interface adaptative sont optimisés sur des types particuliers d’appareils. Les développeurs 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 conviennent pas à tous les appareils.

Avantages :

• Face aux sites Internet en responsive design, un design adaptatif est facile à gérer.
• Etant donné que les interfaces adaptatives ne prennent en charge qu’un nombre limité de taille d’écran, les administrateurs de sites Internet ont plus de contrôle sur la présentation de leurs contenus.
• Contrairement aux sites Web dédiés aux mobiles, une interface adaptative n’exige que tous les sites fassent l’objet d’une maintenance.

Inconvénients :

• En raison de la conception 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 viewpoints exige d’analyser les groupes cibles d’utilisateurs.
• Contrairement aux sites Internet mobiles, toutes les versions disposent du même contenu. Une réduction du temps de chargement pour les appareils mobiles n’est que partiellement possible.

Les plugins sont une manière intéressante pour optimiser les sites Internet existants pour les mobiles dans un court laps de temps. Cette option est particulièrement recommandée si les administrateurs de sites Web souhaitent conserver leur thème desktop de base et veulent étendre ce dernier à des fonctionnalité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 propriétaires de sites Web de mettre en place des versions autonomes et faites pour les mobiles. Cela correspond essentiellement aux sites Web dédiés. La nouvelle version est exclusivement destinée aux tablettes et aux smartphones, quelle que soit le site Internet. Une alternative à WPtouch est le programme WP Mobile Detect. Avantages :

• Ce plugin permet d’adapter son site rapidement et ce pour un prix raisonnable. Des versions de base sont disponibles gratuitement.

Inconvénients :

• Pour qu’un site internet fonctionne 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 administrateurs sont ainsi moins libres d’examiner les spécificités que l’utilisation mobile implique sur leur site. Ce qui n’est pas le cas pour les sites Internet dédiés aux mobiles.

Le développement Web se destine principalement à Google, qui détient 95 pourcent des parts de marché en France. Les administrateurs de sites Web qui ne prennent pas en compte les lignes directrices du géant américain risquent des pertes de trafic significatives. D’après les données de Google, ce dernier préfère un design responsive. Les raisons sont multiples :

• Une interface responsive met des contenus à disposition sous une adresse URL. Ces derniers peuvent être partagés et utilisés via des liens.
• Contrairement aux sites Web dédiés pour mobiles qui sont parallèles aux versions desktop, Google peut indexer les interfaces responsives sans problème. Ainsi, il n’est plus obligatoire de signaliser la présence de pages pour desktop et mobile.
• La maintenance des projets Web responsives demande peu d’énergie contrairement aux sites qui comportent plusieurs pages identiques.
• Etant donné que les interfaces responsives 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 responsives sont faciles et rapides à indexer, tandis que les sites Web dédiés pour mobiles sont indépendants et exigent du temps et de l’argent de la part des administrateurs. Les interfaces responsives permettent ainsi aux fournisseurs de moteurs de recherche d’économiser beaucoup d’énergie.