Dimensionnement pour le web mobile

Caractéristiques techniques des terminaux

Résolution d'écran iPhone 3G :
320 x 480 px

Microprocesseur :
maxi 1 GHz

Mémoire vive (RAM) :
256 Mo sur l'iPhone 3G, 512 Mo sur l'iPhone 4 et le Nexus One beaucoup moins sur les autres appareils.
Pas de swap

Systèmes de pointage :
curseur séquentiel = déplacement d'élément en élément, joystick, écran tactile

Taille d'un doigt :
un doigt représente en moyenne 40 px de hauteur. Il faut ainsi veiller à ne pas mettre plusieurs liens à une distance inférieure

Dimensionnements liés au contenu

Limite des défilements verticaux :
5 touches, soit environ 2 000 px de hauteur.

Nombres de liens par page :
Étant donné les différents systèmes de pointage (voir plus haut), le déplacement de lien en lien imposé par le curseur séquentiel peut vite devenir fastidieux, là où les autres systèmes n'auront pas de problèmes. 20 liens par page représente donc un maximum.

Dimensionnements liés aux bandes passantes des réseaux mobiles

Type de réseau, Bande passante moyenne, Temps requis pour télécharger un fichier de 100 Ko
GSM, 10 kbits/s, 1 mn 20 s
GPRS, 50 kbits/s, 16 s
EDGE, 180 kbits/s, 4.5 s
3G, 380 kbits/s, 2.1 s
3G+, 1 Mbit/s, 0.8 s
Wi-Fi, 30 Mbits/s, 26 ms

Quel type de réseau pour ma connexion ?
En France métropolitaine, les zones urbaines sont généralement couvertes par les réseaux 3G et 3G+, les zones rurales et de moindre urbanisation sont couvertes par le réseau GPRS et les zones inhabitées ou très rurales ne sont pas couvertes ou le sont avec le réseau GSM.

Caractéristiques minimales

le W3C a publié en 2008 des recommandations pour le web mobile, qu'on peut résumer par :
(l'ensemble des recommandations est disponible sur http://www.w3.org/TR/mobile-bp)

écran de 120 px de large, 256 couleurs minimum
prise en charge de XHTML Basic 1.1
prise en charge du codage de caractères UFT-8
prise en charge des formats d'images GIF et JPEG
prise en charge de CSS niveau 1 + quelques fonctionnalités de CSS niveau 2
pas de prise en charge de JavaScript
poids total de la page, tout compris, 20 Ko

Pixel réel et pixel CSS

Rien que l'énoncé fait froid dans le dos. Comment ça deux familles de pixels ? Un pixel c'est un pixel.
C'est vrai pour les navigateurs de bureau, pas dans le monde des mobiles.

En effet, certains terminaux (comme l'iPhone) ont considéré que leur largeur d'écran était de 980 px CSS même si leur résolution d'écran n'est que de 320 px de large. Pourquoi ? La plupart des sites web ne sont aujourd'hui malheureusement pas compatibles avec ces appareils mobiles, et la largeur des pages web est généralement prévue pour des résolutions sur navigateur de bureau comprises entre 800 x 600 et 1024 x 768. Grâce à cette technique, le site est alors affiché dans l'intégralité (ou presque) de sa largeur sur le téléphone, l'utilisateur n'ayant plus qu'à zoomer sur les zones intéressantes.

Conseil pour permettre l'équivalence : ajouter le code suivant dans la partie <head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">

Cela force l'échelle du rendu à 1 et la largeur d'écran à celle du terminal utilisé (généralement 320 px donc)

Étiquettes:

web