Le responsive design consiste à créer une page capable de rester lisible et pratique sur plusieurs tailles d'écran. L'idée n'est pas de faire plusieurs sites différents, mais un seul site qui s'adapte intelligemment à l'espace disponible.
Quand on débute, on code souvent sur un ordinateur avec une grande fenêtre de navigateur. Pourtant, vos visiteurs ne verront pas tous votre site dans les mêmes conditions. Certains auront un écran large, d'autres un petit ordinateur portable, une tablette ou un smartphone.
Le but de ce cours est donc de poser des bases simples. Nous allons d'abord voir que la taille disponible change d'un écran à l'autre, puis que l'affichage peut aussi varier selon l'appareil utilisé, et enfin pourquoi cette adaptation est importante.
Votre site internet n'aura pas la même taille sur tous les écrans
Une page web n'est pas affichée dans un cadre fixe. La largeur visible dépend de la fenêtre du navigateur ou de l'écran de l'appareil. Une mise en page qui semble parfaite sur un grand écran peut vite devenir trop serrée sur un écran plus petit.
Voilà pourquoi on évite souvent de tout dimensionner avec des largeurs rigides. En responsive design, on préfère généralement des valeurs plus souples, comme des pourcentages, et des limites raisonnables avec max-width.
<main class="conteneur">
<h2>Mon article</h2>
<p>
Mon contenu prend de la place,
mais sans toucher les bords.
</p>
</main>
.conteneur{
width: 90%;
max-width: 900px;
margin: 0 auto;
}
Avec ce CSS, le bloc peut occuper 90% de la largeur disponible sur un petit écran, tout en s'arrêtant à 900px maximum sur un grand écran. Le contenu reste donc plus confortable à lire.
Bloc souple
Ce bloc se réduit si l'espace diminue, mais il garde aussi une limite pour ne pas devenir trop large.
Un bloc souple occupe l'espace disponible sans devenir illisible.
Si vous voulez revoir plus précisément les notions de largeur, hauteur et taille maximale, vous pouvez lire le cours Dimensions et dimensions maximales.
Votre site internet s'affichera différemment selon les devices
La taille de l'écran n'est pas le seul point à prendre en compte. Un smartphone se tient en main et se manipule avec le doigt. Un ordinateur de bureau s'utilise avec une souris ou un pavé tactile. Une tablette peut être utilisée en mode portrait ou paysage.
Concrètement, cela veut dire qu'un même contenu ne sera pas forcément disposé de la même façon partout. Sur un grand écran, deux colonnes côte à côte peuvent très bien fonctionner. Sur un mobile, ces mêmes colonnes devront souvent passer l'une sous l'autre.
<section class="colonnes">
<article>Colonne 1</article>
<article>Colonne 2</article>
</section>
.colonnes{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
Sur un écran large, ce genre de mise en page est souvent agréable. Mais sur un écran étroit, chaque colonne risque de devenir trop petite. En responsive design, on prévoit donc des ajustements pour que la lecture reste simple et naturelle.
Deux colonnes peuvent être pratiques sur grand écran, mais trop étroites sur mobile.
Attention ! Responsive design ne veut pas dire "version mobile complètement différente". L'objectif est surtout de faire évoluer la présentation sans casser le contenu ni obliger l'utilisateur à zoomer en permanence.
Pourquoi il est important d'adapter son site en fonction du device ?
La première raison, c'est le confort de lecture. Si le texte est trop petit, si les éléments débordent ou si les boutons sont difficiles à toucher, l'utilisateur se fatigue vite et quitte souvent la page.
La deuxième raison, c'est l'usage réel du web. Aujourd'hui, une grande partie de la navigation se fait sur mobile. Un site qui ne s'adapte pas donne immédiatement une impression de négligence, même si son contenu est bon.
Enfin, un site responsive est aussi plus simple à maintenir. Vous gardez une seule base HTML et CSS, puis vous ajustez la présentation selon le contexte. C'est plus propre que de fabriquer plusieurs versions séparées du même site.
- Un site responsive est plus facile à lire.
- Il est plus simple à utiliser sur mobile, tablette et ordinateur.
- Il donne une impression plus sérieuse et plus moderne.
- Il évite de maintenir plusieurs sites différents.
Dans les prochains cours, nous verrons justement comment adapter une mise en page, notamment avec les points de rupture et les images responsives. Pour l'instant, retenez surtout cette idée : un site web doit s'adapter à l'espace disponible et au contexte d'utilisation.