Quelques principes de développement pour web Mobile

Le 22 avril 2008

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 :
[html]


Mon site web mobile



Mon site Mobile



[/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.

  • Envie de discuter de cet article ? Envoyer un message sur Twitter ou envoyez-moi un e-mail. Si cet article vous a plu, n'hésitez pas à le partager sur Twitter ou Facebook.