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.
- 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.
- 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>
etcharset
plus simples :<!DOCTYPE html> ... <meta charset="UTF-8">
- 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.
- 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.
- 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 objetWebView
surmatch_parent
, vous vous assurez que les vues de votre application sont correctement dimensionnées. Nous vous déconseillons de définir la hauteur surwrap_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 surwrap_content
. VotreWebView
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 objetWebView
n'a une hauteur et une largeur définies surwrap_content
. - É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
- Interface utilisateur Pixel Perfect dans WebView
- Apprendre le responsive design
- Images haute résolution pour des densités de pixels variables
- Bonnes pratiques relatives au Web mobile
- Accélérer le Web