Conception web mobile first : principes et mise en pratique

Concevoir en mobile first signifie créer d’abord pour l’écran du téléphone, puis adapter la mise en page aux écrans plus larges. Découvrez les critères, les compromis et un exemple.

La conception mobile first consiste à planifier et créer chaque page d’abord pour un petit écran de téléphone, puis à ajouter des colonnes et une mise en page plus riche lorsque l’écran s’élargit. Elle vous oblige à hiérarchiser le contenu, car un téléphone n’affiche qu’un élément à la fois. Elle correspond aussi à la façon dont Google explore les sites : Google utilise principalement la version mobile d’une page pour l’indexation et le classement.

Mobile first et conception « responsive »

Le responsive design est la technique : une seule page dont la mise en page s’adapte à l’écran grâce à une balise viewport et media queries. Le mobile first est l’ordre dans lequel vous concevez le site. Un site responsive conçu d’abord pour ordinateur rétrécit une mise en page large ; un site mobile first commence par le format étroit et s’enrichit ensuite. Les deux peuvent être responsive, mais le mobile first est généralement moins encombré sur téléphone.

Critères de décision pour une petite entreprise

QuestionChoix mobile firstCompromis
Que doit montrer le premier écran ?Nom, activité, lieu et un boutonMoins de place pour les slogans et les grandes images
Action principaleAppel en un clic ou formulaire court, accessible au pouceLes longs formulaires sont abandonnés sur téléphone ; demandez moins d’informations
NavigationPeu de liens de premier niveau ; bouton de menu sur petit écranLes menus cachés passent facilement inaperçus : répétez les liens importants dans la page
ImagesCompressées et adaptées à l’écranLes très grandes photos ralentissent les téléphones sur le réseau mobile
Tableaux et contenus largesTransformez-les en cartes ou rendez leur conteneur défilantDemande plus de travail de conception qu’un tableau pour ordinateur

La taille des zones tactiles et du texte relève aussi de l’accessibilité : la taille minimale des cibles WCAG 2.2 est de 24 × 24 pixels CSS.

Exemple détaillé (démonstration identifiée comme telle)

Une boulangerie fictive, « Flour Lane Bakery », conçoit d’abord sa page d’accueil pour téléphone. L’entreprise n’existe pas et aucun résultat n’est revendiqué.

Écran de téléphone 1 : « Flour Lane Bakery - pains au levain et gâteaux, Leith »
                bouton : « Commander un gâteau » | lien : « Horaires du jour »
Écran de téléphone 2 : trois cartes : pain / gâteaux de fête / vente en gros
Écran de téléphone 3 : étapes de commande (choisir, sélectionner une date, verser un acompte au retrait)
Écran de téléphone 4 : adresse, lien vers la carte, horaires, téléphone (appel en un clic)
Tablette+ :     les cartes passent sur 3 colonnes ; les horaires sont à côté de la carte
Ordinateur+ :   l’en-tête affiche tous les liens ; la bannière ajoute une deuxième photo
Éléments supprimés du téléphone : grille Instagram (remplacée par un lien), long historique (page À propos)
Exemple de site de boulangerie créé avec We.Inc
Exemple de site de boulangerie créé avec We.Inc (modèle de démonstration, pas un site client).
Le sélecteur d’appareil de l’éditeur We.Inc affiche l’aperçu du site au format téléphone
Aperçu du modèle au format téléphone dans l’éditeur We.Inc.

Liste de vérification mobile first à copier

[ ] Une action principale visible sur le premier écran du téléphone
[ ] Nom de l’entreprise, activité et lieu visibles sur le premier écran
[ ] Lien d’appel en un clic sur le numéro de téléphone
[ ] Texte d’au moins 16px ; lecture possible sans zoom au pincement
[ ] Boutons et liens faciles à toucher, avec un espace entre eux
[ ] Formulaires : uniquement les champs nécessaires ; clavier adapté (téléphone, e-mail)
[ ] Images compressées et dimensionnées ; aucune ne dépasse la largeur de l’écran
[ ] Aucun défilement horizontal à 360px de large
[ ] Menu utilisable d’un pouce ; liens importants répétés dans la page
[ ] Testé sur un vrai téléphone avec données mobiles, pas seulement dans une fenêtre d’ordinateur

Limites à connaître

Étape suivante

Commencez avec un modèle pour entreprise dans l’éditeur de sites We.Inc; les modèles sont responsive et vous pouvez les prévisualiser sur téléphone, tablette et ordinateur. Lancez ensuite l’outil d’évaluation de site. Le forfait Free permet de créer jusqu’à 3 sites à partir de modèles sur une adresse we.inc (sans crédits IA ni domaine personnalisé) ; Starter à $20/mois ajoute la création par IA et les domaines personnalisés (tarifs ). Vous prévoyez un budget de création ? Utilisez le calculateur de coût de site.

Créez le site web de votre entreprise

Questions fréquentes

Qu’est-ce que la conception web mobile first ?

Concevoir chaque page d’abord pour un écran de téléphone, puis enrichir la mise en page pour les écrans plus grands. Cela place les contenus et l’action les plus importants en haut de page sur téléphone.

Le mobile first est-il la même chose que le responsive design ?

Non. Le responsive design est la technique qui permet à une page de s’adapter à tous les écrans. Le mobile first est l’ordre de conception : commencer par le plus petit écran.

Google utilise-t-il la version mobile de mon site ?

Oui. Google indique qu’il utilise principalement la version mobile du contenu d’un site pour l’indexation et le classement.

Commencer gratuitement · Sans carte bancaire

Product

Who It's For

Features

Resources

Company

View Sitemap