Responsive Design — basis, aanpassing van interfaces aan schermen

Wat is Responsive Design?

Responsive Design – een methode voor het bouwen van interfaces waarbij de lay-out reageert op de schermgrootte, oriëntatie en beschikbare ruimte door elementen te herschikken zonder functionaliteitsverlies. De term werd in 2010 door Ethan Marcotte voorgesteld voor webdesign, maar de principes zijn volledig van toepassing op native mobiele applicaties.

In mobiele ontwikkeling betekent responsive design dat dezelfde applicatie correct wordt weergegeven op alle apparaten: van iPhone SE (375 pt) tot iPad Pro (1024 pt in portret) en van Android-smartphone (360 dp) tot tablet (800 dp). De belangrijkste elementen zijn flexibel raster (flexible grid), adaptieve afbeeldingen en media queries op framework-niveau (size classes, qualifiers).

Volgens Apple Developer Documentation moet de applicatie universeel zijn – werkend op alle apparaten zonder aparte compilatie voor iPad. Google Play beveelt het gebruik van adaptive layouts via Jetpack WindowManager en canonical layouts aan. Gebrek aan aanpassing aan tablets is een veelvoorkomende oorzaak van negatieve beoordelingen.

Responsive vs Adaptive Design

De termen responsive en adaptive worden vaak verward, hoewel ze verschillende benaderingen beschrijven. Responsive design gebruikt een flexibel raster dat continu aanpast aan de schermbreedte. Adaptive design gebruikt vaste lay-outs voor vooraf gedefinieerde breakpoints – de applicatie schakelt schoksgewijs tussen deze lay-outs.

In de praktijk gebruiken mobiele applicaties een combinatie van beide benaderingen. Het basisraster wordt responsive gebouwd (Auto Layout met constraint-afhankelijkheden), en bij het bereiken van een breakpoint (bijv. breedte > 600 pt) schakelt de lay-out over naar een adaptieve versie met een andere compositie. iOS combineert Auto Layout (responsive) met Size Classes (adaptive). Android combineert ConstraintLayout (responsive) met qualifier-bronnen (adaptive).

iOS Size Classes: Compact en Regular

Size Classes – iOS-mechanisme dat de beschikbare schermruimte classificeert op twee assen: horizontaal en verticaal. Elke as kan Compact (C) of Regular (R) zijn. De combinatie geeft vier varianten voor lay-outaanpassing: CR (normale iPhone portret), RR (iPad portret/landschap), RC (iPhone landschap op Plus/Pro Max), CC (iPad Split View).

// Size Classes definiëren 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 — master-detail tonen
        case (.compact, .regular):
            showStackedView() // iPhone portret — stack lay-out
        case (.compact, .compact):
            showCompactView() // iPhone SE landschap — geminimaliseerd
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // We gebruiken UISplitViewController of HStack
    }

    private func showStackedView() {
        // Verticale stack voor iPhone
    }

    private func showCompactView() {
        // Verberg secundaire elementen, toon hoofd elementen
    }
}

In Interface Builder worden Size Classes geconfigureerd via het paneel „wAny hAny” – de ontwikkelaar selecteert een specifieke combinatie (wRegular hRegular, wCompact hRegular) en voegt constraint-variaties toe. SwiftUI gebruikt @Environment(\.horizontalSizeClass) en @Environment(\.verticalSizeClass) voor reactieve aanpassing – bij verandering van oriëntatie of venstergrootte hertekent SwiftUI automatisch de view.

// Size Classes in SwiftUI
import SwiftUI

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

    var body: some View {
        if hSizeClass == .regular {
            // iPad — horizontale lay-out met zijpaneel
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — verticale stack op volledig scherm
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers – Android-mechanisme voor het laden van verschillende bronnen (layout, values, drawables) afhankelijk van de apparaatkenmerken. De kwalificatoren omvatten schermgrootte (small, normal, large, xlarge), oriëntatie (port, land), minimale breedte (swdp), beschikbare breedte (wdp) en hoogte (hdp).

// Apparaatconfiguratie definiëren 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()
        }
    }
}

Bronstructuur voor verschillende schermen: res/layout/activity_main.xml (telefoon), res/layout-sw600dp/activity_main.xml (tablet 7"), res/layout-sw720dp/activity_main.xml (tablet 10"). Android selecteert automatisch de juiste lay-out op basis van smallestWidth – de minimale schermbreedte in dp ongeacht oriëntatie. De swdp kwalificator – de meest stabiele aanpassingsmethode.

// Jetpack Compose — WindowSizeClass voor aanpassing
@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 (bibliotheek androidx.window) biedt WindowSizeClass met drie breedtecategorieën: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). Dit is een modern alternatief voor oude qualifier-mappen. Aanbevolen door Google voor aanpassing aan opvouwbare apparaten en tablets.

Adaptief raster en breakpoints

Het adaptieve raster is de basis van responsive design. In plaats van vaste afmetingen gebruiken elementen procentuele verhoudingen, flexibele beperkingen en intrinsic content size. Breakpoints – schermbreedtepunten waarbij de lay-out tussen statussen schakelt.

Aanbevolen breakpoints volgens Google Material Design en Apple HIG: 0–599 dp (telefoon, één kolom), 600–839 dp (tablet, twee kolommen, navigation rail), 840+ dp (tablet, drie kolommen, navigation drawer). Het aantal breakpoints mag niet meer dan 4 bedragen – te veel overgangspunten compliceren onderhoud en testen.

Beste praktijken voor adaptief ontwerp

Succesvol responsive design vereist het naleven van een reeks regels die de afgelopen tien jaar door de iOS- en Android-ontwikkelaarsgemeenschap zijn ontwikkeld. Hieronder staan de belangrijkste aanbevelingen op basis van Apple HIG, Google Material Design en ervaring met productieprojecten.

• Begin met het kleinste scherm – ontwerp de lay-out voor iPhone SE (375 pt) of Android compact (360 dp) en voeg vervolgens uitbreidingen voor grotere schermen toe. Dit garandeert dat kritieke inhoud overal past
• Gebruik intrinsic content size – UILabel, UIButton, ImageView hebben een natuurlijke grootte. Auto Layout en ConstraintLayout gebruiken dit voor automatische positionering zonder onnodige beperkingen
• Verberg geen inhoud op kleine schermen – in plaats van verbergen, herschik (reflow). De gebruiker moet toegang hebben tot dezelfde functionaliteit, alleen in een andere volgorde
• Test op alle size classes – de iOS-simulator kan Size Classes wijzigen zonder herstart. De Android Emulator biedt verschillende apparaatprofielen. Test verplicht op tablets en opvouwbare apparaten
• Material 3 Adaptive Layout – Google biedt kant-en-klare canonical layouts voor lijst/details, gereedschapspanelen en navigatie. Gebruik deze in plaats van het uitvinden van eigen patronen

Het belangrijkste principe van adaptief ontwerp: inhoud bepaalt de lay-out, niet andersom. Als op iPad dezelfde stapel kaarten wordt weergegeven als op iPhone, maar gewoon uitgerekt in de breedte – dan is dat geen responsive design. Responsive design heroverweegt de compositie: op iPhone – verticaal scrollen, op iPad – master-detail met zijpaneel.