Hier je vous présentais quelques chiffres sur l’utilisation du web mobile. Aujourd’hui il s’agit de mettre un peu les mains dans le moteur pour comprendre le développement de site mobile avec la norme XHTML Mobile.
Les 10 commandements du développement mobile
Ci-dessous des règles à suivre pour bien développer un web Mobile. Elles sont 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 :
Version Texte HTML:- <!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 donc les popups, jquery, prototype, Ajax) ;
- les redirections de pages via les metas ou javascript ;
- les frames et autres iframes.
Pour ce qui concorne les CSS, il est préférable de ne pas utiliser sur des éléments 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
Voici quelques liens pour débuter la programmation d’un site web mobile ou pour mieux comprendre le fonctionnement des sites web mobiles.
Partager cet article
Jeu de briques
Snake
Pacman
Bubble