Voilà donc le retour du site mobile !

Problème : gérer la redirection de son site vers une version mobile. Les stratégies sont multiples aujourd’hui et pour ainsi dire, complémentaires.

Gestion par CSS3

Vous pouvez profiter des capacités des media queries CSS3 pour adapter votre layout HTML au device de votre visiteur ! C’est très efficace, démonstratif, et facile à mettre en oeuvre. Bien sûr les problèmes sont nombreux : les CSS3 ne sont pas gérés par encore une majorité des navigateurs, mais le sont à priori par les navigateurs mobiles (n’oublions pas que c’est la cible). Problème beaucoup plus important : comment faire si mon visiteur veut retourner sur la version « normale de mon site internet ? Je ne sais pas pour vous, mais moi je déteste qu’on m’impose des trucs de ce genre … d’autant plus quand je sais pertinemment :

• 1. que le site complet existe et
• 2. que mon navigateur mobile est très capable de l’afficher … et
• 3. que visiblement il y a des parties du site normal qui ne sont pas présentes sur le site mobile et que j’aimerais consulter… etc etc.

Exemple de media queries CSS3

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

Redirection serveur

Sur un serveur type Apache, on peut facilement créer des règles de redirection. Les directives de type Rewrite permettent de gérer le UserAgent (le navigateur pour faire simple) afin de rediriger toute requête entrante vers ma version mobile. Encore une fois c’est facile à mettre en oeuvre, mais je suis incapable de désactiver cette configuration quand je le veux.
Exemple de gestion du UserAgent :

RewriteCond %{HTTP_USER_AGENT} ipod|iphone|ipad|android|palm [NC]

Solution Javascript

Pour moi la plus élégante est donc une solution mixte : un layout dédié mobile, et pourquoi pas développé en JQuery Mobile, et une gestion fine des options en Javascript. Ce dernier me permet également de connaitre le UserAgent, et il me permet également de faire une redirection. Mais en plus il me permet de gérer les éventuels choix de l’utilisateur. Historiquement, ces informations étaient stockées dans les cookies, mais l’interface HTML5 Web Storage, en particulier SessionStorage, me permet de gérer des données nettement plus intéressantes. Autre avantage, c’est un objet purement de session, il disparaitra toujours à la fermeture du navigateur, je n’ai pas à gérer la durée de vie du cookie ou que sais-je encore. C’est une solution de ce type que nous avons utilisé sur www.oxiane.com, et en particulier, l’implémentation très simple de http://sebarmeli.com. C’est un fichier javascript qui permet de gérer différents types de redirection :

• par répertoire ( vers /mobile /mobile_jquery comme chez oxiane )
• par domaine (de www.site.com vers m.site.com ou mobile.site.com)

Toutes les options sont décrites sur la page de l’article et dans le code lui-même. (en cas de non support de HTML5, un cookie valable 2 heures est créé, on peut bien sûr modifier ce comportement.

On peut donc facilement naviguer du site mobile vers le site complet, et à ma première visite, je peux sans problème « imposer » à mon visiteur la version mobile.

Alain