Agence Wallonne des Télécommunications: le portail des Technologies de l'Information et de la Communication (TIC)

Du développement Web vers le développement mobile

Lorsqu'il s'agit d'aborder le développement d'applications Web à destination de terminaux mobiles, il convient en premier lieu d'identifier les différences majeures entre ces terminaux et l'ordinateur individuel "classique".

Parmi ces différences, on retiendra essentiellement les suivantes:

• un écran de petite taille (PDA) ou de très petite taille (GSM),
• la grande variété de tailles d'écrans,
• la capacité d'input et d'interaction de l'utilisateur limitée (PDA) ou très limitée (GSM),
• la diversité des plateformes (Windows CE, Symbian, etc.), browsers (Opera, IE, browsers propriétaires, etc.) et terminaux,
• la non-standardisation des browsers,
• la difficulté de détection du type de terminal, laquelle implique obligatoirement des sites dynamiques,
• les technologies très évolutives avec des utilisateurs ne faisant pas nécessairement toutes les mises à jour,
• les réseaux encore parfois limités et/ou chers,
• le manque d'expérience des utilisateurs, lesquels ont toutefois une attente forte pour les services mobiles.

Par ailleurs, le terminal mobile offre des spécificités particulières dont il faut tenir compte dans le cadre du développement d'un site Web mobile:

• beaucoup plus personnel que l'ordinateur classique,
• toujours allumé et connecté, et donc toujours disponible quand on en a besoin,
• nouvelles formes d'input (photo, vidéo, touchscreen),
• géolocalisation et évolution vers des services du type "que puis-je obtenir comme services en fonction de l'endroit où je me trouve et de mes besoins particuliers?",
• meilleur marché et beaucoup plus répandu que le PC,
• pas seulement terminal mobile, mais aussi appareil Photo, caméra, console de jeux, etc.

Le développement mobile ne peut être ignoré et doit aujourd'hui faire partie intégrante d'une stratégie de présence en ligne. Cela est d'autant plus vrai que les terminaux se perfectionnent sans cesse et tendent à obtenir une "expérience utilisateur" agréable et utile, notamment en ce qui concerne la navigation sur le Web.

Les terminaux

Ainsi que cela a déjà été signalé, on ne peut sérieusement envisager de développer des sites Web "mobiles" sans s'intéresser de près aux terminaux. La diversité et le taux de renouvellement de ceux-ci rend la tâche du développeur ardue, même si la standardisation voulue par le W3C et l'internetisation du mobile finiront sans doute par offrir un environnement relativement uniforme.

Toutefois, dans la situation actuelle de diversité, il conviendra de respecter les règles suivantes:

• assurer, autant que possible, une expérience riche et utile à l'utilisateur, quel que soit le terminal,
• tirer le meilleur parti de chaque type de terminal. Ainsi, un terminal disposant d'une fonction téléphone devra permettre l'activation automatique d'un appel. De la même manière, une page affichée sur un terminal offrant l'utilisation des touches pour accéder à des liens (access keys) devra évidemment permettre l'activation de ce mode spécifique de navigation,
• contourner les problèmes potentiels de chaque type de terminal. En fonction des spécificités du système d'exploitation et/ou du browser embarqué, certains comportements pourront diverger d'un terminal à l'autre alors qu'ils devraient être identiques. Des tests d'identification du terminal permettront d'anticiper ces problèmes et d'y apporter des solutions,
• tester les applications sur de vrais terminaux (familles principales). Les émulateurs sont utiles mais souvent imparfaits et différents du rendu réel sur vrai terminal.

Mobile Web Initiative (MWI) du W3C

"L'objectif du MWI est de transformer la consultation du Web sur mobile en réalité! Le W3C et les leaders de l'industrie mobile travaillent ensemble pour améliorer la production et l'accès de contenus Web pour les utilisateurs mobiles". Ces propos sont ceux de Tim Berners-Lee, directeur du W3C Director et "père" du Web.

L'initiative du W3C sur le Web mobile devrait bientôt donner lieu à une recommandation, mais une liste de 60 bonnes pratiques est d'ores et déjà disponible. Un validateur en ligne existe sur le site du W3C. Il permet de mesurer la "compatibilité" d'une page Web mobile sur base des recommandations MWI.

Règles de base

Parmi les règles de base à respecter suivant le W3C, on retiendra notamment les suivantes:

• images: .gif pour les logos et .jpg pour les photos,
• langage de structuration: XHTML Basic, en excluant le Javascript,
• poids des pages: si possible, on restera en dessous de 20 Ko,
• largeur des pages: si possible, elle sera inférieure ou égale à 120 pixels.

Ce qui est interdit

Le W3C recommande l'interdiction pure et simple de plusieurs techniques:

• les frames (cadres). Cette règle ne fait que suivre celle déjà recommandée sur le Web classique,
• la mise en page par tableaux HTML (<table><tr><td>). Là aussi, il s'agit de suivre les recommandations globales du Web,
• l'utilisation d'artifices de mise en page, comme par exemple les images .gif transparentes pour créer des espaces,
• les pop-ups,
• les images "mappées" (c'est-à-dire les images divisées en différentes zones "à cliquer"),
• les animations en Flash (tant que cette technologie ne se répand pas de manière standard sur le mobile via un lecteur adapté).

Ce qui est déconseillé

Enfin, le W3C déconseille également vivement plusieurs autres techniques:

• les tableaux, dans la mesure où l'affichage de ceux-ci est très aléatoire,
• les cookies,
• les scripts, leur exécution correcte n'étant pas assurée,
• les effets de polices de caractères,
• les styles compliqués.

... et les standards Web classiques

Le Web s'appuie aujourd'hui sur des standards: XHTML XHTML (eXtensible HyperText Markup Language)XHTML est un langage intermédiaire entre HTML et XML. XHTML reprend le concept XML de documents bien formés. XHTML est appelé a remplacer le HTML comme standard de publication web, DOM et CSS CSS / feuille de style (Cascading Style Sheet)CSS (Cascading Style Sheet) est un concept qui a été développé pour HTML et contient les propriétés attachées à un élément (les styles). Les styles définissent comment visualiser une page HTML (police de caractère, taille de police, etc.). Plus que jamais, on insistera lourdement sur la nécessité aujourd'hui vitale de développer des sites Web en respectant ces standards. C'est d'ailleurs une fondation indispensable avant de penser aux autres canaux de diffusion: Web 2.0, mobile, synthèse vocale, etc.

Pour une application mobile, on veillera donc à respecter ces standards:

• XHTML Basic avec déclarations correctes,
• balises correctes pour la structure et la sémantique,
• CSS pour le style visuel.

Attention: dans la pratique, cela est surtout valable pour un développement orienté PDA et Smartphones ou dans la perspective de pages Web “normales” transformées à la volée en pages mobiles (par exemple par le browser Opéra Mini). Il en va autrement des GSM WAP, par exemple.

Navigation et liens

En ce qui concerne la navigation, le développement mobile devra en premier lieu tenir compte de la difficulté "d'input" de l'utilisateur. Même si les modèles récents de PDA et smartphones offrent de plus en plus de mini-claviers, l'utilisateur éprouve beaucoup plus de difficultés pour encoder des informations, faire défiler les pages et cliquer sur les liens hypertextes.

Dans cette perpective, le développeur veillera donc à respecter les règles suivantes:

• permettre une navigation simple: le W3C la recommande au-dessus de la page. Dans la pratique, elle se retrouve souvent en-dessous. Dans ce cas, alors que le chemin de navigation se déplie sur le Web de gauche (départ) vers la droite (arrivée), il se dépliera du bas (départ) vers le haut (arrivée) sur un GSM;
• utiliser les "access keys": si le terminal les supporte, elles permettent un accès beaucoup plus aisé aux liens;
• prévoir des liens auto-descriptifs. Déjà très peu recommandables sur le Web classique, les liens du type "Cliquez ici pour en savoir plus" deviennent véritablement pénalisants sur un terminal mobile, ajoutant inutilement du texte et obligeant à un scrolling supplémentaire. Les liens seront donc posés directement sur le texte du menu;
• prévoir un URL simple: par exemple "mobile.entreprise.com" plutôt que "www.entreprise.com/mobile/index.htm". L'AWT a choisi d'avoir la même adresse pour le Web et le mobile: www.awt.be;
• limiter le nombre de liens sur une page. De même, on s'assurera que toutes les pages sont facilement accessibles.

Pages et formulaires

La construction des pages et des formulaires répondra également à un certain nombre de règles:

• limiter au maximum le texte à taper dans les formulaires. L'utilisation, si possible, de valeurs par défaut (via une liste déroulante par exemple) est une bonne solution
• indiquer clairement le type d’input attendu dans le formulaire (par exemple un code postal),
• prévoir des titres de page courts et utiles. Ils devront correspondre aux intitulés repris dans le menu par lequel l'internaute est passé,
• écrire de manière simple et directe. On veillera à mettre en évidence le sens principal du contenu de la page,
• proposer des pages simples et ciblées. Elles doivent être adaptées à un utilisateur "sur la route",
• permettre l'ajustement des pages à la largeur de l’écran. Il s'agit de la même règle de base de "fluid design" que pour le Web classique. En ce qui concerne la longueur, on évitera évidemment les pages trop longues,
• limiter la taille des images. Elles disposeront en outre d'un "texte alternatif" très utile dans le cas d'un temps de téléchargement trop long.

Dans la pratique

Exemple www.awt.be en WAP

L'illustration ci-dessous montre un affichage de type WAP.

Exemple www.awt.be en I-Mode

L'illustration ci-dessous montre un affichage de type I-Mode. Il s'agit des mêmes programmes que pour le WAP. Seuls quelques tests ajustent le format d'affichage.

Exemple www.awt.be en Windows mobile

L'illustration ci-dessous montre un affichage de type Windows mobile, via Internet Explorer mobile.

Du Web vers le mobile

La comparaison entre une page d'accueil "classique" et son équivalent en mobile montre clairement l'importance de la simplification et de la prise en compte des limitations liées aux écrans des terminaux mobiles.

Compte tenu de la taille de l'écran en mode GSM, le choix se porte vers une vision "alerte" du contenu. Si l'utilisateur veut lire le contenu complet, il le commande. On limite l'input à l'adresse e-mail de l'utilisateur. L'image affichée en mode GSM est également réduite par rapport à la version normale.

Dans le cas d'une application où les menus se succèdent (par exemple un agenda), la navigation se fait par clics successifs. Une fois arrivé sur la page de contenu proprement dite, l'utilisateur reçoit des fonctionnalités liées aux capacités du terminal. Un numéro de téléphone devient ainsi un lien qu'il suffit d'activer pour lancer l'appel.

L'exemple suivant montre la différence d'approche entre un GSM et un PDA. Dans le premier cas, seule une recherche est permise. Dans le second, on peut également naviguer par ordre alphabétique.