Optimiser un site web pour les smartphones
Plusieurs options existent pour créer un site mobile : soit créer un site web séparé (par exemple http://m.monsite.com), soit optimiser le site existant pour qu'il s'affiche correctement sur les smartphones également.
Si vous optez pour la deuxième option, voici quelques conseils.
Viewport
Par défaut, les navigateurs mobiles ont tendance à "simuler" un écran plus grand (par exemple de 800px de large, au lieu de 320px de large pour un smartphone standard). L'utilisateur devra donc commencer par zoomer pour pouvoir lire le contenu de la page. Pour éviter ce problème, on peut forcer le navigateur à utiliser sa résolution réelle :
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width" />
</head>
CSS
Maintenant que le navigateur utilise sa résolution native, il est possible de charger une feuille CSS uniquement pour les écrans de petite taille :
<link rel="stylesheet" type="text/css" href="smartphone.css" media="screen and (max-width: 800px)">
Dans cette feuille de style, on veillera à utiliser une mise en page simple et verticale (sans menu latéral) et à éviter les décorations utilisant des images.
Images
Idéalement, les images doivent également être réduites pour s'afficher correctement sur l'écran d'un smartphone.
Les navigateurs mobiles indiquent généralement le mot "mobile" dans l'entête "User-Agent". Le Samsung Galaxy Tab affiche par exemple :
Mozilla/5.0 (Linux; U; Android 2.2; en-gb; GT-P1000 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Il est donc possible de détecter le type de navigateur qui effectue la requête, et de redimensionner l'image à la volée si nécessaire...
Une autre possibilité consiste à utiliser une solution externe comme Adaptive Images, qui est basé sur le même principe.
Autres optimisations
La bande passante d'un smartphone étant largement inférieure à celle d'une connexion ADSL, on veillera également à accélérer l'affichage des pages.