Bonnes pratiques pour les applications Web

Le développement de pages Web et d'applications pour appareils mobiles présente des défis différents que le développement d'une page Web pour les navigateurs Web pour ordinateur. Les pratiques suivantes peuvent vous aider à fournir l'application Web la plus efficace pour Android et les autres appareils mobiles.

  1. Redirigez les appareils mobiles vers une version mobile dédiée de votre site Web. Il existe plusieurs façons de procéder en utilisant des redirections côté serveur. Une méthode courante consiste à "renifler" la chaîne user-agent fournie par le navigateur Web. Pour déterminer si vous souhaitez diffuser une version mobile de votre site, recherchez la chaîne "mobile" dans le user-agent.
  2. Utilisez HTML5 pour les appareils mobiles. HTML5 est le langage de balisage le plus utilisé pour les sites Web mobiles. Cette norme encourage le développement de type mobile first pour garantir que les sites Web fonctionnent sur divers appareils. Contrairement aux langages Web précédents, HTML5 utilise des déclarations <DOCTYPE> et charset plus simples :
    <!DOCTYPE html>
    ...
    <meta charset="UTF-8">
    
  3. Utilisez les métadonnées de la fenêtre d'affichage pour redimensionner correctement votre page Web. Dans l'élément <head> de votre document, fournissez des métadonnées spécifiant la manière dont la fenêtre d'affichage du navigateur doit afficher votre page Web. Par exemple, les métadonnées de votre fenêtre d'affichage peuvent spécifier la hauteur et la largeur de la fenêtre d'affichage du navigateur, l'échelle de page initiale et la densité de l'écran cible.

    L'exemple suivant montre comment définir les métadonnées de la fenêtre d'affichage:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    

    Pour en savoir plus sur l'utilisation des métadonnées de fenêtre d'affichage pour les appareils Android, consultez Compatibilité avec différents écrans dans les applications Web.

  4. Utilisez une mise en page linéaire verticale. Évitez que l'utilisateur ait besoin de faire défiler la page vers la gauche et vers la droite. Faire défiler vers le haut ou vers le bas est plus facile pour l'utilisateur et simplifie votre page.
  5. Définissez la hauteur et la largeur de la mise en page sur match_parent. En définissant la hauteur et la largeur de votre objet WebView sur match_parent, vous vous assurez que les vues de votre application sont correctement dimensionnées. Nous vous déconseillons de définir la hauteur sur wrap_content, car cela entraîne un dimensionnement incorrect. De même, il n'est pas possible de définir la largeur de mise en page sur wrap_content. Votre WebView utilisera alors la largeur de son parent. En raison de ce comportement, il est important de vous assurer qu'aucun des objets de mise en page parents de votre objet WebView n'a une hauteur et une largeur définies sur wrap_content.
  6. Évitez d'envoyer plusieurs demandes de fichiers. Étant donné que les appareils mobiles ont généralement une vitesse de connexion inférieure à celle des ordinateurs de bureau, faites en sorte que votre page se charge aussi vite que possible. Pour ce faire, vous pouvez éviter de charger des fichiers supplémentaires tels que des feuilles de style et des fichiers de script dans <head>. Vous pouvez également effectuer une analyse sur mobile avec PageSpeed Insights de Google pour obtenir des suggestions d'optimisation détaillées spécifiques à votre application.

Ressources supplémentaires