Suite à mon article précédent sur les marges, je consacre un peu de temps à cette notion de plateaux de résolutions. cette notion est en effet primordiale pour bien comprendre comment le système redimensionne à la volée le layout afin de le rendre toujours fin et agréable quelque soit le device. Voyons comment tout ceci fonctionne:

 

Un layout pour les gouverner tous.

Physiquement, on trouve 4 grandes résolutions physiques dans l’univers de la mobilité by MS. Le WVGA en 480x800 pixels (15:9), le WXGA en 768x1280 px (toujours en 15:9), le 720p en 720x1280 (16:9) et le 1080p en 1080x1920 (16:9). On trouve également une résolution particulière sur certains devices incorporant dans l’écran, les boutons physiques de la plateformes (Back, Windows et recherche). Pour ce dernier cas, c’est la résolution native de la dalle (854x480 px) correspond au WVGA, en terme de développement d’applications.

Ca, c’est pour la résolution physique. Mais en terme de développement, il est inenvisageable de devoir reconstruire résolution par résolution les différents layouts. Pour éviter cette embuche, on dispose d’une résolution native que l’OS va mettre à niveau en multipliant le nombre de pixels requis par un facteur que l’on nomme un plateau. On arrivera ainsi à faire correspondre toutes les résolutions physiques à une résolution native.

 

Je passe sur le grand plateau ?

Ainsi, en partant de la résolution idéale de 480x800 px, on peut adresser toutes les résolutions physiques. Ainsi, sur le plateaux 100%, on reste dans le même nombre de pixels et l’on adresse la résolution WVGA. Avec un plateau  x1,6, on monte en WXGA (480x1,6 = 768 pixels). Avec un plateau 150% (x1,5), on adresse la résolution 720p. Sauf que pour cette résolution, on change de form factor (on passe en 16:9). Donc, 800x1,5 = 1200, pas 1280…Pour résoudre ceci, on ajoute automatiquement 80 pixels dans le bas du layout. Une autre manière de dire ceci serait de considérer que l’on crée une seconde résolution de base pour le 16:9 qui serait en 480x853… ce qui nous fait 853x1,5 = …1279,5 pixels. Pas tout à fait juste, donc. Enfin, le dernier plateau emploie un multiplicateur de 225%, ce qui permet d’atteindre la résolution de 1080p, en ajoutant 80 pixels à la hauteur pour atteindre,…, 1880 pixels, et non pas 1920. La règle n’est donc pas parfaite, mathématiquement parlant.

Voici un tableau récapitulant ces données :

Resolution

Aspect

Resolution de base

WVGA

480 × 800

15:9

Résolution native. Plateau x1

480 × 800

WXGA

768 × 1280

15:9

Plateau 1.6x

480 × 800

720p

720 × 1280

16:9

Plateau 1.5x + 80 pixels 

480 × 853

1080p

1080 x 1920

16:9

Plateau 1.5x + 80 pixels 

480 × 853

 

Et les assets alors ?

En ce qui concerne les ressources (vidéo, bitmaps, …) que vous utiliserez pour le développement de vos apps, la guideline officielle est d’embarquer uniquement les assets pour la résolution WXGA (768x1280 px). Cela implique aussi que le meilleur format pour réaliser vos maquettes graphiques devra se faire dans cette résolution.Dans cette finesse de rendu, les éléments seront dégradés vers les résolutions plus basses avec élégance, et seront quasiment inchangés pour les résolutions plus hautes. Cela correspond au meilleur rapport entre la qualité de vos ressources et la taille de votre appli. Mais si vous souhaitez toutefois utiliser un asset plein pot, ou encore matcher proprement avec la différence de form factor, vous disposer de quelques solutions :

Utiliser une règle de nommage particulière de type MonAsset-wvga.png, MonAsset-720p.png et l’associer à une classe  qui ira faire correspondre l’asset et la résolution.

Pour le splashscreen, qui est fortement dépendant du ratio de l’écran, on peut utiliser une seule image en 768x1280 pixels. Elle se recentrera proprement sur les autres résolutions. Si l’on veut aller un peu plus loin, on utilise aussi la règle de nommage évoquée plus haut (MonAsset-wvga.png, etc…) et ceci sera pris en compte. Enfin, pour la résolution 1080p, on utilise une image 720p.

En ce qui concerne les assets des vignettes et des icones d’application, on n’inclut au projet que les ressources au format WXGA. le téléphone redimensionnera automatiquement les assets et les fera correspondre. attention toutefois aux différences de formats entre les vignettes de type “Iconic” et “Cycle” qui sont un peu différentes.