Responsive Design — Grundlagen, Anpassung von Oberflächen an Bildschirme

Was ist Responsive Design?

Responsive Design ist eine Methode zum Aufbau von Oberflächen, bei der das Layout auf Bildschirmgröße, Ausrichtung und verfügbaren Platz reagiert und Elemente ohne Funktionsverlust neu anordnet. Der Begriff wurde 2010 von Ethan Marcotte für Webdesign geprägt, aber die Prinzipien sind vollständig auf native mobile Anwendungen anwendbar.

In der mobilen Entwicklung bedeutet Responsive Design, dass dieselbe Anwendung auf allen Geräten korrekt angezeigt wird: vom iPhone SE (375 pt) bis zum iPad Pro (1024 pt im Hochformat) und vom Android-Smartphone (360 dp) bis zum Tablet (800 dp). Die Schlüsselelemente sind flexibles Raster, adaptive Bilder und Media Queries auf Framework-Ebene (Size Classes, Qualifiers).

Laut Apple Developer Documentation sollte die Anwendung universell sein — auf allen Geräten ohne separaten iPad-Build funktionieren. Google Play empfiehlt die Verwendung adaptiver Layouts über Jetpack WindowManager und Canonical Layouts. Fehlende Tablet-Anpassung ist ein häufiger Grund für negative Bewertungen.

Responsive vs Adaptive Design

Die Begriffe Responsive und Adaptive werden oft verwechselt, obwohl sie unterschiedliche Ansätze beschreiben. Responsive Design verwendet ein flexibles Raster, das sich kontinuierlich an die Bildschirmbreite anpasst. Adaptive Design verwendet feste Layouts für vordefinierte Breakpoints — die Anwendung wechselt abrupt zwischen ihnen.

In der Praxis verwenden mobile Apps eine Kombination beider Ansätze. Das Basisraster wird responsiv aufgebaut (Auto Layout mit Constraint-Abhängigkeiten), und beim Erreichen eines Breakpoints (z. B. Breite > 600 pt) wechselt das Layout auf eine adaptive Version mit einer anderen Elementanordnung. iOS kombiniert Auto Layout (responsive) mit Size Classes (adaptive). Android kombiniert ConstraintLayout (responsive) mit Qualifier-Ressourcen (adaptive).

iOS Size Classes: Compact und Regular

Size Classes sind ein iOS-Mechanismus, der den verfügbaren Bildschirmplatz entlang zweier Achsen klassifiziert: horizontal und vertikal. Jede Achse kann Compact (C) oder Regular (R) sein. Die Kombination ergibt vier Layout-Anpassungsoptionen: CR (typisches iPhone Hochformat), RR (iPad Hoch-/Querformat), RC (iPhone Querformat bei Plus/Pro Max), CC (iPad Split View).

// Definition von 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 — Master-Detail anzeigen
        case (.compact, .regular):
            showStackedView() // iPhone Hochformat — gestapeltes Layout
        case (.compact, .compact):
            showCompactView() // iPhone SE Querformat — minimiert
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // Verwendung von UISplitViewController oder HStack
    }

    private func showStackedView() {
        // Vertikaler Stack für iPhone
    }

    private func showCompactView() {
        // Sekundäre Elemente ausblenden, primäre anzeigen
    }
}

Im Interface Builder werden Size Classes über das Bedienfeld „wAny hAny" konfiguriert — der Entwickler wählt eine bestimmte Kombination (wRegular hRegular, wCompact hRegular) und fügt Constraint-Variationen hinzu. SwiftUI verwendet @Environment(\.horizontalSizeClass) und @Environment(\.verticalSizeClass) für reaktive Anpassung — bei Änderung der Ausrichtung oder Fenstergröße zeichnet SwiftUI die Ansicht automatisch neu.

// Size Classes in SwiftUI
import SwiftUI

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

    var body: some View {
        if hSizeClass == .regular {
            // iPad — horizontales Layout mit Seitenleiste
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — vertikaler Vollbild-Stack
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers sind ein Android-Mechanismus zum Laden verschiedener Ressourcen (Layout, Values, Drawables) basierend auf Geräteeigenschaften. Zu den Qualifikatoren gehören Bildschirmgröße (small, normal, large, xlarge), Ausrichtung (port, land), Mindestbreite (sw<N>dp), verfügbare Breite (w<N>dp) und Höhe (h<N>dp).

// Gerätekonfigurationserkennung 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()
        }
    }
}

Ressourcenstruktur für verschiedene Bildschirme: res/layout/activity_main.xml (Telefon), res/layout-sw600dp/activity_main.xml (7-Zoll-Tablet), res/layout-sw720dp/activity_main.xml (10-Zoll-Tablet). Android wählt automatisch das richtige Layout basierend auf smallestWidth — der minimalen Bildschirmbreite in dp unabhängig von der Ausrichtung. Der Qualifier sw<N>dp ist die stabilste Anpassungsmethode.

// Jetpack Compose — WindowSizeClass zur Anpassung
@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 (Bibliothek androidx.window) bietet WindowSizeClass mit drei Breitenkategorien: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). Dies ist eine moderne Alternative zu alten Qualifier-Ordnern. Von Google für die Anpassung an faltbare Geräte und Tablets empfohlen.

Adaptives Raster und Breakpoints

Das adaptive Raster ist die Grundlage des Responsive Design. Anstelle fester Größen verwenden Elemente prozentuale Verhältnisse, flexible Constraints und intrinsische Inhaltsgröße. Breakpoints sind Bildschirmbreitenpunkte, bei denen das Layout zwischen Zuständen wechselt.

Empfohlene Breakpoints von Google Material Design und Apple HIG: 0–599 dp (Telefon, eine Spalte), 600–839 dp (Tablet, zwei Spalten, Navigation Rail), 840+ dp (Tablet, drei Spalten, Navigation Drawer). Die Anzahl der Breakpoints sollte 4 nicht überschreiten — übermäßige Übergangspunkte erschweren Wartung und Tests.

Bewährte Praktiken für adaptives Design

Erfolgreiches Responsive Design erfordert die Einhaltung einer Reihe von Regeln, die von der iOS- und Android-Entwickler-Community im letzten Jahrzehnt entwickelt wurden. Nachfolgend die wichtigsten Empfehlungen basierend auf Apple HIG, Google Material Design und Produktionsprojekterfahrung.

• Beginnen Sie mit dem kleinsten Bildschirm — entwerfen Sie das Layout für iPhone SE (375 pt) oder Android Compact (360 dp), fügen Sie dann Erweiterungen für größere Bildschirme hinzu. Dadurch wird sichergestellt, dass kritische Inhalte überall passen
• Verwenden Sie die intrinsische Inhaltsgröße — UILabel, UIButton, ImageView haben natürliche Größen. Auto Layout und ConstraintLayout nutzen diese für automatische Positionierung ohne zusätzliche Constraints
• Verstecken Sie Inhalte nicht auf kleinen Bildschirmen — ordnen Sie sie stattdessen neu an (reflow). Der Benutzer sollte Zugriff auf dieselbe Funktionalität haben, nur in einer anderen Reihenfolge
• Testen Sie auf allen Size Classes — der iOS-Simulator ermöglicht das Umschalten der Size Classes ohne Neustart. Der Android-Emulator bietet verschiedene Geräteprofile. Testen Sie unbedingt auf Tablets und faltbaren Geräten
• Material 3 Adaptive Layout — Google bietet fertige Canonical Layouts für Liste/Detail, Werkzeugleisten und Navigation. Verwenden Sie diese, anstatt eigene Muster zu erfinden

Das Hauptprinzip des adaptiven Designs: Inhalt definiert Layout, nicht umgekehrt. Wenn ein iPad denselben Kartenstapel wie ein iPhone anzeigt, nur breiter gestreckt — das ist kein Responsive Design. Responsive Design denkt das Layout neu: auf iPhone — vertikales Scrollen, auf iPad — Master-Detail mit Seitenleiste.