Cos'è la versione adattiva della pagina?

Il design reattivo è un approccio nello sviluppo web in cui il layout e il contenuto della pagina si adattano automaticamente alle dimensioni dello schermo del dispositivo dell'utente (desktop, tablet, smartphone).

Principi fondamentali:

• Griglie fluide (Fluid Grids): Uso di percentuali o altre unità relative per definire le dimensioni degli elementi invece di pixel fissi.
• Immagini flessibili (Flexible Images): Ridimensionamento proporzionale delle immagini in modo che non escano dal contenitore.
• Media Queries: Regole CSS che consentono di applicare stili diversi in base alle caratteristiche del dispositivo, come larghezza dello schermo, altezza, orientamento e risoluzione.

Esempio di utilizzo di una media query in CSS:

/* Stili generali per tutti i dispositivi */
body {
    font-size: 16px;
}

/* Stili per schermi fino a 768px di larghezza (ad esempio, tablet e mobile) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Esempio di modifica del layout di navigazione */
        display: flex;
        flex-direction: column;
    }
}

/* Stili per schermi fino a 480px di larghezza (ad esempio, telefoni mobili) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Le immagini occupano tutta la larghezza del contenitore */
        max-width: 100%;
        height: auto;
    }
}

L'obiettivo del design reattivo è garantire l'usabilità del sito su qualsiasi dispositivo senza dover creare versioni separate delle pagine.

I test della versione reattiva includono la verifica:

• della corretta visualizzazione degli elementi a diverse risoluzioni.
• della facilità di navigazione e interazione.
• dell'assenza di scorrimento orizzontale.
• della leggibilità del testo.
• delle prestazioni di caricamento della pagina.