Contraintes pour la création d'un site mobile

De nombreuses questions se posent lors de la création d'un site compatible pour téléphone portable, quelle est la résolution des écrans, comment rendre le site compatible avec un maximum de sites, les contraintes techniques et graphiques, etc.. Nous avons réalisé une étude sur l'univers des sites pour mobiles dont voici les résultats :

  • La résolution d'un site mobile :

La première étape pour la création d'un site mobile est de définir sa résolution. La résolution standard pour l'Internet mobile est de 240*320 pixels. Désormais les mobiles ont un écran plus large et offrent de nombreux services. Selon le site mobiforge (http://mobiforge.com/research-analysis/240x320-new-standard-screen-resolution) 82 % des appareils sont compatibles avec la définition actuelle du web mobile, 17% sont peu adaptés et 1% ne le sont pas du tout. A l'heure actuelle, 72% des mobiles ont une résolution supérieure ou égale à 240*320 pixels.

  • Intégration d'images :

L'intégration d'images est un problème majeur de l'Internet mobile . Il est difficile d'intégrer une image au maximum de sa taille car elle risque de ne pas être visible sur l'ensemble des mobiles. Le logo de Google mobile fait exactement 85*35 pixels ce qui est peu par rapport aux 240*320 pixels disponibles sur les nouveaux mobiles. De son côté Yahoo a opté pour une image de 117 pixels de largeur. Il est donc préférable de réduire son image afin que celle-ci soit visible sur tous les mobiles. Il est possible de choisir entre trois types d'images : GIF, JPEG (compatible avec les anciens appareils) et PNG (compatible avec les appareils récents).

  • Les langages :

Il existe aujourd'hui de nombreux langages pour les appareils mobiles. Le plus ancien est le wml. Le Wirelerss Markup Language a été conçu pour le wap et sa syntaxe, basée sur la xml, est très proche de l'html. Le wml a son propre format d'image qui est le WBMP (Wireless Bitmap) en noir et blanc. Les appareils récents supportent le xhtml et sont compatibles (pour la plupart) avec le wml.

  • Ajax et Flash :

Les navigateurs compatibles pour le Flash : - Le navigateur de la PSP - s60 - Pocket Internet Explorer (certains flash fonctionnent sous réserve d'avoir installé le lecteur flash)

  • Les navigateurs compatibles pour le javascript :

- Pocket Internet Explorer
- Opéra mini (fonctionne mais la page doit se recharger entièrement à chaque fois)
- Opéra mobile
- Navigateur de la PSP

http://www.mobinaute.com/85016-navigateurs-web-mobiles-banc-essai.html


  • Le design :

Le design doit être simple et pratique pour l'utilisateur. Il est nécessaire d'adapter le corps du site en fonction des dimensions de l'appareil. En effet un téléphone est plus haut que large. Le scroll vertical est peu gênant contrairement au scroll horizontal . Si l'on se réfère au design du site mobile de Google, on remarque que celui-ci est très sobre. Sur un site mobile les images doivent être petites et sans trop de détail afin que le site soit lisible par la majorité des appareils. Il est déconseillé d'intégrer du flash.

http://www.pompage.net/pompe/petitsecrans/ http://www.google.com.au/imode

  • Les CSS :

Si une même page est faite pour le mobile et pour le web, le mobile reconnaît le média "handheld" qui correspond aux mobiles. Cependant, l'iPhone refuse d'afficher une feuille de styles ayant pour media handheld, il faut alors créer deux feuilles de styles : une pour l'iPhone avec le media Screen et l'autre pour les mobiles avec le media Handheld. http://www.w3.org/TR/CSS21/media.html

  • Les différents navigateurs :

- Deepfish (http://www.microsoft.com/en-us/news/features/2007/mar07/03-28deepfish.aspx) Projet arrêté
- Lynx (http://lynx.isc.org/)
- Minimo (http://www.mozilla.org/projects/minimo/) Projet arrêté
- Opéra mini (http://www.operamini.com/)
- Opéra mobile (http://www.opera.com/products/mobile/)
- Pocket Internet Explorer (http://www.microsoft.com/windowsmobile/software/iemobile.mspx)
- Safari (http://www.apple.com/fr/safari)

  • Ressources :

Validateur pour les sites mobiles : http://validator.w3.org/mobile/ Structure du code wml : http://francewml.ovh.org/debuter/analyse.htm


Cette étude a été réalisée par Julien Tronchon dans le cadre d'un stage en développement pour la société Awelty. Avec la participation d'Hélène Carpentier.

Commentaires

  • Site Mobile
    Merci pour cet article constructif... Il existe de nos jours des scripts qui facilite énormément la tache de création de site mobile. qu'on pensez vous!..
    voici un exemple de site qui offre des cms mobile: http://siteportable.com
  • khadi
    • 2. khadi Le Mar 10 Avr 2012
    svp je veux les contraintes des sites web brievement .et merci
  • jeanjean
    • 3. jeanjean Le Mar 01 Nov 2011
    J'ai testé dernièrement une technique 100% CSS qui fonctionne très bien pour adapter un site web sans remanier le code HTML :

    http://blog.evolya.fr/index.php?post/11/10/2011/Adapter-un-site-web-pour-les-peripheriques-mobiles-grace-aux-CSS
  • Tony Samson
    @Thomas : ce n'est pas encore possible de génerer une version mobile de son site, mais on travaille dessus.
  • Thomas
    • 5. Thomas Le Mar 31 Août 2010
    Je voudrai savoir si il etait possible de faire module e-monsite
    qui cré automatiquement un site mobile pour iPhone et autres (60% du traffic de l'internet etant sur iPhone) comme par exemple WPtouch

Ajouter un commentaire