Depuis des années, les experts affirment que le trafic vers les sites Web provenant des visiteurs sur des appareils mobiles augmente considérablement. Pour cette raison, de nombreuses entreprises ont intelligemment commencé à adopter une stratégie mobile pour leur présence en ligne, créant des expériences adaptées aux téléphones et autres appareils mobiles.
Une fois que vous avez passé le temps à apprendre à concevoir des pages Web pour téléphones mobiles, et en mettant en œuvre votre stratégie, vous voudrez également vous assurer que les visiteurs de votre site peuvent voir ces conceptions. Il existe de nombreuses façons de le faire et certaines fonctionnent mieux que d'autres. Voici un aperçu de la méthode que vous pouvez utiliser pour mettre en œuvre le support mobile sur vos sites Web, ainsi qu'une recommandation vers la fin de la meilleure méthode pour y parvenir sur le Web d'aujourd'hui.
Fournir un lien vers une autre version du site
C'est, de loin, la méthode la plus simple pour gérer les utilisateurs de téléphones portables. Au lieu de vous demander s'ils peuvent ou non voir vos pages, placez simplement un lien quelque part près du haut de la page qui pointe vers une version mobile distincte de votre site. Ensuite, les lecteurs peuvent choisir eux-mêmes s'ils souhaitent voir la version mobile ou continuer avec la version "normale".
L'avantage de cette solution est qu'elle est facile à mettre en œuvre. Cela vous oblige à créer une version optimisée pour mobile, puis à ajouter un lien quelque part près du haut des pages normales du site.
Les inconvénients sont:
- Vous devez maintenir une version distincte du site pour les utilisateurs mobiles. Au fur et à mesure que votre site s'agrandit, vous risquez d'oublier de maintenir cette deuxième version et vos sites pourraient se désynchroniser.
- Créez-vous également une troisième version pour tablettes? Que diriez-vous d'une quatrième version pour vêtements? Ce concept de versions spécifiques à l'appareil peut devenir incontrôlable très rapidement.
- Vous devez mettre un lien laid en haut de la page que les lecteurs non mobiles peuvent voir (et éventuellement cliquer).
En fin de compte, cette approche est obsolète et ne fera probablement pas partie d'une stratégie mobile moderne. Il est parfois utilisé comme solution provisoire pendant qu'une meilleure solution est en cours de développement, mais c'est vraiment un pansement à court terme à ce stade.
Utiliser JavaScript
Dans une variante de l'approche mentionnée ci-dessus, certains développeurs utilisent un certain type de détection de navigateur script pour détecter si le client est sur un appareil mobile, puis le rediriger vers ce mobile distinct placer. Le problème avec le navigateur la détection et les appareils mobiles, c'est qu'il existe des milliers d'appareils mobiles. Tenter de les détecter tous avec un seul JavaScript pourrait transformer toutes vos pages en un cauchemar de téléchargement - et vous êtes toujours soumis à bon nombre des mêmes inconvénients que l'approche mentionnée ci-dessus.
Utiliser CSS @media Handheld
La commande CSS @media handheld semble être un moyen idéal d'afficher CSS styles uniquement pour les appareils portables, comme les téléphones portables. Cela semble être une solution idéale pour afficher des pages pour les appareils mobiles. Vous écrivez une page Web, puis créez deux feuilles de style. Le premier pour le type de média "écran" stylise votre page pour les moniteurs et les écrans d'ordinateur. La seconde pour les styles "de poche" votre page pour les petits appareils comme ces téléphones portables. Cela semble facile, mais cela ne fonctionne pas vraiment dans la pratique.
Le plus grand avantage de cette méthode est que vous n'avez pas à gérer deux versions de votre site Web. Vous maintenez juste l'un, et le feuille de style définit à quoi il devrait ressembler - ce qui se rapproche en fait de la solution finale que nous voulons.
Un problème avec cette méthode est que de nombreux téléphones ne prennent pas en charge le type de média - ils affichent leurs pages avec le type de média à la place. Et de nombreux téléphones portables et ordinateurs de poche plus anciens ne prennent pas du tout en charge CSS. Au final, cette méthode n'est pas fiable et est donc rarement utilisée pour livrer des versions mobiles d'un site web.
Utilisez PHP, JSP, ASP pour détecter l'agent utilisateur
C'est une bien meilleure façon de rediriger les utilisateurs mobiles vers un version mobile du site Web, car il ne repose pas sur un langage de script ou un CSS que l'appareil mobile n'utilise pas. Au lieu de cela, il utilise un langage côté serveur (PHP, ASP, JSP, ColdFusion, etc.) pour examiner l'agent utilisateur, puis modifier le requête HTTP pour pointer vers une page mobile s'il s'agit d'un appareil mobile.
Un simple code PHP pour le faire ressemblerait à ceci:
Le problème ici est qu'il existe de nombreux autres agents utilisateurs potentiels qui sont utilisés par les appareils mobiles. Ce script va attraper et rediriger beaucoup d'entre eux, mais pas tous par tous les moyens. Et plus sont ajoutés tout le temps.
De plus, comme pour les autres solutions ci-dessus, vous devrez toujours maintenir un site mobile distinct pour ces lecteurs! Cet inconvénient de devoir gérer deux (ou plus !) sites Web est une raison suffisante pour rechercher une meilleure solution.
Utiliser WURFL
Si vous êtes toujours déterminé à rediriger vos utilisateurs mobiles vers un site distinct, alors WURFL (Fichier de ressources universel sans fil) est une bonne solution. Il s'agit d'un fichier XML (et maintenant d'un fichier DB) et de diverses bibliothèques DBI qui contiennent non seulement des données d'agent utilisateur sans fil à jour, mais également les fonctionnalités et capacités prises en charge par ces agents utilisateur.
Pour utiliser WURFL, vous téléchargez le fichier de configuration XML, puis choisissez votre langue et implémentez l'API sur votre site Web. Il existe des outils pour utiliser WURFL avec Java, PHP, Perl, Ruby, Python, Net, XSLT, et C++.
L'avantage d'utiliser WURFL est qu'il y a beaucoup de gens qui mettent à jour et ajoutent constamment le fichier de configuration. Ainsi, même si le fichier que vous utilisez est obsolète presque avant que vous ayez fini de le télécharger, il est probable que si vous téléchargez-le environ une fois par mois, vous aurez tous les navigateurs mobiles que vos lecteurs utilisent habituellement sans aucun problèmes. L'inconvénient, bien sûr, est que vous devez continuellement télécharger et mettre à jour cela - tout cela pour que vous puissiez diriger les utilisateurs vers un deuxième site Web et les inconvénients que cela crée.
La meilleure solution est la conception réactive
Donc, si le maintien de différents sites pour différents appareils n'est pas la solution, quelle est-elle? Site Web adaptatif.
La conception réactive est l'endroit où vous utilisez des requêtes multimédias CSS pour définir des styles pour des appareils de différentes largeurs. La conception réactive vous permet de créer une page Web pour les utilisateurs mobiles et non mobiles. Ainsi, vous n'avez pas à vous soucier du contenu à afficher sur le site mobile ou à vous rappeler de transférer les dernières modifications sur votre site mobile. De plus, une fois que vous avez écrit le CSS, vous n'avez rien à télécharger de nouveau.
La conception réactive peut ne pas fonctionner parfaitement sur des appareils et des navigateurs extrêmement anciens (dont la plupart sont très peu utilisés aujourd'hui et ne devraient pas vous inquiéter beaucoup), mais parce qu'il est additif (en ajoutant des styles au contenu, plutôt que de supprimer du contenu), ces lecteurs pourront toujours lire votre site Web, il n'aura tout simplement pas l'air idéal sur leur ancien appareil ou le navigateur.