Site mobile

Ce qu'est un site mobile

Un site mobile comporte des pages en mode « portrait », écrites en XHTML, suivant les normes éditées par le W3C. Il s'agit en principe d'une version simplifiée et allégée du site internet classique, avec la mise en avant des fonctions recherchées en priorité depuis un téléphone mobile. Le site mobile s'adresse également aux utilisateurs de tablettes et autres PDA.

Un script automatique de détection traite l'affichage du contenu et de la mise en forme selon le type de périphérique : PC, Console, téléphone mobile, etc. Lorsque la version mobile est distincte de la version classique, l'URL est le plus souvent construite avec un sous-domaine du type .m ou .mobile, plus rarement avec l'extension .mobi. Un des atouts du ".mobi" est que les moteurs de recherche catégorisent immédiatement le site comme un site mobile. Dans tous les cas, il est souhaitable de créer un Sitemap Mobile sous la forme http://www.nomdusitemobile.com/mobilesitemap.xml.

Google recommande d'utiliser l’xHTML Mobile Profile ou le Compact HTML. En choisissant le 1er, comme le fait Google, le doctype prend la forme suivante :

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
...
</html>

Créer un site mobile

La création d'un site mobile est plus compliquée que celle d'un site web classique. Il faut en effet tenir compte du nombre terminaux mobiles, des tailles d'écrans, des fonctionnalités des mobiles, des divers systèmes d'exploitation, etc. Un site mobile ne doit pas contenir de frameset, pop-ups et scripts en tout genre. De même, le flash, qui n'est pas reconnu par l'iphone, sera de préférence évité.

En termes de design, une solution relativement simple mais imparfaite consiste à fixer la largeur des pages à 320 pixels ou de l'optimiser pour l'iPhone uniquement. Plus complexes, les techniques du responsive webdesign permettent de redimensionner automatiquement les pages de manière à ce qu'elles s'affichent avec la bonne résolution pour chaque terminal. L'avantage d'un tel système est de ne pas avoir à développer deux sites distincts pour les PC et les mobiles, ce qui s'avère moins compliqué à gérer et évite les risques de moindre performance dans les résultats naturels de Google à cause de contenu dupliqué.

Une autre possibilité est d'inciter les utilisateurs de mobiles à télécharger une application prévue à cet effet. Dans certains cas spécifiques, notamment lorsqu'il s'agit de service utilisant la géolocalisation, l'application pour smartphone offre davantage de fonctionnalités que le site mobile.

Pour aller plus loin :

http://validator.w3.org/mobile/ - W3C mobileOK Checker : validation W3C de sites pour mobiles.

emulateurmobile.com/ - Emulateur de mobile, permettant de tester l'affichage d'une page avec différents types de terminaux mobiles.

journaldunet.com/developpeur/client-web/une-feuille-de-styles-pour-le-web-mobile/ Explications et exemples de feuilles de style pour sites mobiles.

Detectmobilebrowsers.mobi - Script automatique de détection permettant, le cas échéant, de renvoyer les visiteurs utilisant un terminal mobile, vers une version appropriée.

Ressources diverses

passani.it/gap/ - Global Authoring Practices for the Mobile Web : conseils pour l'édition de sites pour terminaux mobiles