Qu'est-ce que la version adaptative de la page?

Le design adaptatif est une approche du développement web où le design et le contenu de la page s'ajustent automatiquement à la taille de l'écran de l'appareil de l'utilisateur (ordinateur de bureau, tablette, smartphone).

Principes fondamentaux :

Grille fluide (Fluid Grids) : Utilisation de pourcentages ou d'autres unités relatives pour définir la taille des éléments au lieu de pixels fixes.
Images flexibles (Flexible Images) : Redimensionnement proportionnel des images pour qu'elles ne dépassent pas le conteneur.
Requêtes média (Media Queries) : Règles CSS permettant d'appliquer différents styles en fonction des caractéristiques de l'appareil, telles que la largeur de l'écran, la hauteur, l'orientation et la résolution.

Exemple d'utilisation d'une requête média en CSS :

/* Styles généraux pour tous les appareils */
body {
    font-size: 16px;
}

/* Styles pour les écrans jusqu'à 768px de large (par exemple, tablettes et mobiles) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Exemple de modification de la mise en page de la navigation */
        display: flex;
        flex-direction: column;
    }
}

/* Styles pour les écrans jusqu'à 480px de large (par exemple, téléphones mobiles) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Les images occupent toute la largeur du conteneur */
        max-width: 100%;
        height: auto;
    }
}

L'objectif du design adaptatif est d'assurer une utilisation confortable du site sur n'importe quel appareil sans avoir besoin de créer des versions séparées des pages.

Les tests de la version adaptative incluent la vérification :

de l'affichage correct des éléments à différentes résolutions.
de la facilité de navigation et d'interaction.
de l'absence de défilement horizontal.
de la lisibilité du texte.
des performances de chargement de la page.