Comment adapter un site Web aux navigateurs mobiles
Comment un bon site web doit-il fonctionner dans un navigateur mobile? Devrait-il s'adapter à la taille de la fenêtre du navigateur ou doit-il rediriger vers une page conçue pour s'adapter aux navigateurs mobiles?
Jusqu'à récemment, il était de plus en plus courant de voir les versions mobiles de sites Web, où l'URL était totalement différente, comme m.example.com ou example.com/mobile. C’est souvent plus pratique que d’envoyer des utilisateurs mobiles au site habituel, mais cela présente des inconvénients, tels que compliquer le référencement, doubler le code de conception que vous devez gérer et rendre plus difficile le partage d’URL par les utilisateurs. En fonction du mode de fonctionnement de votre redirection, il se peut que vous deviez constamment mettre à jour votre liste d'agents pouvant être redirigés à mesure que de nouveaux périphériques sortent. En outre, de nombreux sites ont des sites mobiles mal implémentés, tels que la redirection des utilisateurs vers une page d'accueil mobile lorsqu'ils souhaitent accéder directement à un article spécifique.
Une technique légèrement améliorée consiste à utiliser la même URL mais à proposer un contenu différent à des utilisateurs mobiles en utilisant CSS ou JS du côté client ou la détection d'agent d'utilisateur côté serveur ou une autre méthode, et éventuellement en utilisant un cookie pour permettre à l'utilisateur de changer d'utilisateur. d'avant en arrière. De nombreux blogs Wordpress font quelque chose comme ceci; Il en va de même pour les sites Stack Exchange. Cela résout le problème du partage des URL, mais il reste toujours des problèmes de bases de code séparées et de savoir comment et quand la redirection s'applique.
Ces techniques étaient acceptables lorsque le choix était "bureau" ou "smartphone". Le nouveau marché des tablettes a toutefois compliqué les choses. Au lieu d’avoir besoin que votre site ait une belle apparence avec une largeur de 320px ou une largeur de 1000px +, vous devez maintenant penser à presque toutes les valeurs entre eux. Dans certains cas, la version "mobile" ou "de bureau" du site peut être meilleure pour les tablettes; dans certains cas, ni est vraiment adéquat.
Pour cette raison, il existe une nouvelle option de plus en plus recommandée: créer un site Web "réactif" flexible qui utilise CSS pour afficher, masquer et/ou réorganiser les éléments de la page en fonction de la largeur du navigateur. Les navigateurs plus anciens (tels que IE8 et les versions plus petites) ne prennent en charge que peu ou pas certaines techniques CSS (telles que les requêtes multimédia ou les attributs max-width et min-width) qui rendent cela possible, mais avec le temps, cela devient de plus en plus complexe. moins d'un problème. Et il existe des techniques de base, telles que l’utilisation de pourcentages au lieu de largeurs fixes dans la mesure du possible, qui fonctionnent sur tous les navigateurs. Un bon endroit pour commencer à apprendre à propos du responsive design est cet article sur A List Apart .
Les sites responsive résolvent de nombreux problèmes causés par des sites mobiles distincts, bien qu'il existe quelques inconvénients à prendre en compte: vos pages peuvent contenir plus de code que nécessaire pour les navigateurs mobiles, y compris des éléments qu'ils ne verront jamais, et peuvent ne pas être aussi rapides qu'un site séparé. site mobile pourrait être. Si vous masquez des éléments, vous ne pourrez pas donner aux utilisateurs de mobiles un lien vers une version "complète" les affichant. En général, cependant, je pense que les avantages d’une conception réactive dépassent ses inconvénients par rapport à des sites mobiles distincts. D'autres, bien sûr, peuvent être en désaccord.
En plus de @joshuahedlund answer si l'architecture de votre site Web le permet, vous pouvez changer de thème dans la couche d'application en fonction de l'agent utilisateur ...
De cette façon, vous pouvez servir la version mobile/complète d'une page dans une URL unique. En ce qui concerne la conception, j’utilise toujours une conception fluide et simplifiée pour les navigateurs mobiles