Webdesign pour supports mobiles

Bonjour à la communauté, je souhaiterais ici lancer le débat sur le webdesign mobile.

J'ignore si c'est le bon endroit, si le sujet intéresse, si le design liquide fair rouiller les terminaux mobiles, bref, je me lance en candide et candidat au titre de pseudo-pionnier car le sujet est connu en france quoique étrangement (assez) peu débattu.

Outre-atlantique, le sujet fait école, Cameron Moll sort d'ailleurs le support papier de son ouvrage le 15 octobre (http://mobilewebbook.com) mais on peut déjà le télécharger en PDF (payant). Il n'est pas le seul a avoir écrit sur le sujet, citons Barbara Ballard, Luca Passani, Jon Agar, Gary Marsden...

D'où mon étonnement : sur Pompage, l'article le plus récent sur ce sujet date de 2004. Sur Alsa, 6 sujets seulement depuis 2005. Sur papier, pas un seul ouvrage de référence en français à ma connaissance.

Dès lors je réitère : est-ce là un vrai sujet ? Le web mobile n'est-il pas pour le moment au coeur des débats pour les opérateurs ? L'usage est-il trop limité ? Qui veut m'aider à traduire le bouquin de Cameron Moll ?

En tant que "front end developer" (disons débutant+) mon souhait est de me spécialiser dans ce domaine qui me semble pour le moins porteur, et ce n'est pas le W3C qui dira le contraire .

A vous et au plaisir d'échanger sur le sujet

Tout d'abord, très bon sujet de débat

Personnellement, étant consultant en accessibilité, le sujet me préoccupe beaucoup. Trop peu de développeurs connaissent les différentes possibilités d'affichage sur un mobile. Trop peu de sociétés comprennent que le fait d'avoir un site accessible par de tels moyens est un atout considérable. En fin de compte, le support et l'environnement de l'internaute font tous deux partie intégrante des normes d'accessibilité.

Le W3C a sorti le XHTML 1.1 en juillet dernier et est en train de développer le XHTML 2. Cette sortie (2009) sera sans doute un grand pas en avant dans le développement du web accessible:

a écrit :
The mission of the XHTML2 Working Group is to fulfill the promise of XML for applying XHTML to a wide variety of platforms with proper attention paid to internationalization, accessibility, device-independence, usability and document structuring.

source

D'autres projets sont en cours, notamment celui de rendre les cartes intéractives sonores (Auditory Maps, en développement), ce qui pourrait grandement changer la donne, notamment pour les sites gouvernementaux (mon employeur est d'ailleurs en train de penser à rendre son site consultable par PDA ou mobile, tout en fournissant des outils adaptés à tout type de situation). Cela dit, nous avons en Europe encore quelques soucis avec les opérateurs de téléphonie mobile. Peut-être cela changera-t-il un de ces jours? Espérons-le...

Bonjour,

Titre du sujet édité pour plus de lisibilité.

Oups Florent désolé pour le sujet, je me suis laissé emporter par l'alternance majuscules-minuscules

Smitty, il y a là plusieurs aspects à creuser et qui sont tous liés à la spécificité du support :

- taille, luminosité, couleurs dispos de l'écran (pas folichon)

- moyens de navigation et d'entrées de contenu(plus de clavier, plus de souris et plus de tapis de souris)

- prix et vitesse de l'accès au réseau (en évolution ?)

- last but nos teast : grande diversité d'appareils et de navigateurs mais également de protocoles (rôle du WML ?)

D'un point de vue plus "sociologique", le w3c précise que les terminaux mobiles se distinguent car :

- beaucoup plus personnel (et "the computer is personnal again" alors ? )
- toujours allumé et toujours connecté (exact ou presque)
- toujours disponible en cas de besoin (oui)
- moins cher ; beaucoup plus répandu (attention aux nuances, cf. le blackberry)

Il en reste certainement, c'est un débat ouvert ! D'ores et déjà les meilleures pratiques émergent au sein de groupes de travail , je pense que cela ne t'est pas inconnu, Smitty !

Quand au XHTML 2, attention à une chose, peut-être : les visées universalistes de cette future norme sont louables, mais pour le sujet qui nous intéresse, ne peut-on pas déjà se recentrer sur les "best practices" permises par XHTML1 et CSS2 ?

a écrit :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Site's Title</title>
<link rel="stylesheet" type="text/css" href="mobile.css"/>
<meta http-equiv="Cache-Control" content="max-age=600" />
</head>
<body>
<h1>My Page Heading</h1>
<p>My content goes here.</p>
</body>
</html>

(source : mobile web practice par Cameron Moll)

Mais cela ne m'empêche pas de suivre les évolutions de cette norme tout en me posant cette question : que peut-on faire MAINTENANT pour des clients désireux de proposer leurs services en ligne à des internautes mobiles ?

XHTML mobile, svp. XHTML mobile ou basic. Pas XHTML2...

XHTML Mobile ? C'est donc le standard censé remplacer le WML dans la seconde génération du wap et autres protocoles donnant accès au web via un portable ?

Mais ce format (ou ces formats avec le XHTML basique) sont-ils issus du W3c ou sont-ce des intiatives "propriétaires" d'opérateurs et donc peu applicables ?
Modifié par caslantienne (04 Oct 2007 - 14:22)

caslantienne a écrit :
[Question 1]

[Question 2]

Un peu de google? (Ou concurrent.)

Allez, je donne tout de même une réponse:
http://en.wikipedia.org/wiki/XHTML_Mobile_Profile
(Le schéma proposé me semble bien pratique pour s'y retrouver, et les liens en fin d'article pour accéder aux spécifications.)

Sujet qui tombe à pics, je vais justement me lancer dans une version mobile...

C'est sûr que c'est l'avenir...

En profitant pour une petite question technique...

Où puis-je trouver un script capable de reconnaitre à la fois l'appareil utilisé, le navigateur... Afin de proposer une autre version du site, adapté à la taille réduite de l'écran ?

D'avance merci et désolé si ma question a déjà été posée

Hello,

Pas sûr qu'un tel script soit fiable (la vieille problématique des en-têtes HTTP "User-Agent"...).

Par contre, il y a:
- les navigateurs pour mobile qui prennent en compte les feuilles de styles pour le média "handheld";
- les navigateurs pour mobile qui prennent en compte les media-queries (CSS 3).

Lors de la sortie de l'iPhone, Apple a proposé le code suivant:

<link media="only screen and (max-device-width: 480px)"
href="mobile.css" type="text/css" rel="stylesheet" />

Mais chez Opera on suggère de viser à la fois l'iPhone (ou maintenant l'iPod Touch) via les media queries et les navigateurs qui supportent "handheld", ce qui donne:

<link media="handheld, only screen and (max-device-width: 480px)"
href="mobile.css" type="text/css" rel="stylesheet" />

Ici, il s'agit uniquement de styles CSS, mais ça permet par exemple de supprimer (via display: none) des éléments jugés superflus ou trop encombrants.

Sinon, une version mobile spécifique séparée, ça peut être bien, mais il faut que l'utilisateur en ait connaissance. À la rigueur, on pourra peut-être utiliser la détection du User-Agent pour afficher en début du site «normal» un lien vers la version spécifique.

Mais je connais mal l'état de l'art dans ce domaine.

Florent, j'ai google-isé bien sûr avant de posr la question mais le pb c'est l'article de Wikipedia est trop vieux et demande des mises à jour alors... maintenant si tu pense qu'il est valable no pb.

En ce qui concerne le développement spécifique à ces terminaux, la meilleure recette est sans doute la plus siouxe : suivre les tendances en matière de vente, dégager les principaux modèles proposant un accès au web et se rapprocher des opérateurs pour obtenir des infos.

Un petit tour ici, Snas ?

caslantienne a écrit :
Florent, j'ai google-isé bien sûr avant de posr la question mais le pb c'est l'article de Wikipedia est trop vieux et demande des mises à jour alors...

Ben il y a un lien vers la spécification XHTML 1.2 MP publiée en février 2007, qui devrait être la dernière en date, non?
Par contre j'ai du mal à la trouver sur le site de l'Open Mobile Alliance.
http://www.openmobilealliance.org

caslantienne a écrit :
maintenant si tu pense qu'il est valable no pb

Ça, j'avoue que je n'en sais rien.

caslantienne a écrit :
Un petit tour ici, Snas ?

Hum...
Oui et?
Parce que la version du site diffère si on le visite depuis un appareil mobile ?
Depuis mon téléphone je n'ai pas pu y avoir accès, SFR a l'air d'avoir un soucis technique et la navigation hors de leur portail a été désactivé.

Florent V. a écrit :
Hello,

Pas sûr qu'un tel script soit fiable (la vieille problématique des en-têtes HTTP "User-Agent"...).

Par contre, il y a:
- les navigateurs pour mobile qui prennent en compte les feuilles de styles pour le média "handheld";
- les navigateurs pour mobile qui prennent en compte les media-queries (CSS 3).

Lors de la sortie de l'iPhone, Apple a proposé le code suivant:

<link media="only screen and (max-device-width: 480px)"
href="mobile.css" type="text/css" rel="stylesheet" />

Mais chez Opera on suggère de viser à la fois l'iPhone (ou maintenant l'iPod Touch) via les media queries et les navigateurs qui supportent "handheld", ce qui donne:

<link media="handheld, only screen and (max-device-width: 480px)"
href="mobile.css" type="text/css" rel="stylesheet" />

Ici, il s'agit uniquement de styles CSS, mais ça permet par exemple de supprimer (via display: none) des éléments jugés superflus ou trop encombrants.

Sinon, une version mobile spécifique séparée, ça peut être bien, mais il faut que l'utilisateur en ait connaissance. À la rigueur, on pourra peut-être utiliser la détection du User-Agent pour afficher en début du site «normal» un lien vers la version spécifique.

Mais je connais mal l'état de l'art dans ce domaine.

Merci pour ta réponse (au passage j'adore ton message perso... "C'est tout c'que ça t'fait quand j'te dis qu'on va manger des chips ?" xD )
Je vais aller chercher plus de précisions...
J'avais vu déjà cette histoire de CSS avec "handheld"...
Avec cette solution, si je comprends bien, il est possible de ne charger qu'une seule CSS spécifique automatiquement lorsque l'écran de l'utilisateur a une largeur inférieure à 480px ?

SNAS en fait je t'invitais juste à aller faire un tour du côté des stores de France Telecom pour voir quelle est aujourd'hui la part des mobiles vendus capable de naviguer sur le le WEB et quelles sont leurs caractéristiques !

Mais FT n'est pas le seul opérateur bien entendu, en l'occurence avec SPV ils développent leur propre marque et sans doute proposent un navigateur unique, c'est donc bien du côté des opérateurs qu'il est intéressant de fureter pour connaître l'état de l'art

XHTML 1.2 MP, oui Florent exact. Question subsidiaire : je cherche à savoir si ce livre vaut le coup d'être traduit, je peux me lancer là-dedans mais je serais ennuyé si le contenu n'est finalement pas valable, qu'en penses-tu a priori ?

Oki oki...

Ui j'ai l'impression aussi que cela ne dépend pas que de l'appareil en lui-même, mais bien des opérateurs également qui gèrent le réseau et jouent en quelque chose le rôle de FAI...

En ce qui concerne les navigateurs c'est vrai qu'aucun standard ne s'impose vraiment...

Il y a peut-être Opera-mini qui plait bien et qui est en train de devenir une référence...
Mais encore faut-il l'installer soi-même sur son mobile...
Sinon c'est navigateur propriétaire, Nokia Minimap & co...
A priori, ces navigateurs même propriétaires, semblent pouvoir gérer de plus en plus de langages... (d'ailleurs Adobe vient de lancer sa dernière version de Flash Lite, capable d'afficher toutes les vidéos en flv par exemple)

Bonjour,

Le sujet m'interesse aussi.

Le W3C recommande le principe du "One Web" — voir les bonnes pratiques du groupe de travail Web Mobile Initiative (en anglais) —, c'est à dire la même adresse quel que soit le terminal, et une adaptation du contenu pour les terminaux mobiles. Ce serait très bien s'il y avait une technique fiable pour détecter un terminal mobile.

En l'état actuel, je connais trois solutions :
- Limiter l'intégralité du site au XHTML Basic et servir une CSS spécifique. (voir plus haut). Ça pose certains problèmes, par exemple en ce qui concerne les tailles d'image, qu'on aimerait plus grandes sur navigateur de bureau.
- Essayer de détecter un mobile, avec les difficultés que l'on sait et lui envoyer un contenu adapté. Sauf que fatalement, on risque d'oublier tout un tas d'agents utilisateurs dans le script de détection, sans même parler des faux positifs.
- Faire une version spécifique pour mobile, en priant pour qu'elle soit visitée.

caslantienne a écrit :
Question subsidiaire : je cherche à savoir si ce livre vaut le coup d'être traduit, je peux me lancer là-dedans mais je serais ennuyé si le contenu n'est finalement pas valable, qu'en penses-tu a priori ?

Aucune idée.

Sinon, pour se lancer dans une traduction, mieux vaut avoir la possibilité de publier la traduction derrière (texte sous licence libre, contrat avec un éditeur, etc.).

a écrit :
Nicolas,

Do you know any one who does translation to French?

Best,
Cameron

Voilà ce que Moll m'a répondu. En d'autres termes, et sauf si je me tropmpe, notre ami américain publie à compte d'auteur !

Mouton noir >> Oui tu apportes une reflexion fondamentale ici.

Le principe du "one web" du w3c est très "challenging" pour nous autres développeurs d'interfaces, et c'est là que peut-être les différents bidouillages au niveau du DocType perdent leur importance vis-à-vis de bonnes pratiques pour moi liées au design liquide (ce n'est que mon avis), donc au couple XHTML-CSS classique.

En effet avec un design full-resizable, l'adoption d'images de fond pour les div, le bannissement des cadres, des positions fixes... On arrive déjà à une interface "passe-partout" qui s'adapte très bien à des petites surfaces...

Si on arrive à ce type de résultats, est-ce vraiment nécessaire de passer des heures à trouver des hacks pour imposer une feuille de style alternative à un navigateur récalcitrant ?

Mon commentaire mérite sans doute d'être nuancé...