Quelques principes de développement pour web Mobile

22 avr 2008

Technique

le 22.04.2008 à 7:50

Quelques principes de développement pour web Mobile

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 :

<!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.

Voici 2 validateurs pour vérifier le code des sites mobiles : Validateur W3G pour mobile (norme XHTML Mobile Profile) et Ready.mobi (celui donne également le coût de téléchargement, des conseils et plus encore).

Opera-mini Demo est un émulateur pour tester le web depuis un navigateur destiné à un usage mobile.

Dominique Hazael-Massieux – Web Mobile vous verrez les bonnes pratiques pour développer un site web mobile.

Vous avez un blog ou un site propulsé par wordpress, voici le plugin (et son thème associé) IWphone qui vous permettra de le rendre encore plus accessible aux internautes surfant avec un iPhone ou iPod Touch.

Si vous avez trouvé cet article intéressant, abonnez-vous gratuitement au flux RSS d'eclaireur ou bien par email.