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 téléphone : elle s'adapte à l'écran étroit, dispose de grandes zones tactiles, se charge rapidement en données mobiles et peut être ajoutée à l'écran d'accueil en tant qu'application web progressive (PWA). Pour la plupart des nouvelles applications, c'est la première version pratique : un seul code, un seul lien, aucune validation par un store. Elle a toutefois de vraies limites, notamment pour les notifications sur iPhone et l'accès approfondi aux fonctions de l'appareil, et ce guide indique clairement quand il faut plutôt une application native.

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

Une PWA est une application web responsive avec quelques atouts en plus : vous n'avez donc pas à choisir entre les deux premières. Concevez d'abord la version responsive, puis rendez-la installable. Pour une comparaison plus détaillée, consultez applications natives ou web progressives.

Ce que les applications web peuvent et ne peuvent pas faire sur téléphone

Les navigateurs en font plus que ce que beaucoup imaginent :

• Appareil photo et envoi de photos, via les champs de fichiers standard.
• Localisation, avec l'autorisation de l'utilisateur.
• Installation sur l'écran d'accueil avec une icône et un lancement en plein écran.
• Utilisation hors ligne, en mettant en cache les pages et les données avec un service worker (un script d'arrière-plan que le navigateur exécute pour votre site).
• Notifications push — avec une restriction sur iPhone. Selon l'équipe WebKit d'Apple, 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 de l'appareil, comme la localisation 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.
• La découverte dans l'App Store. Si les gens doivent chercher votre application dans le store, vous devez y être.
• Le travail hors ligne intensif, comme la synchronisation en arrière-plan de grands volumes de données.
• Les graphismes exigeants en performances, comme les jeux gourmands.

Si aucun de ces points n'est central pour votre application, une application web vous conviendra sans doute.

Concevoir d'abord pour le téléphone

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

Mise en page

• Une seule colonne sur les petits écrans. Les barres latérales deviennent une barre en bas ou un menu.
• Pas de défilement horizontal. Les tableaux larges deviennent des cartes ou défilent dans leur propre conteneur.
• Texte lisible sans zoom — texte courant d'environ 16 px.

Tactile

• De grandes zones de toucher. Environ 44 × 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 grands téléphones.
• Aucune fonction réservée au survol. Les info-bulles et les menus qui apparaissent au survol n'existent pas sur un écran tactile.
• Le bon clavier. Les champs e-mail doivent afficher le clavier e-mail, les champs téléphone le pavé numérique. Demandez les types de saisie corrects.

Rapidité

• Images légères à des dimensions raisonnables, chargées à mesure qu'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 paraisse jamais figée.

Zones de sécurité et barre d'adresse

Sur les téléphones modernes, le contenu peut passer sous l'encoche ou la barre d'accueil, surtout dans une application installée en plein écran. Prévoyez des marges de zone sûre. Surveillez aussi les mises en page à hauteur totale 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 de :

1. Un manifeste d'application web — un petit fichier avec le nom de l'application, un nom court, les icônes, la couleur du thème et le mode d'ouverture (en général plein écran « standalone »).
2. Des icônes dans les tailles attendues par les plateformes, dont une adaptée aux appareils Apple.
3. HTTPS, que toute application correctement hébergée possède déjà.
4. Un service worker si vous voulez le hors ligne ou les notifications push.

Indiquez ensuite aux utilisateurs comment installer l'application. Les navigateurs Android proposent en général une invite d'installation ou une entrée de menu ; sur iPhone, il faut appuyer sur le bouton Partager, puis « Sur l'écran d'accueil ». Une courte note « Installer cette application » avec ces étapes aide beaucoup.

Le mode hors ligne est là où les PWA deviennent compliquées. Mettre en cache les pages de l'application pour qu'elle s'ouvre sans connexion est simple. Permettre de modifier les données hors ligne et de les synchroniser ensuite représente un vrai travail — ne le prévoyez que si vos utilisateurs en ont réellement besoin.

Un premier prompt qui fonctionne

Crée une application web pour notre équipe de nettoyage afin de voir les interventions du jour et de les marquer comme terminées. Conçois d'abord pour téléphone : une seule colonne, de grandes zones tactiles, le bouton d'action principal fixé près du bas, aucun contrôle réservé au survol, pas de défilement horizontal, et les bons claviers pour les champs téléphone et e-mail. Chaque intervention affiche l'adresse (un toucher ouvre la carte), le téléphone du client (un toucher appelle), une liste de contrôle et un bouton « Marquer comme terminé » qui permet de prendre une photo. Les responsables se connectent sur un ordinateur portable pour attribuer les interventions ; sur un grand écran, affiche un tableau au lieu de cartes. Fais-en une PWA installable avec un manifeste, des icônes et un affichage en mode standalone, et mets en cache la coque de l'application pour qu'elle s'ouvre sans réseau. 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 à 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 recouvre les champs.
3. Parcourez la tâche principale d'une seule main. Si une étape nécessite les deux mains ou un zoom, corrigez-la.
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 du mode hors ligne. Commencez par « s'ouvre sans réseau et affiche un message clair » ; ajoutez la modification hors ligne seulement si nécessaire.
6. Vérifiez la rapidité sur une connexion lente. Les outils de développement de votre navigateur peuvent en simuler une.
7. Ajoutez les notifications en dernier, si c'est nécessaire — et prévoyez un repli par e-mail pour les utilisateurs qui n'installent pas l'application.

Erreurs courantes

• Concevoir uniquement sur un grand écran. Vérifiez chaque écran à la largeur d'un téléphone au fil du travail.
• Des tableaux qui débordent. Transformez les lignes en cartes sur les petits écrans.
• Des zones de toucher trop petites et des liens trop rapprochés.
• Des formulaires qui se battent avec le clavier — mauvais types de saisie, champs cachés derrière le clavier, pas de parcours « suivant ».
• Supposer que les notifications push sur iPhone fonctionnent 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 store compte, prévoyez-le séparément.
• Encapsuler un site web et l'appeler application. Les Consignes de validation de l'App Store d'Apple demandent des applications qui vont au-delà d'un site web reconditionné ; une simple enveloppe risque d'être refusée.

Quand il faut une application native

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

• La présence dans les stores est le moyen par lequel les clients vous trouveront.
• Vous dépendez de la localisation en arrière-plan, du Bluetooth, des données de santé, des widgets ou d'autres fonctions de l'appareil que les navigateurs n'offrent pas de façon fiable.
• Votre application doit fonctionner entièrement hors ligne pendant de longues périodes.
• Vos utilisateurs l'attendent — certains publics n'utiliseront tout simplement rien qui ne soit pas dans le store.

La publication sur les stores a ses propres coûts et étapes. En septembre 2026, selon leurs propres sites, le programme développeur d'Apple coûte 99 US$ par an et un compte développeur Google Play 25 US$ une seule fois, et chaque version passe par une validation. Beaucoup d'équipes commencent par une application web adaptée aux mobiles pour vérifier que le produit intéresse, puis investissent dans le natif une fois qu'elles le savent. Comment créer une application avec l'IA couvre cette première étape de bout en bout.

Le créer avec Mythex

Mythex crée des applications web : vous décrivez l'application dans le chat, puis vous la vérifiez dans l'aperçu en direct sur ordinateur et dans un cadre à la taille d'un téléphone que vous pouvez redimensionner. La documentation propose un prompt adaptatif 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 un lien public accessible depuis n'importe quel téléphone. Avec le forfait Pro, Mythex peut aussi encapsuler l'application en application Android et iPhone, envoyée aux tests internes de Google Play et à TestFlight. Consultez le créateur d'applications web IA ou parcourez les modèles d'applications pour commencer. Pour un exemple concret, lisez comment créer une application de suivi d'habitudes.

Questions