Web mobile, comment s'y prendre?

[francoisch]

bonjour

J'ai plusieurs sites Web mais aucun pour téléphone; je voudrais précisement créer un site Web pour mobile.

Il me semble comprendre de posts que j'ai trouvé qu'il y a (au moins) deux écoles:

- les mêmes pages servent pour les accès web et les accès mobile, avec des CSS différents qui gèrent une mise en page adaptée

- dans la page Index, une détection est faite pour identifier le type de navigateur et aiguiller sur un ensemble de pages web ou un ensemble de pages mobile

Première question: ce que je dis jusqu'ici est correct?

Deuxième question: quels avantages / inconvénients des deux écoles?

Tout commentaire bienvenu.

Je cherche aussi des exemples de mise en oeuvre (pages mobile, CSS mobile, ...) pour ne pas partir de zéro.

Par avance merci de votre aide.

F

[Leonick]

la 2° méthode a un avantage sur la 1° , du fait que l'on pourra ne pas envoyer les images et fichiers js qui ne servent à rien et alourdissent inutilement le poids de la page. ce n'est pas encore l'ADSL sur les téléphones !

[slender]

salut,

Ta question me concerne depuis peu aussi et j'essaye actuellement de résoudre les problèmes qui se posent en ce qui concerne les sites dédiés aux mobiles. J'ai commencé un peu à étudier la question sans vraiment encore la résoudre totalement mais je peux te laisser quelques résultats de mes recherches:

Pour les mobiles, PDA, PSP et tel WAP, il faut surtout au départ penser en terme de résolution d'écran. La PSP est en 480, les PDA en 240x320 et 140 pour les tel en WAP. Le problème est que la résolution d'écran s'obtient par le biais du JS et que celui-ci n'est pas forcement supporté par ces machines.

Ensuite les contraintes sont liées au langages dédiés à ces machines:

-html classique pour les PDA et la PSP, ainsi que les téléphones récents

-xhtml mobile pour les téléphones en général et les smartphones

-wml (wap) pour les vieux modèles de téléphones ou par souci de compatibilité

-Ihtml pour les iMode

D'une manière générale il vaut mieux éviter le javascript, il faut faire des pages ne dépassant pas 1Ko et réduire le plus possible la taille des fichiers images. Le Wap ne supporte pas les images sauf en format wbmp.

La détection des appareils se fait à travers le UserAgent mais cela demande de recenser les appareils et vu leur nombre et les modèles, cela demande de surveiller constamment ses logs et se tenir au courant des specs fournies par les fabricants pratiquement au jour le jour. Par exemple voir Buygues.

developpement en Imode par Buygues

Modifié 6 Décembre 2006 par slender

[francoisch]

bonjour et merci à tous les deux pour vos réponses.

Je débute dans ce sujet et vos infos sont vraiment bienvenues.

Sur le sujet de la structure des pages, poursuivant des recherches dans les forums entre mon précédent post et la lecture de vos réponses, j'ai eu le sentiment que la première méthode, avec les CSS spécialisées, a les faveurs des spécialistes.

Aussi, la deuxième méthode présente des difficultés comme:

- comment aiguiller vers les pages Web ou vers les pages portable? en cherchant les navigateurs web connus et en envoyant vers les pages portable tout ce qui n'est pas Web, au risque de se tromper?

- ensuite, une fois aiguillé dans l'univers portable, même question, comment aiguiller vers des ensembles de pages html, xhtml, wml ihtml avec des UserAgent très nombreux et peut-être pas tous répertoriés?

Un argument fort en faveur de la solution des pages spécialisées est de ne charger dans un portable que le strict nécessaire.

Pour le wap, je serai tenté de le laisser de coté, c'est ancien et ça va disparaître; il reste quand même ensuite plusieurs catégories de portable à gérer.

Auriez vous trouvé un bon exécutable (PhP) d'identification des navigateurs web et portable(s)? J'ai qqechose mais je n'ai encore rien testé.

Pour le JS, il semble effectivement qu'il ne soit pas souvent supporté sur les portables, ce qui milite pour la deuxième méthode.

J'ai bien noté les caractéristiques générales des pages pour les différents types, merci.

Merci et à bientôt.

F

[slender]

Bonsoir,

Auriez vous trouvé un bon exécutable (PhP) d'identification des navigateurs web et portable(s)? J'ai qqechose mais je n'ai encore rien testé.

J'ai ce lien si tu veux y jeter un coup d'oeil mais il n'est exploitable qu'à travers la version 5 de php, ce qui n'est pas mon cas. Par ailleurs les datas qui y figurent semblent être assez obsolètes (le copyright date de 2004). Comme ce sujet reste une de mes quêtes à l'heure actuelle, je ne manquerai pas de revenir sur ce post au cas où je découvre un exe en php simple et pratique, à moins que je ne me décide à l'écrire.

PS: il est nécessaire de t'inscrire pour obtenir ces sources. Au cas où je peux te les poster si tu me laisses un msg en MP.

Modifié 7 Décembre 2006 par slender

[Monique]

Bonjour,

Deux liens intéressants sur le sujet :

- Sur le site du W3C, World Mobile Initiative (en anglais)

- Aujourd'hui sur blogs.ZDNet.fr, Comment faire un site web mobile ? où il est question du site dev.mobil présentant tutoriels, émulateur et autres outils (en anglais).

[slender]

bonsoir,

Oui merci monique pour le complément d'information. Je reste cependant un peu septique sur la mise sur le marché des .mobi. Enfin bon jusqu'à ce qu'on me prouve le contraire... Achat d'un nom de domaine supplémentaire alors qu'on peut décliner son site sur à peu près tous les modes à condition de filtrer ses visiteurs dès l'arrivée sur le site, nom de domaine qui n'est pas donné non plus... je ne connais pas la contre-partie? annuaire spécialisé? conditionnement d'un réflexe chez l'internaute qui voudrait un format spécial en venant sur un .mobi? je ne sais pas trop quoi en penser..

[slender]

francoisch,

tu peux trouver pas mal de choses intéressantes dans cet article récent qui aborde l'élaboration des feuilles de style répondant aux besoins des appareils portables et des formats réduits. Bonne lecture.

[Insky]

Bonjour,

Ce sujet est tres interessant, je suis moi meme en train de concevoir une application pour gsm... et me pose certaines petites questions concernant la charte graphique, et les formats d'images :

. quel format d'image est le mieux supporté ? (jpg ? gif ? autres ?)

. est-il possible de se servir d'image en tant de backgroud-image ou seront elles invisible sur portable ?

. est-il possible de faire une propriétés css "lien actif" avec une certain background, et un lien normal et visité avec un autre fond ?

D'avance merci pour votre aide!

[francoisch]

bonjour et merci pour vos réponses qui m'intéressent.

De mon coté, ma démarche était exploratoire dans le sens où je n'ai pas de besoin immédiat de construction d'un site pour portables; je voulais commencer par voir où se trouvaient les difficultés.

Je crois que je commence à les voir et, comme je n'ai pas d'urgence, je vais commencer par attendre et laisser passer un peu de temps.

Si je me faisais l'avocat du diable, je pourrais prétendre que le progrès technique va rapidement permettre aux téléphones de consulter les sites Web normaux; si / quand ce sera le cas, il n'y aura plus besoin de développer des sites spécifiques au portables, je crois.

A votre avis?

F

[slender]

Salut,

Je crois que tu as certainement raison mais partiellement. J'avais, pour ma part, développé un accès en wap pour mon site et je me rends compte que Opera mini me permet d'accéder à mon site traditionnel sans trop de problème. En conséquence le développement en wml devient pour moi moins impératif.

Deux choses cependant apparaissent et ceci tu peux le voir en accédant à des gros portails comme la page d'accueil TF1, Ebay, etc... c'est que la disposition de ces pages ne permet pas au visiteur d'accéder facilement à la 'petite information' dont il a besoin vite: programme télé à la volée, numéro de tel rapidement, coincé dans un métro ou un bus dans l'accueil pages blanches ou jaunes... ceci par la présence de tas d'informations dont il n'a cure lorsqu'il consulte sur un petit écran alors qu'il peut bien les zapper lorsqu'il est à son bureau ou à la maison. Généralement il est difficile d'accéder aux formulaires, le remplissage de ceux-ci est pénible, le bouton d'envoi ne se distingue pas... autant d'écueils qui sont pénibles lorsque tu consultes un site à la volée, stylet à la main, debout dans un supermarché ou dans la rue...

Je crois que pour le moment, tester les URL pour servir un produit adapté aux PDA, doit conduire à servir un produit allégé, avec des menus situés en haut de page, clairs et précis, un contenu peut-être raccourci se terminant par un lien qui permettent d'accéder par une autre page pour en terminer la lecture (style /.. des journaux) et aussi un poids de page tournant aux alentours de 1.5 kilo quitte à multiplier les pages... Donc en définitive, certainement un boulot se situant plus au niveau de la création d'une seconde mouture du site en plus d'une disposition CSS différente. Dans ce cas l'information la plus importante pour les webmasters deviendrait la résolution et l'affichage du PDA.

Deux choses sont encore à dire aux webmasters sur l'intérêt actuel à porter au développement de ce type de sites :

- la facilité encore préservée d'obtenir un bon score en terme de positionnement et de recherche... (voir google mobile)

- l'intégration certainement assez proche maintenant d'annonces commerciales (je crois savoir qu'adsense pour mobile serait déja testé aux US...) . Simplement sur la base de ce critère, tu verras des posts comme celui-ci foisonner dans les foris...

Conversation intéressante s'il en est.

Modifié 27 Décembre 2006 par slender

[Leonick]

juste une question, est-il possible d'installer opera mini non pas sur un téléphone mais sur un pc pour pouvoir tester son site en local ?

[Keroin]

juste une question, est-il possible d'installer opera mini non pas sur un téléphone mais sur un pc pour pouvoir tester son site en local ?

Non je ne crois pas par contre il existe des émulateurs wap sur le web comme Wapsilon.

[Leonick]

Mais c'est un émulateur online. Moi, je voulais un émulateur offline de manière à pouvoir faire des tests en local et ne faire la mise à jour de la base de production que quand la base de tests est ok.

Et je n'ai pas réussi à en trouver.

[palm snipe]

Etant fan des PDA sous Palm OS, il y a les constructeurs Palm (qui est le plus gros fabriquant de PDA) et Sony qui ont une résolution de 320 px par 480 px.

Je pense que ce n'est pas à négliger.

[francoisch]

bonjour Slender

Merci de ta réponse détaillée.

J'avais perçu une partie de ce que tu dis, en particulier qu'il faut très probablement proposer un contenu différent, limité à l'essentiel, en tout cas réduit.

En effet, sur un PDA, les caractères sont petits et les lignes sont courtes.

Un point important dans ce que tu dis est que la solution viendra vraisemblablement d'une différence de contenu et non de présentation; en d'autres termes, la solution ne viendra pas de CSS habiles.

Comme je le disais, pour le moment, j'attend d'avoir un besoin réel et sérieux.

Merci de ces échanges.

F

[slender]

salut francoisch,

Un bon conseil, si tu penses un jour avoir ton accès spécialisé PDA, n'hésites pas à créer un sous-domaine h**p://pda.monSite.**/ ou bien h**p://wap.monSite.**/ assez tôt puis d'y mettre un résumé de ton site ou tout simplement les 'bonnes pages' et de commencer à le référencer sous les mots-clefs que tu désires. Au moins tu bénéficieras de l'ancienneté de ton sous-domaine ce qui, en terme de référencement, est un plus. Ultérieurement tu pourras toujours compléter ton nouveau site sans problème, ayant acquis déjà une présence sur les moteurs de recherche.

[Insky]

Mais c'est un émulateur online. Moi, je voulais un émulateur offline de manière à pouvoir faire des tests en local et ne faire la mise à jour de la base de production que quand la base de tests est ok.

Et je n'ai pas réussi à en trouver.

J'en ai besoin aussi... et je pense que le navigateur Opera (la version normale) te satisfaira... tu as un mode d'affichage "petit écran".. et une option qui te permet d'afficher la taille de ta fenetre... tu n'a plus qu'a la redimenssioner en 240x320 ou a la résolution de ton mobile... puis aller sur ton adresse... ca te donne le meme apercu... moi j'alterne en celui ci et un autre emulateur (en ligne celui ci).

Sinon personne pour répondre a mes question (un peu plus haut) ?

[erreur404]

Bonjour,

je suis également intéressé pour produire une version "Mobile" d'un de mes sites web. J'ai lu attentivement ce sujet mais je ne sais pas par ou commencer pour transposer mon site web actuel en une version "Mobile" ! Existe t-il une méthodologie particulière, des recommandations (mis à part celles du W3C), ou même un exemple avec son code source pour débuter ?

Dans l'attente, merci à vous.

[Insky]

Un excellent lien :

http://pompage.net/pompe/petitsecrans/

(avec exemple et code en fin)

Tout est question de css... d'adaptation et d'accessibilité... Après l'ergonomie joue forcement plus que pour un site normal... et pour finir il faut synthétiser et supprimer le superflu...

[Monique]

Bonjour,

Pour tous ceux que le Web mobile intéresse, le W3C propose un webminaire demain après-midi. Voilà le message posté par Karl Dubost sur la liste de W3Québec :

# Webinaire du W3C en français sur les Meilleures pratiques du Web

mobile

Le W3C propose un wébinaire gratuit *en français* (le premier du

genre), qui va présenter les « meilleures pratiques du Web mobile ».

Ces pratiques exemplaires sont les règles à suivre pour que les

développeurs Web puissent facilement rendre leur site Web accessible

à partir de terminaux mobiles, typiquement le téléphone.

La présentation se déroulera demain, mardi 27 février, à 14h00 UTC

(soit 9h00 à Québec). C'est gratuit, mais il faut s'inscrire à :

http://www.w3.org/2007/02/mwibp-webinar-fr/

En faisant quelques recherches sur le sujet, je viens de retrouver cette autre discussion intéressante : Accessibilite pour pda et telephone portable.