Rendre la page utilisable sur plusieurs largeurs

Une page peut sembler équilibrée sur un ordinateur et devenir difficile à lire sur un téléphone : les cartes se resserrent, les liens s’entassent et les zones perdent leur ordre visuel. Vous allez parcourir la page de l’atelier à plusieurs largeurs, puis ajouter uniquement les adaptations nécessaires pour conserver une lecture claire.

Partir du contenu et tester les changements

Construisez d’abord la version étroite, puis élargissez la fenêtre : cette approche mobile-first évite de traiter le téléphone comme une version réduite de l’ordinateur. Sur une petite largeur, les informations doivent rester dans un ordre compréhensible, les cartes doivent tenir dans l’écran et les liens doivent rester faciles à atteindre. À mesure que l’espace augmente, vous pouvez rétablir des colonnes lorsque le contenu les supporte.

Ne choisissez pas un point de rupture uniquement parce qu’un appareil courant possède cette largeur. Faites glisser la fenêtre et observez quand une ligne de navigation devient trop serrée, quand les cartes perdent une largeur confortable ou quand les zones de la page ne se lisent plus naturellement. Placez la media query à cette largeur : le point de rupture répond ainsi à un problème visible du contenu.

Appliquer des adaptations ciblées

Le fichier ci-dessous montre une adaptation complète pour la page de l’atelier. La mise en page étroite est la base : la navigation se place en colonne, les cartes en une colonne et les zones principales suivent un ordre vertical. À partir de 760 pixels, largeur à ajuster selon vos essais, la navigation repasse en ligne et les conseils occupent deux colonnes.

:root {
    --couleur-texte: #24332b;
    --couleur-fond: #f4f7f0;
    --couleur-accent: #356b45;
    --espace: 1rem;
    --largeur-max: 68rem;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--couleur-texte);
    background: var(--couleur-fond);
    font-family: sans-serif;
    line-height: 1.5;
}

.site-header,
main {
    width: min(100% - 2 * var(--espace), var(--largeur-max));
    margin-inline: auto;
}

.site-header {
    padding-block: var(--espace);
}

.navigation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.navigation a {
    color: var(--couleur-accent);
}

.page-grid {
    display: grid;
    grid-template-areas:
        "intro"
        "horaires"
        "conseils"
        "contact";
    gap: var(--espace);
    padding-block: var(--espace) 2rem;
}

.introduction {
    grid-area: intro;
}

.horaires {
    grid-area: horaires;
}

.conseils {
    grid-area: conseils;
}

.contact {
    grid-area: contact;
}

.conseils-liste {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espace);
}

.carte,
.horaires,
.contact {
    padding: var(--espace);
    background: #fff;
    border-radius: 0.5rem;
}

@media (min-width: 760px) {
    .navigation {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .page-grid {
        grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
        grid-template-areas:
            "intro intro"
            "conseils horaires"
            "conseils contact";
    }

    .conseils-liste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

Sur ordinateur, la zone d’introduction occupe toute la largeur, tandis que les conseils se placent à côté des horaires et du contact. Les cartes de conseils forment deux colonnes. Sur mobile, les mêmes éléments reviennent à une seule colonne sans dupliquer leur contenu HTML : seules les règles de disposition changent.

Suivre un parcours de test responsive

Ouvrez les outils de développement du navigateur et activez le mode appareil pour régler précisément la largeur du viewport. Testez d’abord une largeur étroite, puis une largeur proche du point de rupture, puis une largeur d’ordinateur. Faites varier la largeur par petits pas autour de 760 pixels : vous repérerez si la transition produit une zone intermédiaire inconfortable et pourrez déplacer le seuil en conséquence.

• Sur mobile, vérifiez que l’introduction, les horaires, les conseils et le contact restent dans un ordre de lecture logique.
• Sur une largeur intermédiaire, observez si les intitulés de navigation et le texte des cartes disposent encore d’assez d’espace.
• Sur ordinateur, vérifiez que les colonnes sont équilibrées et que le contenu ne s’étire pas excessivement.
• À chaque largeur, faites défiler la page et utilisez les liens de navigation pour vérifier que les zones restent faciles à repérer.

À retenir

• Commencez par une disposition étroite, puis ajoutez les colonnes lorsque le contenu les supporte.
• Choisissez les points de rupture en observant les besoins réels de la navigation et des cartes.
• Adaptez les zones de grille et la direction de Flexbox sans dupliquer le contenu HTML.
• Testez la page sur plusieurs largeurs, notamment autour de chaque point de rupture.

Dans la prochaine leçon, vous corrigerez les derniers défauts et validerez le résultat final de la page.