Voici quelques principes pour mettre les mains dans le moteur et comprendre le développement de site mobile avec la norme XHTML Mobile.
Les 10 commandements du développement mobile
Règles à suivre pour bien développer un web mobile, issues d'une conférence de Dominique Hazael-Massieux sur le Web Mobile :
- Il n'y a qu'un Web
- En respectant les standards, tu coderas
- Les difficultés connues tu éviteras
- Les limites des mobiles tu respecteras
- La navigation tu optimiseras
- Les graphiques et les couleurs tu vérifieras
- La parcimonie tu utiliseras
- Du réseau tu n'abuseras pas
- L'utilisateur tu guideras
- À la mobilité tu penseras
Un bout de code pour commencer
Voici une base pour développer un site web mobile :
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
<html>
<head>
<title>Mon site web mobile</title>
<meta name="description" content="Mon site web mobile.">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-Control" content="public"/>
<link rel="stylesheet" media="handheld" href="mobile.css" />
</head>
<body>
<p>Mon site Mobile</p>
</body>
</html>Les navigateurs web mobile supportent mal :
- le JavaScript (oubliez les popups, jQuery, Prototype, Ajax) ;
- les redirections de pages via les metas ou JavaScript ;
- les frames et autres iframes.
Pour les CSS, il est préférable de ne pas utiliser la propriété Float, le positionnement absolu (absolute) ainsi que les unités en pixel (px). Pour le placement des éléments, utilisez plutôt les unités relatives : em ou %.
Quelques ressources
- Validateur W3C pour mobile (norme XHTML Mobile Profile) et Ready.mobi (donne également le coût de téléchargement et des conseils).
- Opera Mini Demo — émulateur pour tester le web depuis un navigateur destiné à un usage mobile.
- Dominique Hazael-Massieux — Web Mobile — les bonnes pratiques pour développer un site web mobile.