Bonnes pratiques pour les applications Web

Le développement de pages et d'applications Web pour appareils mobiles présente des défis différents au développement d'une page web pour les navigateurs web de bureau. 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 les moyens de le faire à l'aide de redirections côté serveur. Une méthode courante consiste à "renifler" la Chaîne user-agent fournie par le navigateur Web. Pour déterminer une version pour mobile de votre site, recherchez l'icône dans le user-agent.
    2. <ph type="x-smartling-placeholder">
  2. Utiliser le format HTML5 pour les appareils mobiles. HTML5 est le langage de balisage le plus couramment utilisé pour les sites Web mobiles. Cette norme encourage le développement avec priorité à la mobilité pour s'assurer que les sites Web fonctionnent sur une variété de appareils. Contrairement aux langages Web précédents, HTML5 utilise des <DOCTYPE> et Déclarations charset: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Utilisez les métadonnées de fenêtre d'affichage pour redimensionner correctement votre page Web. Dans votre document <head> : fournit des métadonnées qui spécifient comment vous souhaitez que la fenêtre d'affichage du navigateur afficher votre page Web. Par exemple, les métadonnées de votre fenêtre d'affichage peuvent spécifier la hauteur et la largeur des la fenêtre d'affichage du navigateur, l'échelle initiale de la page et la densité d'écran cible.

    L'exemple suivant montre comment définir des métadonnées de 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. Éviter que l'utilisateur ait besoin de faire défiler l'écran vers la gauche et la droite sur la navigation sur votre page. Le défilement vers le haut et vers le bas est plus facile pour l'utilisateur et rend votre page plus simple.
  5. Définissez la hauteur et la largeur de la mise en page sur match_parent. Configurer votre la hauteur et la largeur de l'objet WebView à match_parent s'assure que les vues de votre application sont correctement dimensionnées. Nous vous déconseillons de définir la hauteur sur wrap_content, car le dimensionnement est incorrect. De même, si vous définissez la largeur de mise en page sur wrap_content n'est pas acceptée. Votre WebView risque donc de s'afficher. utiliser plutôt la largeur de son parent. En raison de ce comportement, il est également important de vous assurer qu'aucun La hauteur et la largeur des objets de mise en page parents de votre objet WebView sont définies sur wrap_content
  6. Évitez les demandes de fichiers multiples. Parce que les appareils mobiles ont généralement une vitesse de connexion plus lent que sur les ordinateurs de bureau, faites en sorte que votre page se charge aussi vite que possible. Une façon d’accélérer le processus est de évitez de charger des fichiers supplémentaires tels que des feuilles de style et des fichiers de script dans <head>. Tenez également compte 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