Catégories
Développement Android

Optimiser son site mobile pour les téléphones Android

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 :

Catégories
Développement multiplateforme

Pourquoi et comment adapter son site web au format mobile

SmartphonesDévelopper pour le mobile est devenu est sujet très à la mode, de plus en plus de personnes se connectant à internet depuis leur smartphone. L’on se souvient de cette époque où les entreprises s’arrachaient ces nouveaux explorateurs d’internet qu’étaient les développeurs web. Aujourd’hui la donne n’a pas tout a fait changé, cependant, les internautes ont juste un peu changé leurs habitudes, car ils veuillent désormais disposer d’internet à tout moment, et si possible sans trop d’encombrement. Beaucoup optent pour le notebook (La sortie prochaine des Chromebooks, le 15 juin, devraient les intéresser), c’est notamment le cas des grands voyageurs, quand d’autres, grands citadins, se tournent vers les smartphones.

L’entreprise tout comme le particulier Web 2.0, voire 3.0, se doivent  donc de s’adapter, en repensant l’image que donne leur site d’eux. Afin d’atteindre cet objectif, les questions qui se posent sont souvent :

  • Doit t-on réécrire un site from scratch et entièrement customisé pour le web mobile ? Ou juste alléger le site en fonction du visiteurs ?
  • Faut t-il développer une application native ou application multiplateforme ?

A vrai dire, tout dépend de certains paramètres comme le temps imparti, la taille de l’équipe de développement et le type d’application ciblé.

A mon avis, faire le choix d’une application native est vraiment intéressant si l’on souhaite pousser au maximum les capacités de l’application. Une application de réalité augmentée par exemple ne peut et ne doit être faite qu’en application native. On pourra ainsi bénéficier de toute la puissance de l’appareil (accélération matérielle, rendu graphique,…).

Par contre un site d’actualités transformé en application mobile peut se faire sans difficulté grâce aux technologies du web (HTML, CSS, JavaScript). Ce qui aura d’ailleurs l’avantage de permettre aux internautes une transition facile du site web vers l’application mobile. On sait tous à quel point l’acceptabilité d’une application est un problème, alors tant qu’on peut la contourner on ne va pas s’en priver. Un internaute visitant le site via son mobile sera par exemple redirigé vers la version mobile du site après détection du type d’appareil à l’aide d’un script côté serveur par exemple ou encore en JavaScript. Un exemple avec la librairie PHP Tera-WURFL est expliqué ici.

Un autre paramètre important est le nombre de personnes dans l’équipe de développement. Si l’on dispose de beaucoup de monde, alors autant pleinement exploiter les plateformes de développement proposées par chaque OS mobile (Android, iOS, Blackberry OS,…) et négocier avec le client sur la durée de développement et donc des couts finaux, lui promettant une application qui changera la face de son entreprise.

Une solution pour adapter son site web en production est l’utilisation des médias queries. Cette méthode évite de devoir faire des redirections, de reconstruire son site avec les technologies du web ou en natif. En fait l’idée est simplement de garder son site tel quel (s’agissant du contenu et du design) et d’adapter sa feuille de style en fonction du type de navigateur utilisé (standard ou mobile). Mon avis est que cette méthode est d’abord orienté vers les smartphones. Pour les mobiles un peu ancien, le mieux c’est de faire simple, comme expliqué dans ce tutoriel. Une redirection placée à la page index du site devrait permettre d’atteindre la version appropriée :

Redirection simple en PHP
1 2 3 4 5 6 7 8 9 
<?php    if (is_wap_mobile_fonction)    {       // Mettre ici du code php optimisé pour les anciens mobiles    }    else {      // Et ici du code php avec media queries    } ?>

La spécification CSS 3 Media Queries donne les règles d’adaptation CSS en fonction des capacités de l’appareil. Inspirées de la spécification Media Types en CSS 2, les Media Queries étendent les capacités de cette spécification, et vont grandement faciliter la vie des développeurs. Ces dernier n’auront en effet qu’à l’appliquer sur un site standard, sans ensuite se préoccuper d’une éventuelle version mobile.

L’écriture des Media Queries (Requêtes de média) se fait grâce à d’opérateurs logiques : and (ET Logique), only (uniquement) et not (NAND).

Dans cet exemple, le fichier smartphone.css ciblera les appareils que le navigateur considérera comme étant de petites tailles (handheld) et dont la largeur est au plus égale à 320px :

Ciblage en fonction de la taille de l’écran
1 2 
<link rel="stylesheet"   media="handheld, only screen and (max-device-width: 320px)" href="smartphone.css">

Cet autre exemple permettra de cibler la tablette iPad :

Ciblage Tablette iPad
1 2 
<link rel="stylesheet"   media="only screen and (min-width: 641px) and (max-width: 800px)" href="ipad.css">

Les Media Queries peut être directement intégrées dans une balise style :

Media Queries dans une balise style
1 2 3 
<style>   @media only all and (orientation: portrait) { #navigation{display:none} } </style>

Dans le cas d’un site à développer, l’utilisation des Media Queries se fera simplement en ajoutant ceci à la balise head :

Media Queries en Action
1 2 3 4 
<link rel="stylesheet"   media="all" href="/css/style_de_base.css" /> <link rel="stylesheet"   media="only screen and (max-width: 800px)" href="/css/mobile.css" />

Le fichier style_de_base.css définissant le look ‘n Feel de base du site (paramètre all), tandis que le mobile.css se charge d’adapter le site en cas de visite d’un appareil mobile (paramètre only), dont la largeur est fatalement inférieure à 800px. On couvre ainsi les smartphones (environ 320px) et les tablettes. Les changement à apporter pourraient être :

  • La modification des valeurs du whitespace et des marges(padding, margin)
  • Suppression du :hover, qui n’est d’ailleurs pas visible en mobile
  • Ajuster la structure du site de façon à ce que le contenu ne tienne que sur une colonne.

Et bien d’autres, comme vous le sentirez.

Pour aller plus loin: