Développer un site web mobile
Avec l'arrivée massive des téléphones mobiles et autres PDA capables de surfer sur Internet, développer un site web accessible aux mobiles peut devenir aujourd'hui une fonctionnalité intéressante. Cet article s'appuie notament sur l'expérience acquise lors du développement du site mobile.planet-libre.org, la version mobile du Planet Libre.
1. Les limitations des appareils mobiles
Avant de se lancer dans une telle aventure, il faut impérativement connaître les limitations de ces appareils, afin d'offrir un site le plus fonctionnel possible.
Parmi ces restrictions, on retiendra les principales :
- la petite taille des écrans, même si cela change (ex : arrivée des iPhones)
- la faible puissance des processeurs
- la taille limitée de la mémoire embarquée
- la lenteur de la connexion Internet
Après analyse de ces caractéristiques, on en déduit qu'il faut donc réaliser un site très léger, qui sera capable de s'afficher rapidement et de s'adapter à des écrans de petite taille.
2. Les conseils de développement
Afin de réussir le développement de son site, voici quelques précautions à respecter :
Le doctype des pages devra être " Xhtml Mobile Profile ", un type de document supporté par beaucoup de navigateurs mobiles. Voici un exemple pour déclarer tout ceci correctement :
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
Les lignes meta html qui devront apparaître par la suite, seront la déclaration de l'encodage utilisé (je recommande l'UTF8) et l'activation du cache :
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="Cache-Control" content="public"/>
La taille des pages devra être la plus légère possible. Il est conseillé de ne pas dépasser 20 Ko par page. On devra donc par exemple enlever la présence des images pour atteindre ce but.
De plus ces dernières ont des chances de ne pas s'afficher correctement sur des petits écrans.
Voici une astuce pour supprimer automatiquement toutes les balises img d'une page html, en php :
$item = preg_replace('`<img[^>]*>`', '', $item);
Pour l'apparence du site, préférez une feuille de style intégrée à la page, car beaucoup de navigateurs ne semblent pas gérer les fichiers css externes.
Je conseille également de ne pas utiliser d'attributs css spéciaux, comme l'attribut float ou encore utiliser des unités de mesure en pixel (px). Des attributs em ou des pourcentages conviendront mieux afin de garantir un redimensionnement des textes.
Enfin, il sera préférable que le site ne contienne pas :
- de pop-ups
- de frame ou iframe
- de tableau html
- de code javascript
- de système de rechargement ou de redirection des pages
3. Tester son site
Voici quelques adresses utiles pour tester votre site. L'émulateur de téléphone mobile du site opéra, pour se faire une idée l'aspect du site depuis un portable : www.operamini.com/demo/. Le Validateur XHTML Mobile Profile du w3c : validator.w3.org/mobile/
Enfin, le validateur du site .mobi, qui apporte pas mal de conseils : ready.mobi
Créé en 2005, Tux-planet est un site qui a pour ambition de regrouper des articles sur Linux et le monde des logiciels libres. 
23 Commentaires pour "Développer un site web mobile"
Flux des commentaires de cet article Ajouter un commentaireMerci beaucoup pour tous ces conseils, qui me sera très utile prochainement.
J'en profite au passage pour dire que la découverte de ton Blogue est réellement un bonheur pour moi, il est beau, remplis de bons contenus et tu arrives à être Objectif.
Merci pour toutes ces informations.
Ce blog à l'air super sympa, hop dans mon lecteur de flux RSS.
Pierre
Je prévois également une version mobile de certain de mes sites et je te remercie donc également pour ces informations !
Une expérience parmi beaucoup d'autres...
A mon avis c'est pas la meilleur :-)...
Quant aux conseils c'est toujours bien à lire et à suivre certains....
Avec nos salutations de la Suisse....
@xhtml : oui ce n'est peut-être pas la meilleure, mais dans le domaine du développement de site web pour mobile, difficile de trouver des informations, d'ou la réalisation de cet article.
Bonjour,
Je trouve cet article tres bien. mais ce que je cherche c'est de faire du AJAX pour les client Mobile. Ce que la plus par des Navigateurs Mobile ne supportent pas.
Est ce qu'il y a un alternatif d'AJAX pour Mobile
Cordialement.
Je ne sais pas trop, à part l'Iphone via sont navigateur safari visiblement.
Bon article
Il y a juste un point qui me dérange:
"Pour l'apparence du site, préférez une feuille de style intégrée à la page, car beaucoup de navigateurs ne semblent pas gérer les fichiers css externes."
Si la CSS est inclue dans la page, elle sera rechargée à chaque changement de page, ce qui peut représenter un alourdissement conséquent de la page avec de grandes CSS, et c'est assez dommage puisqu'en plus de ralentir le chargement, ça peut revenir plus cher au visiteur s'il utilise un accès WAP trop coûteux.
La solution est donc de la mettre en externe par défaut, et si l'utilisateur tient absolument à avoir le style de la page, à éventuellement placer une option pour inclure la CSS dans la page (option qui sera stockée via cookie ou paramètre passé aux pages liées (du style: accueil.php?inclure_style=1)).
Je rajoute ma main dans ton tuto.
Je conseille également cette page web : developer.openwave.com/do...
Ce sont les références sur les normes pour les mobiles. Je pense que ça peut être utile.
Bonjour à toutes et tous,
Je réalise actuellement, dans le cadre de mes études, un mémoire sur l'ergonomie et l'accessibilité des sites Web mobiles, et je suis donc à la recherche de tout document ou site relatif à ce sujet.
Je vous remercie d'avance de l'aide que vous pourriez m'apporter.
C'est intéressant mais on arrive à un stade où les sites n'ont plus besoin d'être programmé pour les telephones, fini wap & co, et puis avec l'arrivée de l'EEE PC...
C'est sûr qu'un jour, les mobiles auront les mêmes avantages que nos PC actuel.
Il existe cependant actuellement des sites ayant une adaptation afin d'être correctement accessible sur les mobiles !...
Salut hamage, je fais aussi mon mémoire sur le même thème que toi... est ce qu'on ne pourrait pas s'échanger quelques infos ???
Super, j'ai un très bon aperçu de ce que je voulais. un grand Merciiiiiiii
Bonjour à tous,
Merci de nous donner votre avis.
http://www.ayrine.com/iphone
contact@ayrine.com
Un très bon article, merci pour ces informations. Certaines d'entre elles m'ont bien été utiles pour la réalisation de mon site, qui est justement dédié à la création de sites Internet mobile (http://www.wobile.fr pour ceux qui veulent essayer).
Je n'ai pas compris pourquoi tu disais de supprimer les balises : si les images sont de la bonne taille, et bien positionnées, il n'y a aucune raison que cela ne fonctionne pas...
Merci beaucoup pour ces infos, car j'envisage une version "site web mobile", de mon site internet.
Dans mon cas, difficile de me passer des photos...
Mais par exemple, est ce possible d'indiquer dans les codes vers une page d'accueil "bis" adaptee au portable...Cela permettrait ainsi de profiter des avantages du positionnement de la page "normale" sans perdre les internautes mobiles?
Merci pour cet article et precieux conseils.
Intéressant ! merci pour les infos , essentiels a savoir pr un site mode mobile !
Bonjour,
Sympa ce blog.
Bonne continuation.
Il est effectivement très difficile de gérer la mémoire avec des applications mobiles. C'est un travail qui demande une mise à jour constante.
merci pour les infos.