Aller au contenu principal

Mobile-first

Statut​

Document de cadrage frontend — version initiale.

Vision​

DMV doit être pensé d'abord pour le mobile, car les usages locaux se font souvent en déplacement, depuis un lien partagé, une recherche rapide ou une consultation ponctuelle.

Le mobile-first ne signifie pas abandonner le desktop. Il signifie que l'expérience de base doit être excellente sur petit écran.

État actuel visible​

Le site public montre plusieurs éléments orientés mobile :

  • viewport défini dans app/layout.tsx ;
  • PWA manifest ;
  • orientation portrait dans le manifest ;
  • styles pour éviter le zoom involontaire sur les champs ;
  • pull-to-refresh ;
  • drawers et modales ;
  • cartes et composants tactiles ;
  • zones adaptées aux petits écrans.

Le backoffice contient aussi une navigation mobile, mais son usage principal reste plus administratif.

Principes​

  • Prioriser une colonne claire.
  • Réduire le nombre d'actions visibles simultanément.
  • Adapter les cartes et listes aux gestes tactiles.
  • Garder les champs de formulaire lisibles.
  • Éviter les tableaux complexes sur mobile public.
  • Prévoir des états de chargement légers.
  • Optimiser les images et cartes.

Parcours prioritaires mobile​

  • Consulter une commune.
  • Chercher un acteur.
  • Ouvrir un mini-site.
  • Lire une publication.
  • Ajouter un favori.
  • Contacter ou revendiquer un acteur.
  • Consulter une alerte ou un service communal.
  • Accéder à son espace utilisateur.

Backoffice mobile​

Le backoffice doit rester utilisable sur mobile pour des actions simples, mais les opérations complexes peuvent rester plus confortables sur desktop.

La cible n'est pas de transformer tout le backoffice en application mobile complète.

Points d'attention accessibilité​

Le code public définit actuellement userScalable: false dans le viewport. Ce point doit être revu au regard de l'accessibilité, car le zoom utilisateur est important pour certains publics.

Les composants doivent aussi préserver :

  • focus visible ;
  • labels explicites ;
  • contrastes suffisants ;
  • tailles tactiles ;
  • alternatives aux gestes.

Vision cible​

La cible est :

  • public mobile excellent ;
  • backoffice responsive suffisant ;
  • PWA robuste ;
  • native mobile seulement si la PWA ne suffit plus ;
  • design system pensé pour le tactile.

Risques​

  • Trop de fonctionnalités visibles sur petit écran.
  • Cartes et médias trop lourds.
  • Navigation confuse entre commune, acteur et espace utilisateur.
  • Accessibilité sacrifiée pour une esthétique mobile.
  • Backoffice trop complexe sur tablette ou mobile.