Notre glossaire, méticuleusement élaboré, est votre boussole dans l’univers complexe et dynamique du marketing, de la communication et du digital. Ici, chaque terme est une clé que nous vous aidons à décrypter pour vous ouvrir a des concepts innovants et des stratégies éprouvées. Plongez dans nos thématiques pour éclairer votre chemin vers l’excellence et la créativité.
La mise en page adaptative est une approche de conception web dans laquelle la disposition d’une page change selon les caractéristiques du terminal, notamment la largeur d’écran, pour rester lisible et utilisable sur chaque appareil.
Le terme a deux sens en français. Le sens strict est celui de l’Office québécois de la langue française, dans une fiche de 2018. La conception de sites web adaptatifs (adaptive web design) y détecte les caractéristiques du terminal. Elle sélectionne ensuite la version appropriée du code parmi plusieurs versions préparées à l’avance. Dans l’usage courant, y compris dans des documentations techniques de référence, l’expression sert aussi à traduire responsive web design. L’Office relève d’ailleurs que les deux notions sont souvent confondues.
Les composantes diffèrent selon le sens retenu. L’approche adaptative au sens strict repose sur un petit nombre de gabarits fixes, chacun conçu pour une plage de largeurs délimitée par des points de rupture. Le choix du gabarit se fait côté serveur, d’après l’identification du navigateur, ou côté navigateur. L’approche dite réactive part d’un code unique. Elle combine des grilles fluides, des images flexibles et des requêtes média, qui appliquent des règles de style selon la taille de la fenêtre. Dans l’approche réactive, la mise en page dépend de la zone d’affichage réellement disponible dans le navigateur, qui ne se confond pas avec la résolution d’écran. Dans l’approche adaptative pilotée par le serveur, elle dépend de l’appareil identifié.
La mise en page adaptative se distingue du responsive web design au sens strict, qui désigne l’adaptation continue à partir d’un code unique. Elle se distingue aussi du référencement mobile, qui vise la visibilité dans les moteurs de recherche. Le terme intervient dans les cahiers des charges de création ou de refonte de site, dans les échanges entre annonceurs, agences et développeurs, et dans les audits d’ergonomie.
Écrire « site adaptatif » dans un cahier des charges ne suffit pas. Un prestataire peut comprendre plusieurs gabarits fixes, un autre un code unique et fluide. Les deux options n’ont ni le même coût de conception, ni la même charge de maintenance : chaque gabarit fixe doit être mis à jour et testé séparément. Nous recommandons de décrire le comportement attendu plutôt que le mot. Par exemple : aucune barre de défilement horizontale de 320 pixels jusqu’aux grands écrans, même contenu sur toutes les largeurs, liste des largeurs de test.
La documentation Google Search Central sur l’indexation mobile (2025) indique que le moteur indexe et classe les pages d’après leur version mobile. Elle décrit trois configurations : le responsive, la diffusion dynamique, qui envoie un code différent sur la même adresse selon l’appareil, et les adresses séparées. Elle recommande le responsive, jugé le plus simple à mettre en œuvre et à maintenir. Elle exige surtout l’équivalence du contenu, des données structurées et des textes alternatifs entre versions.
Côté accessibilité, le critère 1.4.10 des WCAG 2.2 (W3C) est de niveau AA. Il demande que le contenu se lise sans défilement dans deux dimensions sur une largeur de 320 pixels CSS. Cela correspond à une page de 1 280 pixels CSS agrandie à 400 %. Une mise en page à gabarits fixes doit donc être vérifiée entre ses points de rupture, et pas seulement aux largeurs pour lesquelles elle a été dessinée.
Advalians structure votre brief et votre cahier des charges, puis pilote l’appel d’offres auprès des agences digitales, du sourcing au choix final.
Au sens strict, la mise en page adaptative sélectionne une version de la page parmi plusieurs gabarits préparés à l’avance, selon les caractéristiques du terminal. Le responsive web design ajuste en continu une version unique grâce à des grilles fluides et à des requêtes média. Dans l’usage courant, les deux expressions sont pourtant employées comme synonymes.
En pratique, ne vous fiez pas au mot. Demandez au prestataire combien de gabarits il produira, comment le gabarit est choisi et comment la page se comporte entre deux points de rupture.
Placez-les là où le contenu se dégrade, et non sur les dimensions d’appareils précis. Élargissez progressivement la fenêtre du navigateur depuis 320 pixels. Notez les largeurs où une ligne devient trop longue, où un tableau déborde ou où un menu ne tient plus.
Vérifiez ensuite que ces ruptures couvrent les tailles d’écran les plus fréquentes dans vos statistiques d’audience. Trois à cinq ruptures suffisent souvent, à titre indicatif. Documentez-les dans la charte d’interface pour que chaque nouveau gabarit les respecte.
Combinez trois contrôles. Testez les pages clés dans une fenêtre de 320 pixels CSS de large, ou dans une fenêtre de 1 280 pixels agrandie à 400 % : aucune barre de défilement horizontale ne doit apparaître. Testez sur de vrais appareils, en mode portrait et paysage. Comparez enfin le taux de rebond et le taux de conversion par catégorie d’appareil.
Un écart marqué entre mobile et ordinateur, sur une même page, signale un problème d’affichage ou d’usage à investiguer en priorité. Répétez le contrôle après chaque évolution de gabarit.
Oui, s’il s’agit de retirer ce contenu de la version mobile. Le principal moteur de recherche indexe les pages d’après leur version mobile : un texte absent de cette version n’est pas pris en compte, même s’il figure sur ordinateur.
Repliez plutôt le contenu secondaire dans un accordéon ou des onglets présents dans le code de la page. Vérifiez aussi l’équivalence des titres, des données structurées et des textes alternatifs entre versions. Une liste de contrôle par gabarit évite les oublis lors des évolutions.
Rarement. Un code unique et fluide est plus simple à maintenir, et la documentation du principal moteur de recherche recommande cette configuration. Des gabarits distincts se justifient quand les usages diffèrent vraiment selon l’appareil, ou quand un site ancien ne peut pas être refondu d’un coup.
Dans ce cas, chiffrez le coût de maintenance de chaque version sur plusieurs années, prévoyez un test de chaque gabarit à chaque mise à jour et garantissez l’équivalence du contenu. Faites valider ce choix avant de rédiger le cahier des charges, avec l’expérience utilisateur comme critère premier.
Par Thomas Bizot – Président du cabinet Advalians
