Android pour le Web MobileIl est important, en développant un site mobile, de tenir compte de l’expérience utilisateur. Votre application se démarquera toujours de celles des autres grâce à ce petit truc en plus que ressent le mobinaute en utilisant votre application. Vous souhaitez passer de…rien du tout, au top 10 ? Alors pensez à vos utilisateurs. Cette idée s’applique au développement d’applications en générale, mais dans cet article nous nous limiterons au développement de sites mobiles, en étudiant ce que préconise Google en la matière.

Tous les smartphones actuels, et Android en particulier, parlent couramment le HTML, le CSS et bien sûr, le Javascript. Cependant, et à la différence de l’iPhone, la résolution d’écran d’un smartphone est variable d’un constructeur à l’autre. Rappelons que Google ne propose d’un OS, et non le smartphone tout en entier. Donc, il faut pouvoir gérer ces nombreuses résolutions d’écran, qui souvent posent des soucis d’esthétiques.

Deux facteurs fondamentaux sont a étudier de près quand on souhaite optimiser sa page web pour Android :

  • La taille de l’écran et l’échelle de la page
  • La densité de l’écran

Gérer la taille de l’écran et l’échelle de la page avec la métadonée viewport

Par défaut, lorsque le navigateur d’Android charge une page Web, elle est chargé en mode « Vue d’ensemble » (Overview mode), qui demande bien souvent de cliquer sur le bouton de zoomage pour mieux afficher ce que l’on souhaite regarder. Il est très facile surcharger ce comportement par défaut en précisant la taille initiale de la page, tout en offrant la possibilité ou non de zoomage.

Pour ce faire, on utilise une métadonnée nommée viewport. Le viewport en lui-même est l’espace dans lequel votre page web est dessinée (canvas), c’est à dire le nombre de pixels de la page web. Il est toujours supérieur ou égal à la taille de l’écran lui-même. Cependant, la partie visible du viewport est toujours égale à la taille de l’écran. Ce qui fait que pour un viewport supérieur à la taille de l’écran on ait un affichage peu visible, nécessitant un zoom de la page.

Ce problème se résout facilement en décidant que la taille du viewport soit exactement égale à la taille de l’écran du device (width=device-width). Dans l’entête HTML il suffit d’écrire :

Metadonnée viewport
1 2 3 4 
<head>  <title>Une page optimisée pour Android</title>  <meta name="viewport" content="width=device-width, user-scalable=no" /> </head>

Le paramètre user-scalable=no précise qu’il n’est pas possible de zoomer ou même de dézoomer. la métadonnée viewport peut prendre plusieurs paramètres, chacun étant séparé par une virgule.

Utilisation avancée du viewport
1 2 3 4 5 6 7 8 9 10 11 
<meta name="viewport"  content="  height = [valeur_en_pixel | device-height] ,  width = [valeur_en_pixel | device-width ] ,  initial-scale = valeur_numérique_float ,  minimum-scale = valeur_numérique_float ,  maximum-scale = valeur_numérique_float ,  user-scalable = [yes | no] ,  target-densitydpi = [dpi_value | device-dpi |  high-dpi | medium-dpi | low-dpi]  " />

Il en résulte un affichage automatique de la page, fonction du viewport. Ci-dessous, le résultat de l’affichage d’une image pour des d’écrans différentes, grande (gauche) et petite (droite) :

Android viewport

Il dans ce cas important de mettre l’échelle de l’écran à 1, ce qui permet un affichage direct du contenu de la page. On aura donc finalement :

Utilisation de la metadonnée viewport
1 
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

valeur_en_pixel

Gérer la densité de l’écran

L’OS Android gère trois densités d’écran différentes en dpi (dots per inch, point par pouce en français), fonctions du device utilisé :

  • ldpi
  • mdpi
  • hdpi

Par défaut, le navigateur Android utilise la densité mdpi pour afficher une page web. Ainsi, si l’on essai d’afficher une image basse résolution, sur un smartphone de densité mdpi ou hdpi, on aura un affichage semblable au dessin de gauche, contre celui de droite pour une optimisation de l’affichage :

Android densité

Pour optimiser sa page, en fonction de la densité ciblée, on utilise des propriétés CSS particulières appelées media queries:

Optimisation en fonction de la densité
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 
#contenu {  background:url(medium-density-image.png); }   @media screen and (-webkit-device-pixel-ratio: 1.5) {  /* CSS optimisé pour un affichage hdpi */  #contenu {  background:url(high-density-image.png);  } }   @media screen and (-webkit-device-pixel-ratio: 0.75) {  /* CSS optimisé pour un affichage ldpi */  #contenu {  background:url(low-density-image.png);  } }

 

On peut également utiliser la métadonnée viewport, pour un affichage automatique fonction de la densité du device :

Optimisation de la densité en HTML
1 
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

 

Pour en savoir plus :

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.