Magazine Blog

Quelques principes de développement pour web Mobile

Publié le 22 avril 2008 par David Marchesson

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:
  1. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN"
  2.   "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
  3. <html>
  4. <head>
  5. <title>Mon site web mobile</title>
  6. <meta name=“description” content=“Mon site web mobile.”>
  7. <meta http-equiv=“content-type” content=“text/html; charset=UTF-8″ />
  8. <meta http-equiv=“Cache-Control” content=“public”/>
  9. <link rel=“stylesheet” media=“handheld” href=“mobile.css” />
  10. </head>
  11. <body>
  12. <p>Mon site Mobile</p>
  13. </body>
  14. </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.
  • Partager cet article


    Vous pourriez être intéressé par :

    Retour à La Une de Logo Paperblog

    Ces articles peuvent vous intéresser :

    • Aidez-moi à choisir un téléphone mobile

      Mon Nokia 3210 jaune (le premier qui se moque sera fouetté en page d'accueil) a quasiment rendu l'âme et je me vois obligé de changer de téléphone mobile.Sur le... Lire la suite

      Par  Latelament
      BLOG, INTERNET
    • Concert Superbus avec NRJ MOBILE

      Hier soir, grâce à Victor et Antoine de NRJ Mobile , j’ai pu assisté au concert privé de Superbus au Cinéaqua. Le cinéaqua, déjà je ne connaissais pas. Lire la suite

      Par  Xavier Gottar
      CULTURE, INTERNET, MUSIQUE, POP/ROCK
    • Mowser.com, Votre navigateur mobile

      Tout utilisateur d’internet sur mobile s’est retrouvé confronter au problème de compatibilité de tel ou tel site avec son mobile. C’est ce que se propose de... Lire la suite

      Par  Mehdi
      EMARKETING, INTERNET
    • Google va s'attaquer à la téléphonie mobile

      Alors que des rumeurs circulent depuis longtemps sur le net autour d'un gPhone, le Wall Street Journal nous révèle via LCI que le géant américain de la recherch... Lire la suite

      Par  Grégory Roger
      BLOG, CINÉMA, HUMOUR, MUSIQUE, A CLASSER
    • Revolution Internet mobile... de SFR

      Ce matin la couverture de Matin Plus et Metro et recouverte d'un tag annoncant que la révolution internet mobile est en marche et une invitation à aller sur le... Lire la suite

      Par  Sendtofriend
      EMARKETING, ENTREPRISE, INTERNET, MARKETING & PUBLICITÉ, MOBILES
    • Google Mobile : Android

      Google dévoile sa stratégie mobile :Le temps des rumeurs concernant le Google Phone est donc bien révolu.Sa stratégie mobile se nomme « Open Handset Alliance Â... Lire la suite

      Par  Camille Jourdain
      EBUSINESS, EMARKETING, FOCUS EMPLOI, INFORMATIQUE, INTERNET, MARKETING & PUBLICITÉ
    • Illimythics: le web mobile 3G+ illimité selon SFR

      Illimythics: mobile illimité selon

      SFR va frapper un grand coup dans la jungle des offres mobiles avec Illimythics, des forfaits de 2 à 5h en voix/visio (temps doublé le soir et le week-end)... Lire la suite

      Par  Grégory Roger
      BLOG, CINÉMA, HUMOUR, MUSIQUE, A CLASSER

    A propos de l’auteur


    David Marchesson 144 partages Voir son profil
    Voir son blog

    l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

    Dossiers Paperblog

    Magazines