Responsive Design — fondamenti, adattamento delle interfacce agli schermi

Cos'è il Responsive Design?

Responsive Design è un metodo di costruzione di interfacce in cui il layout risponde alle dimensioni dello schermo, all'orientamento e allo spazio disponibile, riorganizzando gli elementi senza perdere funzionalità. Il termine è stato coniato da Ethan Marcotte nel 2010 per il web design, ma i principi si applicano pienamente alle applicazioni mobili native.

Nello sviluppo mobile, responsive design significa che la stessa applicazione viene visualizzata correttamente su tutti i dispositivi: da iPhone SE (375 pt) a iPad Pro (1024 pt in ritratto) e da uno smartphone Android (360 dp) a un tablet (800 dp). Gli elementi chiave sono griglia flessibile, immagini adattive e media query a livello di framework (size classes, qualifiers).

Secondo la Documentazione per Sviluppatori Apple, l'applicazione dovrebbe essere universale — funzionante su tutti i dispositivi senza una build separata per iPad. Google Play raccomanda di utilizzare layout adattivi tramite Jetpack WindowManager e canonical layouts. La mancanza di adattamento ai tablet è una causa comune di recensioni negative.

Responsive vs Adaptive Design

I termini responsive e adaptive sono spesso confusi, sebbene descrivano approcci diversi. Il responsive design utilizza una griglia flessibile che si adatta continuamente alla larghezza dello schermo. L'adaptive design utilizza layout fissi per breakpoints predefiniti — l'applicazione passa dall'uno all'altro bruscamente.

In pratica, le applicazioni mobili utilizzano una combinazione di entrambi gli approcci. La griglia di base è costruita in modo responsive (Auto Layout con dipendenze di constraint) e al raggiungimento di un breakpoint (ad esempio, larghezza > 600 pt), il layout passa a una versione adattiva con una diversa disposizione degli elementi. iOS combina Auto Layout (responsive) con Size Classes (adaptive). Android combina ConstraintLayout (responsive) con risorse qualifier (adaptive).

iOS Size Classes: Compact e Regular

Size Classes è un meccanismo iOS che classifica lo spazio disponibile sullo schermo lungo due assi: orizzontale e verticale. Ogni asse può essere Compact (C) o Regular (R). La combinazione offre quattro opzioni di adattamento del layout: CR (tipico iPhone in ritratto), RR (iPad ritratto/paesaggio), RC (iPhone paesaggio su Plus/Pro Max), CC (iPad Split View).

// Definizione di Size Classes in Swift
import UIKit

class AdaptiveViewController: UIViewController {

    override func traitCollectionDidChange(
        _ previousTraitCollection: UITraitCollection?
    ) {
        super.traitCollectionDidChange(previousTraitCollection)
        adjustLayout(for: traitCollection)
    }

    private func adjustLayout(for traits: UITraitCollection) {
        switch (traits.horizontalSizeClass, traits.verticalSizeClass) {
        case (.regular, .regular):
            showSplitView() // iPad — mostrare master-detail
        case (.compact, .regular):
            showStackedView() // iPhone ritratto — layout impilato
        case (.compact, .compact):
            showCompactView() // iPhone SE paesaggio — minimizzato
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // Utilizzo di UISplitViewController o HStack
    }

    private func showStackedView() {
        // Stack verticale per iPhone
    }

    private func showCompactView() {
        // Nascondere elementi secondari, mostrare i principali
    }
}

In Interface Builder, le Size Classes vengono configurate tramite il pannello "wAny hAny" — lo sviluppatore seleziona una combinazione specifica (wRegular hRegular, wCompact hRegular) e aggiunge variazioni di constraint. SwiftUI utilizza @Environment(\.horizontalSizeClass) e @Environment(\.verticalSizeClass) per l'adattamento reattivo — quando l'orientamento o la dimensione della finestra cambia, SwiftUI ridisegna automaticamente la vista.

// Size Classes in SwiftUI
import SwiftUI

struct ResponsiveView: View {
    @Environment(\.horizontalSizeClass) private var hSizeClass

    var body: some View {
        if hSizeClass == .regular {
            // iPad — layout orizzontale con pannello laterale
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — stack verticale a schermo intero
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers è un meccanismo Android per caricare diverse risorse (layout, values, drawables) in base alle caratteristiche del dispositivo. I qualificatori includono dimensione dello schermo (small, normal, large, xlarge), orientamento (port, land), larghezza minima (sw<N>dp), larghezza disponibile (w<N>dp) e altezza (h<N>dp).

// Rilevamento configurazione dispositivo in Kotlin
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val config = resources.configuration
        val screenWidthDp = config.screenWidthDp
        val screenHeightDp = config.screenHeightDp
        val orientation = config.orientation

        when {
            screenWidthDp >= 900 -> setContentView(R.layout.activity_main_tablet)
            screenWidthDp >= 600 -> setContentView(R.layout.activity_main_sw600)
            else -> setContentView(R.layout.activity_main_phone)
        }
    }

    override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)
        if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
            supportFragmentManager.beginTransaction()
                .replace(R.id.container, LandscapeFragment())
                .commit()
        }
    }
}

Struttura delle risorse per diversi schermi: res/layout/activity_main.xml (telefono), res/layout-sw600dp/activity_main.xml (tablet 7"), res/layout-sw720dp/activity_main.xml (tablet 10"). Android seleziona automaticamente il layout corretto in base a smallestWidth — la larghezza minima dello schermo in dp indipendentemente dall'orientamento. Il qualificatore sw<N>dp è il metodo di adattamento più stabile.

// Jetpack Compose — WindowSizeClass per l'adattamento
@Composable
fun ResponsiveScreen() {
    val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

    when {
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.EXPANDED -> {
            TabletLayout() // >= 840 dp
        }
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.MEDIUM -> {
            MediumLayout() // 600–840 dp
        }
        else -> {
            CompactLayout() // < 600 dp
        }
    }
}

Jetpack WindowManager (libreria androidx.window) fornisce WindowSizeClass con tre categorie di larghezza: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). Questa è un'alternativa moderna alle vecchie cartelle qualifier. È raccomandato da Google per l'adattamento a dispositivi pieghevoli e tablet.

Griglia adattiva e breakpoints

La griglia adattiva è il fondamento del responsive design. Invece di dimensioni fisse, gli elementi utilizzano proporzioni percentuali, constraint flessibili e dimensione intrinseca del contenuto. Breakpoints sono punti di larghezza dello schermo in cui il layout passa da uno stato all'altro.

Breakpoints raccomandati da Google Material Design e Apple HIG: 0–599 dp (telefono, una colonna), 600–839 dp (tablet, due colonne, navigation rail), 840+ dp (tablet, tre colonne, navigation drawer). Il numero di breakpoints non deve superare 4 — punti di transizione eccessivi complicano la manutenzione e i test.

Migliori pratiche di design adattivo

Un responsive design di successo richiede di seguire una serie di regole sviluppate dalla community di sviluppatori iOS e Android nell'ultimo decennio. Di seguito le raccomandazioni principali basate su Apple HIG, Google Material Design e l'esperienza di progetti in produzione.

• Inizia dallo schermo più piccolo — progetta il layout per iPhone SE (375 pt) o Android compact (360 dp), poi aggiungi estensioni per schermi più grandi. Questo garantisce che il contenuto critico si adatti ovunque
• Usa la dimensione intrinseca del contenuto — UILabel, UIButton, ImageView hanno dimensioni naturali. Auto Layout e ConstraintLayout le usano per il posizionamento automatico senza constraint aggiuntivi
• Non nascondere il contenuto sugli schermi piccoli — invece di nascondere, riorganizza (reflow). L'utente deve avere accesso alle stesse funzionalità, solo in un ordine diverso
• Testa su tutte le Size Classes — il simulatore iOS consente di cambiare Size Classes senza riavviare. L'emulatore Android fornisce diversi profili di dispositivi. Assicurati di testare su tablet e dispositivi pieghevoli
• Material 3 Adaptive Layout — Google fornisce canonical layouts pronti per elenco/dettaglio, barre degli strumenti e navigazione. Usali invece di inventare i tuoi schemi

Il principio principale del design adattivo: il contenuto definisce il layout, non il contrario. Se un iPad mostra la stessa pila di carte di un iPhone, solo allungata — non è responsive design. Il responsive design ripensa la disposizione: su iPhone — scorrimento verticale, su iPad — master-detail con pannello laterale.