Développer un site web mobile


iphone
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

Site web mobile

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

Site web mobile


22 Commentaires pour "Développer un site web mobile"

Flux des commentaires de cet article Ajouter un commentaire
  •  

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

    RépondreRépondre
    Perceval , le 12 juillet 2007 à 16:55
  •  

    Merci pour toutes ces informations.

    Ce blog à l'air super sympa, hop dans mon lecteur de flux RSS.

    Pierre

    RépondreRépondre
    Pierre , le 15 juillet 2007 à 15:02
  •  

    Je prévois également une version mobile de certain de mes sites et je te remercie donc également pour ces informations !

    RépondreRépondre
    Ezor , le 21 juillet 2007 à 02:16
  •  

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

    RépondreRépondre
    xhtml , le 6 août 2007 à 20:05
  •  

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

    RépondreRépondre
    pti-seb , le 10 août 2007 à 18:28
  •  

    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.

    RépondreRépondre
    Reza_SEIRAFI_FAR , le 26 septembre 2007 à 17:05
  •  

    Je ne sais pas trop, à part l'Iphone via sont navigateur safari visiblement.

    RépondreRépondre
    pti-seb , le 26 septembre 2007 à 17:12
  •  

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

    RépondreRépondre
    Yann Benigot , le 11 octobre 2007 à 18:56
  •  

    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.

    RépondreRépondre
    Disvroiañ , le 29 octobre 2007 à 18:00
  •  

    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.

    RépondreRépondre
    Hamage , le 1 décembre 2007 à 19:02
  •  

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

    RépondreRépondre
    dav , le 10 décembre 2007 à 16:40
  •  

    C'est sûr qu'un jour, les mobiles auront les mêmes avantages que nos PC actuel.

    RépondreRépondre
    pti-seb , le 10 décembre 2007 à 23:17
  •  

    Il existe cependant actuellement des sites ayant une adaptation afin d'être correctement accessible sur les mobiles !...

    RépondreRépondre
    Hamage , le 11 décembre 2007 à 21:12
  •  

    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 ???

    RépondreRépondre
    FOF , le 10 février 2008 à 17:55
  •  

    Super, j'ai un très bon aperçu de ce que je voulais. un grand Merciiiiiiii

    RépondreRépondre
    luciol , le 28 mars 2008 à 11:19
  •  

    Bonjour à tous,

    Merci de nous donner votre avis.

    http://www.ayrine.com/iphone

    contact@ayrine.com

    class="yarr">RépondreRépondre
    Ayrine , le 6 novembre 2008 à 22:54
  •  

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

    RépondreRépondre
    Wobile , le 19 mars 2009 à 16:03
  •  

    Merci beaucoup pour ces infos, car j'envisage une version "site web mobile", de mon site internet.

    RépondreRépondre
    Assurance santé , le 1 décembre 2009 à 11:13
  •  

    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.

    RépondreRépondre
    Canyoning espagne , le 9 décembre 2009 à 09:49
  •  

    Intéressant ! merci pour les infos , essentiels a savoir pr un site mode mobile !

    RépondreRépondre
    web design Montreal , le 7 janvier 2010 à 18:56
  •  

    Bonjour,

    Sympa ce blog.

    Bonne continuation.

    RépondreRépondre
    tire lait , le 2 avril 2010 à 19:40
  •  

    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.

    RépondreRépondre
    Faire un site web , le 9 janvier 2011 à 23:31
 

Ajouter un commentaire

actualité android apache apple astuce astuces bash bilboblog blog boot chrome clavier commande commandes conky date debian Desktop développement elementary exploit faille fedora firefox flash gimp gnome google graphique Graphisme hack hacking Hardware humour intel internet iphone jailbreak Jeux Kde kernel libre Linux log logiciels Logiciels Libres lucid lynx maemo mail maquette metasploit microsoft mobile mockup monitoring mozilla multi-touch musique mysql n900 nautilus nokia noyau openoffice open source password photos php Planet publicité red hat redhat rpm réseau screenshot script serveur serveurs shell sql ssh statistiques sysadmin system Sécurité thème tux-planet tv twitter ubuntu unity vidéo vidéos vlc voyage wallpaper windows wordpress yum