Comment créer une application Web adaptée aux mobiles

Une application Web adaptée aux mobiles est un site Web qui fonctionne comme une application sur un téléphone : il s'adapte à l'écran étroit, a de grandes zones tactiles, se charge rapidement sur les données mobiles, et peut être ajouté à l'écran d'accueil comme application Web progressive (PWA). Pour la plupart des nouvelles applications, c'est la première version pratique : une seule base de code, un seul lien, aucun examen de magasin. Elle a toutefois de vraies limites, surtout en ce qui concerne les notifications sur iPhone et l'accès profond aux appareils, et ce guide est franc quant aux situations où une application native est nécessaire.

Trois façons d'être « sur mobile »

Une PWA est une application Web adaptative avec quelques ajouts, donc vous n'avez pas à choisir entre les deux premières. Créez d'abord une version adaptative, puis rendez-la installable. Pour une comparaison plus approfondie, consultez applications natives ou applications Web progressives.

Ce que les applications Web peuvent et ne peuvent pas faire sur les téléphones

Les navigateurs peuvent faire plus que ce que beaucoup de gens supposent :

• Caméra et téléversement de photos, par les champs de fichiers standard.
• Géolocalisation, avec l'autorisation de l'utilisateur.
• Installation sur l'écran d'accueil avec une icône et un lancement plein écran.
• Utilisation hors connexion, en mettant en cache les pages et les données avec un service worker (un script en arrière-plan que le navigateur exécute pour votre site).
• Notifications push, avec une particularité sur iPhone. WebKit d'Apple indique que les notifications Web sont arrivées sur iOS et iPadOS 16.4 pour les applications Web ajoutées à l'écran d'accueil. Les utilisateurs doivent d'abord installer l'application, puis autoriser les notifications.

Le natif reste supérieur dans les cas suivants :

• Fonctions avancées des appareils, comme la géolocalisation en arrière-plan, les accessoires Bluetooth, les données de santé et les widgets d'écran d'accueil. La prise en charge dans le navigateur est limitée ou varie selon la plateforme.
• Découverte dans les magasins d'applications. Si les gens doivent chercher votre application dans un magasin, vous devez y être.
• Travail hors connexion intensif, comme la synchronisation en arrière-plan de grands ensembles de données.
• Graphismes sensibles à la performance, comme les jeux exigeants.

Si aucun de ces éléments n'est central à votre application, une application Web vous conviendra probablement.

Concevoir d'abord pour les téléphones

Concevez la mise en page pour téléphone d'abord, puis laissez-la s'étendre aux grands écrans; l'inverse produit généralement des écrans de téléphone encombrés.

Mise en page

• Une seule colonne sur les petits écrans. Les barres latérales deviennent une barre inférieure ou un menu.
• Aucun défilement horizontal. Les grands tableaux deviennent des cartes, ou défilent à l'intérieur de leur propre conteneur.
• Texte lisible sans zoom : le corps du texte fait environ 16 px.

Tactile

• De grandes zones tactiles. Environ 44 par 44 pixels est un minimum courant. Laissez de l'espace entre elles.
• Actions principales à portée du pouce, près du bas de l'écran sur les téléphones hauts.
• Aucune fonction uniquement au survol. Les info-bulles et les menus qui apparaissent au survol n'existent pas sur les écrans tactiles.
• Le bon clavier. Les champs de courriel doivent afficher le clavier courriel, les champs de téléphone le pavé numérique. Demandez les bons types d'entrée.

Vitesse

• De petites images à des dimensions raisonnables, chargées au moment où elles apparaissent à l'écran.
• Moins de bibliothèques lourdes. Chacune ajoute du temps de téléchargement sur les données mobiles.
• Écrans squelettes ou états de chargement clairs, pour que l'application ne semble jamais figée.

Zones de sécurité et barre d'adresse

Sur les téléphones modernes, le contenu peut se retrouver sous l'encoche ou l'indicateur d'accueil, surtout dans une application plein écran installée. Demandez un rembourrage pour les zones de sécurité. Méfiez-vous aussi des mises en page pleine hauteur qui sautent lorsque la barre d'adresse du navigateur apparaît et disparaît.

Rendre l'application installable (PWA)

Pour être installable, une application Web a besoin :

1. D'un manifeste d'application Web, un petit fichier qui contient le nom de l'application, le nom court, les icônes, la couleur du thème et son mode d'ouverture (en général plein écran « autonome »).
2. D'icônes aux dimensions attendues par les plateformes, dont une adaptée aux appareils Apple.
3. De HTTPS, que toute application correctement hébergée possède déjà.
4. D'un service worker si vous voulez la prise en charge hors connexion ou les notifications push.

Indiquez ensuite aux utilisateurs comment l'installer. Les navigateurs Android proposent habituellement une invite d'installation ou un élément de menu; sur iPhone, il faut utiliser le bouton Partager, puis « Ajouter à l'écran d'accueil ». Une courte note « Installer cette application » avec ces étapes aide beaucoup.

La prise en charge hors connexion est là où les PWA se compliquent. Mettre en cache les pages de l'application pour qu'elle s'ouvre sans connexion est simple. Permettre aux utilisateurs de modifier des données hors connexion et de les synchroniser plus tard demande un vrai travail; ne le prévoyez que si vos utilisateurs en ont vraiment besoin.

Une première invite qui fonctionne

Crée une application Web pour notre équipe de nettoyage afin de voir les travaux du jour et de les marquer comme terminés. Conçue d'abord pour les téléphones : une seule colonne, de grandes zones tactiles, le bouton d'action principal fixé près du bas, aucune commande réservée au survol, aucun défilement horizontal, et les bons claviers pour les champs de téléphone et de courriel. Chaque travail affiche l'adresse (toucher pour ouvrir dans les cartes), le téléphone du client (toucher pour appeler), une liste de contrôle et un bouton « Marquer comme terminé » qui peut prendre une photo. Les gestionnaires se connectent sur un ordinateur portable pour attribuer les travaux; sur un grand écran, affiche un tableau plutôt que des cartes. Fais-en une PWA installable avec un manifeste, des icônes et un affichage autonome, et mets en cache la coquille de l'application pour qu'elle s'ouvre sans signal. Enregistre les données dans une base de données.

Étapes de création

1. Créez d'abord la mise en page pour téléphone, avec des données d'exemple, et vérifiez-la dans un aperçu de la taille d'un téléphone.
2. Testez sur de vrais téléphones, au moins un iPhone et un Android si vos utilisateurs ont les deux. Les émulateurs ne montrent pas certains problèmes, comme le clavier à l'écran qui couvre les champs.
3. Parcourez la tâche principale d'une seule main. Si quoi que ce soit demande deux mains ou un zoom, corrigez-le.
4. Ajoutez le manifeste et les icônes, puis installez l'application sur les deux plateformes et vérifiez l'icône, le nom et l'écran de démarrage.
5. Décidez de la question hors connexion. Commencez par « s'ouvre sans signal et affiche un message clair »; n'ajoutez la modification hors connexion que si c'est nécessaire.
6. Vérifiez la vitesse sur une connexion lente. Les outils de développement de votre navigateur peuvent simuler une connexion lente.
7. Ajoutez les notifications en dernier, si nécessaire, et prévoyez un plan de rechange par courriel pour les utilisateurs qui n'installent pas l'application.

Erreurs courantes

• Concevoir uniquement sur un grand moniteur. Vérifiez chaque écran à la largeur d'un téléphone au fur et à mesure.
• Des tableaux qui débordent. Transformez les lignes en cartes sur les petits écrans.
• De petites zones tactiles et des liens trop rapprochés.
• Des formulaires qui se battent avec le clavier : mauvais types d'entrée, champs cachés derrière le clavier, aucun enchaînement « suivant ».
• Supposer que les notifications push fonctionnent sur iPhone dans un onglet du navigateur. Il faut que l'application soit installée sur l'écran d'accueil.
• Promettre une application pour l'App Store que vous ne pouvez pas livrer. Si le magasin compte, prévoyez-le séparément.
• Envelopper un site Web et l'appeler application. Les consignes d'examen des applications d'Apple demandent des applications qui vont au-delà d'un site Web réemballé; une enveloppe minimale risque un refus.

Quand une application native est nécessaire

Passez au natif (ou prévoyez une version native après l'application Web) lorsque :

• La présence dans un magasin est la façon dont les clients vous trouveront.
• Vous dépendez de la géolocalisation en arrière-plan, du Bluetooth, des données de santé, des widgets ou d'autres fonctions d'appareil que les navigateurs n'offrent pas de façon fiable.
• Votre application doit fonctionner entièrement hors connexion pendant de longues périodes.
• Vos utilisateurs s'y attendent : certains publics n'utiliseront tout simplement rien qui ne se trouve pas dans un magasin.

La publication dans un magasin a ses propres coûts et étapes. En septembre 2026, selon leurs sites respectifs, le programme pour développeurs d'Apple coûte 99 $ US par année et le compte développeur Google Play coûte 25 $ US en paiement unique, et chaque version passe par un examen. Beaucoup d'équipes commencent avec une application Web mobile adaptée pour prouver que les gens veulent le produit, puis investissent dans le natif une fois que c'est établi. Comment créer une application avec l'IA couvre cette première étape de bout en bout.

Créer l'application avec Mythex

Mythex crée des applications Web : vous décrivez l'application dans le clavardage et vous la vérifiez dans l'aperçu en direct sur ordinateur, ainsi que dans un cadre de taille téléphone que vous pouvez redimensionner. La documentation présente une invite adaptative pour mobile pour corriger les mises en page sur petit écran. Vous pouvez demander un manifeste PWA et des icônes comme n'importe quelle autre fonctionnalité, puis publier l'application à un lien public accessible sur n'importe quel téléphone. Avec le forfait Pro, Mythex peut aussi envelopper l'application dans une application Android et iPhone, envoyée aux tests internes de Google Play et à TestFlight. Consultez le générateur d'applications Web IA ou parcourez les modèles d'applications pour commencer. Pour un exemple détaillé, lisez comment créer une application de suivi des habitudes.

Questions