3 méthodes pour avoir un site mobile
Inutile de rappeler l'enjeu du web mobile : les utilisateurs sont de plus en plus nombreux à accéder au web à partir de leur smartphone ou de leur tablette. Ce "boom" des outils mobiles - grandement lié au succès de l'iPhone - a créé un paradoxe dans le monde de la création internet d'aujourd'hui : les sites web doivent rester lisibles sur des écrans de bureau de plus en plus gigantesques, et en même temps sur des écrans mobiles de taille beaucoup plus modeste.
Comment réussir à faire le grand écart ? Plusieurs méthodes existent.
1 - Ne rien faire
A condition que votre programmation soit conforme aux standards du web, cette option est tout à fait valable ! Les navigateurs modernes proposés sur les smartphones, qu'il s'agisse de Safari (Mac), Chrome (Google) ou Opera, pour ne citer qu'eux, permettent de zoomer sur telle ou telle partie d'un site. Ce qui est nettement suffisant si vous pensez que l'essentiel de votre cible surfe à partir d'un ordinateur de bureau ou d'un ordinateur portable.
Ceci dit, zoomer oblige le visiteur à faire défiler la page web non seulement verticalement, mais également horizontalement... Ce qui est source d'inconfort et se révèle vite décourageant. D'où l'intérêt des méthodes suivantes, qui ont toutes pour but d'afficher des pages qui ne débordent pas de la largeur de l'écran.
2 - Créer une deuxième version de votre site
Tout est dans le titre : il s'agit de proposer une version "light" de votre site "king size", souvent expurgée d'une partie de son contenu ou de ses fonctionnalités, et qui elle s'intégrera dans la largeur d'un écran mobile. Cette solution est tout à fait adaptée aux sites plutôt complexes, dont seule une partie du contenu mérite d'être mise à disposition d'un utilisateur nomade.
Mais elle n'est pas la panacée : d'abord parce qu'il vous faudra administrer deux sites au lieu d'un seul ; et ensuite parce que vos visiteurs risquent de considérer que vous les emmenez vers un site "au rabais", sur lequel ils n'ont droit qu'à un contenu imposé.
Par ailleurs, la redirection de vos visiteurs vers la version mobile du site devra se faire sans ambiguïté, ce qui n'est pas sans poser quelques questions techniques.
Cette opération peut se faire de manière automatique, grâce à des scripts de détection placés côté serveur. Ceux-ci, en fonction du navigateur utilisé, redirigeront automatiquement le visiteur vers la version de votre site la plus adaptée (voir un exemple de script sur le site openweb). Le hic : pour être totalement fiables, ces scripts doivent être réactualisés à chaque fois que sort une nouvelle version de navigateur !
Il est également possible de proposer au visiteur de basculer manuellement vers la version mobile du site, en cliquant sur un lien... Encore faut-il que ce dernier soit placé de manière très visible : pour faire court, en haut à gauche de votre page d'accueil, ce qui n'est pas forcément du meilleur goût !
3 - Modifier la façon dont le contenu de votre site s'affiche
Cette approche présente l'intérêt de préserver l'intégralité de votre site, tout en étant transparente pour le visiteur. Concrètement, elle fait intervenir de nouveaux styles qui altèreront le comportement des blocs de texte, des images, des marges, etc. pour un affichage optimum sur appareil mobile. Une première méthode (la méthode "historique") consiste à appeler une feuille de styles propre aux portables - appelons-la "mobile.css" :
<link rel="stylesheet" href="mobile.css" media="handheld"/>
Ou encore :
@import "mobile.css" handheld;
Le problème : cette nouvelle feuille de styles va être prise en charge d'une manière complètement différente d'un navigateur à l'autre ! Certains ne vont prendre qu'elle en ligne de compte, d'autres vont l'appeler en complément de toutes les autres feuilles de styles présentes, d'autre ne vont pas la prendre par défaut pour laisser l'utilisateur décider (versions récentes d'Opera), et les derniers vont même l'ignorer complètement (comme Safari pour iPhone, excusez du peu !).
Heureusement, une autre pratique est apparue, pour appeler les nouveaux styles non en fonction du type de media ("screen" ou "handled"), mais en fonction de la taille de la fenêtre d'affichage : ce qu'on appelle les "media queries".
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile.css" />
Cet exemple de code permet à la page d'appliquer la feuille de style "mobile.css" si la taille de l'écran est inférieure à 480px. A manier avec précaution tout de même : certain navigateurs (par exemple des anciennes versions de Firefox) ne comprendront pas la "media query" et appliqueront la feuille de styles "mobile.css" dans tous les cas, y compris pour un affichage sur grand écran ! Je vous recommande d'intégrer plutôt la requête directement dans une feuille de styles, par exemple avec le code suivant :
@media screen and (max-width: 480px)
On peut très bien appliquer plusieurs "media queries" à une page, en cascade, de telle sorte qu'il soit possible de changer les propriétés d'affichage dans de multiples cas : avec, par exemple, un design fixe sur trois colonnes si l'écran a plus de 1000px de large, un design fixe sur deux colonnes si l'écran a entre 600 et 1000 px de large, et un design liquide sur une colonne pour les écrans d'une largeur inférieure à 600px...
Mais là encore, il s'agit d'une solution imparfaite : elle ne fonctionne pas sur tous les navigateurs mobiles ! Il s'agit probablement de la plus prometteuse, néanmoins, car elle relayée et privilégiée par les développeurs de chez Safari (pour l'iPhone et l'iPod Touch), Opera et Android (Google).
Pour accroître les chances qu'elle tourne avec un maximum de navigateurs, il est possible d'affiner encore la méthode : A List Apart par exemple, propose une solution hybride, qui combine les feuilles de style choisies en fonction du medium utilisé et les feuilles de style appliquées selon la taille de l'écran. On peut également, à l'aide d'un code javascript, forcer Internet Explorer (avant sa version 9) à prendre en compte les media queries.
Mais le jeu en vaut-il la chandelle ? Est-il vraiment utile de tenir compte des plus anciens navigateurs, qui sont une minorité, et devraient disparaître rapidement du marché ? Question de choix personnel... Qui se pose non seulement pour les navigateurs mobiles, mais aussi pour ceux qui équipent les ordinateurs de bureau.