Design
Design mobile d'abord : ce que ça change
Le design mobile d'abord consiste à dessiner l'écran du téléphone avant celui de l'ordinateur, sans surcoût de principe (site dès 500 € HT), et cela change l'ordre du travail, la place donnée à chaque information et la façon de juger un site. Pour vous, cela se traduit par un site plus lisible sur le petit écran : un site sur modèle démarre à 500 € HT en 10 jours, un design sur mesure à 800 € HT en 2 à 3 semaines. Voici ce que cette méthode modifie concrètement, et comment la vérifier dans un projet.
L'essentiel
- Mobile d'abord veut dire que l'on conçoit en premier la version téléphone, puis que l'on enrichit pour la tablette et l'ordinateur, et non l'inverse.
- La contrainte du petit écran oblige à décider ce qui est vraiment prioritaire : une page se bâtit autour d'une action principale, pas autour d'une accumulation de blocs.
- Boutons, menus et formulaires se pensent pour le pouce : zones de toucher confortables, champs courts, clavier adapté.
- Le téléphone fonctionne souvent sur un réseau moins rapide que votre bureau : le poids des images et la vitesse d'affichage font partie du design.
- Se fier à un simple redimensionnement de la fenêtre ne suffit pas : un site mobile d'abord se teste sur de vrais téléphones, avec le doigt.
Design mobile d'abord : ce que cela change, concrètement, pour votre site
Pendant des années, on a dessiné les sites pour l'écran d'un ordinateur, puis on s'est demandé comment les faire tenir sur un téléphone. Le design mobile d'abord renverse l'ordre : on commence par l'écran le plus étroit, celui où la place est la plus comptée, et on ajoute ensuite ce que les grands écrans permettent. L'anglais dit « mobile first » ; c'est la même chose.
Ce renversement change trois choses. D'abord la hiérarchie : sur un écran de téléphone, il n'y a de place que pour une chose à la fois, donc on est contraint de choisir ce qui vient en premier. Ensuite la forme : les éléments s'empilent verticalement au lieu de s'étaler en colonnes. Enfin la manière de juger : on ne demande plus « est-ce joli sur mon ordinateur ? », mais « un visiteur qui tient son téléphone d'une main trouve-t-il ce qu'il cherche en quelques secondes ? »
Pour un site sur mesure, cette approche s'applique à la maquette comme au développement. Si vous souhaitez voir comment un site personnalisé se construit de bout en bout, la page consacrée à la création de site web personnalisé en détaille les étapes.
Mobile d'abord, adaptatif, responsive : ne pas confondre les trois approches de design
Ces trois termes se croisent dans les devis et se confondent facilement. Ils décrivent pourtant des façons de travailler différentes, avec des conséquences réelles sur ce que vous recevez.
| Approche | Principe | Avantage | Limite |
|---|---|---|---|
| Responsive (« réactif ») | Une seule page dont la mise en forme s'ajuste à la largeur de l'écran | Un seul site à maintenir, une adresse unique | Conçu à partir du bureau, le mobile peut hériter d'une version « rétrécie » qui n'a pas été pensée |
| Mobile d'abord | On dessine d'abord la version téléphone, puis on l'enrichit pour les écrans plus grands | La version téléphone est pensée, pas subie ; le contenu est hiérarchisé | Demande de décider tôt de ce qui est prioritaire ; la version bureau doit être soignée à son tour |
| Adaptatif | Plusieurs mises en page distinctes, choisies selon l'appareil | Contrôle fin pour chaque type d'écran | Plus de variantes à concevoir, tester et maintenir |
| Site mobile séparé | Une adresse et un site différents pour le téléphone | Possible pour des besoins très particuliers | Contenus à tenir à jour en double ; peu de situations le justifient aujourd'hui |
En pratique, mobile d'abord et responsive se combinent : le site est responsive dans sa technique, et mobile d'abord dans la façon dont il a été dessiné. C'est cette combinaison que vous devez chercher. Un site simplement « compatible mobile » peut l'être sur le plan technique tout en offrant une expérience médiocre sur téléphone.
Ce que l'écran du téléphone vous oblige à décider sur le contenu
Un écran de téléphone montre, à la première vue, une seule zone utile : le haut de la page, avec un titre, une phrase et peut-être un bouton. Ce qui s'y trouve doit répondre à la question que se pose le visiteur en arrivant. Cela ressemble à une contrainte, mais c'est un exercice utile : si vous ne savez pas quoi mettre à cet endroit, c'est que le message principal de la page n'est pas encore clair.
Une action principale par page
Appeler, réserver, commander, demander un devis : on choisit l'action qui compte et on la rend visible sans faire défiler. Les autres actions passent au second plan.
Des textes plus courts
Un paragraphe de huit lignes sur un écran d'ordinateur devient un mur de texte sur un téléphone. On écrit court, on découpe, on place l'essentiel en premier.
Les infos pratiques à portée de pouce
Téléphone cliquable, adresse qui ouvre l'application de plan, horaires visibles : la personne qui consulte votre site en déplacement cherche souvent une information immédiate.
Cette discipline profite aussi à la version ordinateur. Un site dont le contenu a été trié pour le téléphone laisse moins de place au superflu quand il s'affiche sur un grand écran. Il peut, bien sûr, s'y étendre : ajouter une colonne latérale, un tableau plus complet, des images plus larges. Mais il part d'une base claire.
Un point d'organisation se joue ici avec vous : la rédaction des textes. Si vos contenus existent déjà sous une forme longue (une plaquette, un ancien site), prévoyez de les raccourcir. Plus on les prépare tôt, plus la maquette mobile se construit vite.
Boutons, menus et formulaires : concevoir un site mobile pour le pouce
Sur ordinateur, on vise avec une souris, précise au pixel près. Sur téléphone, on touche avec un doigt, et le doigt est large. Une grande partie du design mobile d'abord tient à ce constat : tout ce qui est cliquable doit être confortable à toucher, et rien ne doit être trop près d'un autre élément cliquable.
- Taille des zones de toucher. Les recommandations d'accessibilité fixent des minimums pour les cibles tactiles ; les guides de conception d'Apple et de Google conseillent des tailles plus généreuses, de l'ordre de quelques dizaines de pixels de côté. Un lien noyé dans une phrase est difficile à viser, un bouton large l'est beaucoup moins.
- Menu de navigation. Le menu « hamburger » (trois traits) fait gagner de la place, mais cache les rubriques. Pour un site de quelques pages, une navigation simplifiée, avec les deux ou trois entrées essentielles visibles, peut être plus claire.
- Formulaires courts. Chaque champ supplémentaire est une raison d'abandonner. On ne demande que le nécessaire, et on affiche le bon clavier selon le champ : numérique pour un téléphone, avec arobase pour une adresse e-mail.
- Zone de pouce. Quand on tient son téléphone d'une main, le bas de l'écran est le plus facile à atteindre. Une action fréquente, comme « Appeler », gagne à y être placée plutôt qu'en haut à droite.
- Survol impossible. Sur un écran tactile, rien ne se passe quand on « passe la souris ». Toute information qui n'apparaît qu'au survol (une infobulle, un menu déroulant) doit avoir une alternative au toucher.
Un test simple à faire vous-même
Prenez votre téléphone, tenez-le d'une seule main et essayez d'atteindre le bouton principal de votre page d'accueil avec le pouce. Si vous devez changer de main ou vous contorsionner, un visiteur pressé le fera aussi, ou renoncera.
Vitesse et poids des pages : le design mobile d'abord est aussi une question de performance
Un téléphone n'a pas la puissance d'un ordinateur de bureau, et sa connexion varie : fibre à la maison, réseau chargé dans le train, couverture faible en zone rurale. Un site conçu sur un poste fixe avec une bonne connexion peut sembler rapide à son créateur et lent à ses visiteurs. Penser mobile d'abord, c'est donc aussi décider de ce que l'on charge et à quel moment.
Les images pèsent généralement le plus lourd dans une page. Une photographie destinée à un grand écran n'a pas besoin d'être envoyée telle quelle à un téléphone : on prévoit des versions de tailles différentes, et le navigateur prend celle qui convient. On évite aussi les vidéos qui se lancent automatiquement en en-tête, les animations lourdes et les bibliothèques de scripts inutilisées.
Ce travail a une incidence sur votre visibilité. D'après la documentation que publie Google, le moteur de recherche utilise principalement la version mobile d'une page pour l'indexer et la classer ; les indicateurs d'expérience de page, qui mesurent notamment la rapidité d'affichage et la stabilité de la mise en page, font partie de ses critères parmi d'autres. Ces règles évoluent, et rien ne permet de promettre un classement : retenez simplement qu'une version mobile soignée est un prérequis, pas un bonus. Si le référencement vous intéresse, estimez ce que représente un projet complet avec le simulateur de coût d'un projet SEO.
Le piège des tests faits sur un ordinateur rapide
Ouvrir votre site sur l'ordinateur du bureau, en fibre, ne dit rien de ce que vivra un visiteur sur un vieux téléphone avec une connexion moyenne. Demandez qu'un test soit fait avec une connexion ralentie simulée, ou, plus simplement, ouvrez le site sur votre téléphone en coupant le Wi-Fi.
Trois situations imaginaires pour comprendre l'effet du design mobile d'abord
Les trois exemples ci-dessous sont des scénarios illustratifs, pas des clients réels, et ils ne comportent aucun chiffre. Ils servent à montrer comment le choix de départ modifie les décisions de conception.
Scénario 1 : un restaurant dont les clients cherchent l'adresse et la carte
Imaginons un restaurant de quartier. Les visiteurs arrivent d'un moteur de recherche ou d'une carte, souvent sur leur téléphone, avec une question précise : est-ce ouvert ce soir, que sert-on, comment réserver. En conception mobile d'abord, l'écran d'accueil montre les horaires du jour, un bouton « Appeler » et un accès direct à la carte. La carte elle-même est du texte lisible, pas un fichier à télécharger que l'on agrandit en pinçant l'écran. La version ordinateur ajoute des photos plus grandes et un plan intégré, sans modifier l'ordre des informations.
Scénario 2 : un cabinet de soins où l'on prend rendez-vous dans la file d'attente
Imaginons un cabinet paramédical dont les patients consultent le site depuis leur téléphone, parfois en urgence, parfois à un âge où la vue baisse. Les priorités sont la lisibilité (texte assez grand, contraste net), un numéro cliquable et une prise de rendez-vous en peu d'étapes. Le design mobile d'abord impose de renoncer aux paragraphes d'introduction à rallonge : la page commence par ce que le patient veut savoir, c'est-à-dire qui vous êtes, ce que vous traitez et comment vous joindre.
Scénario 3 : une boutique dont le panier se remplit sur le canapé
Imaginons une boutique en ligne dont les acheteurs naviguent le soir sur leur téléphone. La page produit doit afficher l'image, le prix et le bouton d'achat sans qu'il faille dérouler quatre écrans. Le tunnel de commande, c'est-à-dire la suite d'écrans du panier au paiement, doit se compléter au pouce : champs d'adresse pré-remplis quand c'est possible, moyens de paiement du téléphone proposés si le prestataire le permet, et aucun champ superflu. Pour ce type de projet, voir nos modèles de boutiques WooCommerce.
Comment se déroule un projet de design mobile d'abord, de la maquette à la livraison
Un projet mobile d'abord suit les mêmes grandes étapes qu'un autre projet de site, mais l'ordre de certaines tâches change. Voici ce que vous pouvez en attendre, et ce que l'on vous demandera de préparer.
- 1
Cadrage : la question de l'action principale
On identifie ce que le visiteur doit pouvoir faire en priorité sur chaque page. C'est un échange, pas un questionnaire : plus vos réponses sont précises, plus la maquette est juste.
- 2
Contenus : trier et raccourcir
Vous nous transmettez textes, images et informations pratiques. Nous vous aidons à les ordonner et à les raccourcir pour le petit écran.
- 3
Maquette de la version téléphone
La version mobile est dessinée en premier et vous est présentée. Les allers-retours sont illimités jusqu'à validation.
- 4
Extension aux grands écrans
Une fois la version téléphone validée, la tablette et l'ordinateur en sont déduits, avec les ajouts que la place permet.
- 5
Développement et tests sur appareils
Le site est construit, puis testé sur plusieurs tailles d'écran et sur de vrais téléphones. Ces tests sont offerts.
- 6
Livraison et prise en main
Vous recevez les accès et la formation, offerte, pour modifier vos contenus. Pour un design sur mesure, comptez 2 à 3 semaines ; pour un site sur modèle, 10 jours.
Les tarifs de départ sont de 500 € HT pour un site sur modèle et de 800 € HT pour un design sur mesure. Pour situer votre projet, le simulateur de coût d'un site web donne une première fourchette.
Tester un site mobile d'abord : la liste de vérification avant validation
Les outils de simulation intégrés aux navigateurs, qui réduisent la fenêtre à la taille d'un téléphone, aident au travail du développeur. Ils ne remplacent pas un vrai téléphone, car ils ne reproduisent ni la vitesse réelle, ni le toucher, ni la façon dont le clavier recouvre une partie de l'écran. Voici une liste à parcourir avant de valider.
- Ouvrir le site sur un téléphone récent et sur un appareil plus ancien, si vous en avez un sous la main.
- Passer en mode portrait puis paysage : la mise en page tient-elle sans texte coupé ni élément qui déborde ?
- Appuyer sur chaque bouton et chaque lien du menu avec le pouce, sans zoomer.
- Remplir le formulaire de contact en entier, l'envoyer, et vérifier que le message arrive réellement.
- Agrandir la taille du texte dans les réglages du téléphone : le site reste-t-il lisible et utilisable ?
- Couper le Wi-Fi et recharger la page : le temps d'attente reste-t-il raisonnable ?
- Contrôler que le numéro de téléphone déclenche bien un appel et que l'adresse ouvre un plan.
- Lire une page entière sous un soleil direct ou avec la luminosité réduite : le contraste suffit-il ?
Ne pas oublier les personnes qui ont besoin de souplesse
Un texte trop petit, un contraste faible ou des zones de toucher serrées pénalisent d'abord les personnes malvoyantes ou ayant des difficultés motrices, mais elles gênent tout le monde dans une situation défavorable : soleil, marche, une main occupée. Des règles d'accessibilité numérique encadrent certains sites ; selon votre statut, renseignez-vous auprès d'un juriste ou du référent accessibilité de votre secteur.
Les erreurs fréquentes du design mobile d'abord, et comment les éviter
- Se contenter de vérifier la version mobile à la fin. Si elle n'est regardée qu'en dernier, on ne fait pas du mobile d'abord : on fait du responsive tardif.
- Empiler tous les blocs de la version bureau. Sur un téléphone, cela produit une page interminable. Il faut trier, pas simplement empiler.
- Cacher l'essentiel dans un menu. Si l'action principale n'est visible qu'après avoir ouvert un menu, des visiteurs ne la trouveront pas.
- Négliger la version ordinateur. Mobile d'abord ne veut pas dire mobile seulement : sur grand écran, une version étirée du téléphone paraît vide et pauvre.
- Charger des images prévues pour le grand écran. Elles ralentissent la page sans que le visiteur n'en voie la différence.
- Utiliser des fenêtres intrusives dès l'arrivée. Un bandeau qui recouvre l'écran dès l'arrivée irrite le visiteur et masque votre message ; réservez-les aux obligations légales, comme le consentement aux cookies, en les limitant à leur strict nécessaire.
- Oublier le clavier. Quand le clavier s'affiche, il occupe une part importante de l'écran ; un formulaire dont les champs et le bouton d'envoi passent dessous est inutilisable.
Site mobile ou application mobile : ne pas confondre design mobile d'abord et application
« Mobile d'abord » concerne un site web, que l'on consulte dans le navigateur du téléphone. Une application mobile est autre chose : un programme que l'on installe depuis une boutique d'applications et qui peut utiliser des fonctions du téléphone, comme les notifications ou l'appareil photo. Un bon site mobile d'abord couvre de nombreux besoins sans passer par une application.
Une application se justifie lorsque l'usage est fréquent, que l'outil doit fonctionner dans des conditions particulières (hors connexion, par exemple) ou qu'il s'appuie sur des fonctions que le navigateur ne propose pas. Elle représente aussi un budget d'un autre ordre : application simple dès 5 000 € HT, application métier de 8 000 à 15 000 € HT. Pour y voir clair, consultez notre page sur le développement d'applications mobiles, ou parlez-en lors d'un échange.
Les questions à poser à un prestataire sur le design mobile d'abord
Certains devis annoncent un site « responsive » ou « adapté mobile » sans préciser ce que cela recouvre. Pour savoir ce que vous achetez, posez des questions précises.
- La maquette de la version téléphone me sera-t-elle présentée avant celle de l'ordinateur, ou seulement après ?
- Sur quels appareils réels le site sera-t-il testé, et ces tests sont-ils inclus dans le prix ?
- Comment seront traitées les images, pour ne pas alourdir les pages sur un réseau mobile ?
- Qui décide de la hiérarchie du contenu sur la version téléphone, et comment la validons-nous ?
- Les boutons et les menus respectent-ils les recommandations d'accessibilité pour le toucher ?
- Si je modifie un texte par la suite, la mise en page mobile s'adapte-t-elle seule, ou faut-il intervenir sur la version téléphone à chaque fois ?
Si vous préférez en discuter à partir de votre propre projet, vous pouvez prendre rendez-vous : nous regardons ensemble votre site actuel sur un téléphone et ce qu'il y aurait à changer.
Votre site est-il confortable sur un téléphone ?
Montrez-nous votre site actuel ou votre idée de projet : nous vous dirons ce qui fonctionne sur le petit écran, ce qui ne fonctionne pas, et ce qu'il faudrait pour repartir sur une base mobile d'abord.
Questions fréquentes
Qu'est-ce que le design mobile d'abord ?
C'est une méthode qui consiste à concevoir d'abord la version téléphone d'un site, puis à l'enrichir pour la tablette et l'ordinateur. Elle oblige à hiérarchiser le contenu dès le départ, à penser les boutons pour le toucher et à soigner le poids des pages. L'expression anglaise équivalente est « mobile first ».
Mobile d'abord coûte-t-il plus cher qu'un site classique ?
Pas par principe. C'est un ordre de travail, pas une option supplémentaire. Chez nous, un site sur modèle démarre à 500 € HT, livré en 10 jours, et un design sur mesure à 800 € HT, en 2 à 3 semaines. Le coût varie surtout selon le nombre de pages et les fonctions demandées.
Un site responsive est-il forcément conçu mobile d'abord ?
Non. Un site responsive s'adapte techniquement à la largeur de l'écran, mais il peut avoir été dessiné pour l'ordinateur puis réduit. Le mobile d'abord décrit la manière dont il a été conçu : la version téléphone vient en premier, et le reste en est déduit.
Mon site doit-il être différent sur téléphone et sur ordinateur ?
Le contenu reste le même, mais sa présentation change. Sur téléphone, les éléments s'empilent et l'action principale est mise en avant ; sur ordinateur, on peut afficher plusieurs colonnes, des images plus larges et plus de détails. Un seul site, géré à un seul endroit, se présente donc différemment selon l'écran.
Le design mobile d'abord améliore-t-il mon référencement ?
Pas automatiquement. Selon la documentation de Google, le moteur s'appuie principalement sur la version mobile des pages pour l'indexation, et des critères d'expérience comme la rapidité y contribuent. Une version téléphone soignée est donc un prérequis utile, mais elle n'assure à elle seule aucun classement.
Faut-il une application mobile si mon site est mobile d'abord ?
Pas nécessairement. Un site bien conçu couvre de nombreux besoins : présenter une activité, prendre contact, vendre. Une application se justifie pour un usage fréquent, un fonctionnement hors connexion ou l'accès à des fonctions du téléphone. Elle relève d'un autre budget, à partir de 5 000 € HT pour une application simple.
Comment vérifier que mon site est vraiment pensé pour le mobile ?
Ouvrez-le sur un vrai téléphone, d'une seule main. Vérifiez que l'action principale est visible sans faire défiler, que les boutons se touchent sans erreur, que le formulaire s'envoie facilement et que la page s'affiche vite avec une connexion mobile. Cette vérification dit davantage qu'une simple réduction de fenêtre sur ordinateur.
Peut-on passer un ancien site en mobile d'abord sans tout refaire ?
Parfois, mais la structure d'un ancien site conçu pour l'ordinateur limite ce que l'on peut obtenir. On commence par un audit sur téléphone pour identifier ce qui peut être corrigé (taille des textes, boutons, images) et ce qui demande de reconcevoir les pages principales.
