Responsive Design — grunder, anpassning av gränssnitt till skärmar

Vad är Responsive Design?

Responsive Design — en metod för att bygga gränssnitt där layouten reagerar på skärmstorlek, orientering och tillgängligt utrymme, och omorganiserar elementens position utan att förlora funktionalitet. Termen föreslogs av Ethan Marcotte 2010 för webbdesign, men principerna är fullt tillämpliga på inbyggda mobilapplikationer.

Inom mobilutveckling innebär responsive design att samma applikation visas korrekt på alla enheter: från iPhone SE (375 pt) till iPad Pro (1024 pt i porträtt) och från Android-smartphone (360 dp) till surfplatta (800 dp). Nyckelelementen är flexibelt rutnät (flexible grid), adaptiva bilder och media queries på ramverksnivå (size classes, qualifiers).

Enligt Apple Developer Documentation bör applikationen vara universell — fungera på alla enheter utan separat kompilering för iPad. Google Play rekommenderar användning av adaptive layouts via Jetpack WindowManager och canonical layouts. Brist på anpassning till surfplattor är en vanlig orsak till negativa recensioner.

Responsive vs Adaptive Design

Termerna responsive och adaptive förväxlas ofta, även om de beskriver olika tillvägagångssätt. Responsive design använder ett flexibelt rutnät som kontinuerligt anpassar sig till skärmbredden. Adaptive design använder fasta layouter för fördefinierade breakpoints — applikationen växlar mellan dem stegvis.

I praktiken använder mobilapplikationer en kombination av båda metoderna. Grundrutnätet byggs responsivt (Auto Layout med constraint-beroenden), och när en breakpoint uppnås (t.ex. bredd > 600 pt) växlar layouten till en adaptiv version med annan elementkomposition. iOS kombinerar Auto Layout (responsive) med Size Classes (adaptive). Android kombinerar ConstraintLayout (responsive) med qualifier-resurser (adaptive).

iOS Size Classes: Compact och Regular

Size Classes — iOS-mekanism som klassificerar tillgängligt skärmutrymme längs två axlar: horisontell och vertikal. Varje axel kan vara Compact (C) eller Regular (R). Kombinationen ger fyra varianter för layoutanpassning: CR (vanlig iPhone porträtt), RR (iPad porträtt/landskap), RC (iPhone landskap på Plus/Pro Max), CC (iPad Split View).

// Definiera Size Classes i 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 — visa master-detail
        case (.compact, .regular):
            showStackedView() // iPhone porträtt — stacklayout
        case (.compact, .compact):
            showCompactView() // iPhone SE landskap — minimerad
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // Vi använder UISplitViewController eller HStack
    }

    private func showStackedView() {
        // Vertikal stack för iPhone
    }

    private func showCompactView() {
        // Dölj sekundära element, visa huvudsakliga
    }
}

I Interface Builder konfigureras Size Classes via panelen „wAny hAny” — utvecklaren väljer en specifik kombination (wRegular hRegular, wCompact hRegular) och lägger till constraint-variationer. SwiftUI använder @Environment(\.horizontalSizeClass) och @Environment(\.verticalSizeClass) för reaktiv anpassning — när orienteringen eller fönsterstorleken ändras ritar SwiftUI automatiskt om vyn.

// Size Classes i SwiftUI
import SwiftUI

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

    var body: some View {
        if hSizeClass == .regular {
            // iPad — horisontell layout med sidopanel
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — vertikal stack på helskärm
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers — Android-mekanism för att ladda olika resurser (layout, values, drawables) beroende på enhetens egenskaper. Kvalificerarna inkluderar skärmstorlek (small, normal, large, xlarge), orientering (port, land), minsta bredd (swdp), tillgänglig bredd (wdp) och höjd (hdp).

// Definiera enhetskonfiguration i 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()
        }
    }
}

Resursstruktur för olika skärmar: res/layout/activity_main.xml (telefon), res/layout-sw600dp/activity_main.xml (surfplatta 7"), res/layout-sw720dp/activity_main.xml (surfplatta 10"). Android väljer automatiskt rätt layout baserat på smallestWidth — skärmens minsta bredd i dp oavsett orientering. Kvalificeraren swdp — den mest stabila anpassningsmetoden.

// Jetpack Compose — WindowSizeClass för anpassning
@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 (biblioteket androidx.window) tillhandahåller WindowSizeClass med tre breddkategorier: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). Detta är ett modernt alternativ till gamla qualifier-mappar. Rekommenderas av Google för anpassning till vikbara enheter och surfplattor.

Adaptivt rutnät och breakpoints

Det adaptiva rutnätet är grunden för responsive design. Istället för fasta storlekar använder element procentuella förhållanden, flexibla begränsningar och intrinsic content size. Breakpoints — skärmbreddspunkter där layouten växlar mellan tillstånd.

Rekommenderade breakpoints enligt Google Material Design och Apple HIG: 0–599 dp (telefon, en kolumn), 600–839 dp (surfplatta, två kolumner, navigation rail), 840+ dp (surfplatta, tre kolumner, navigation drawer). Antalet breakpoints bör inte överstiga 4 — för många övergångspunkter komplicerar underhåll och testning.

Bästa praxis för adaptiv design

Framgångsrik responsive design kräver att man följer en uppsättning regler som utvecklats av iOS- och Android-utvecklargemenskapen under det senaste decenniet. Nedan följer de viktigaste rekommendationerna baserade på Apple HIG, Google Material Design och erfarenhet från produktionsprojekt.

• Börja med den minsta skärmen — designa layouten för iPhone SE (375 pt) eller Android compact (360 dp), lägg sedan till utökningar för större skärmar. Detta garanterar att kritiskt innehåll får plats överallt
• Använd intrinsic content size — UILabel, UIButton, ImageView har naturlig storlek. Auto Layout och ConstraintLayout använder det för automatisk positionering utan onödiga begränsningar
• Dölj inte innehåll på små skärmar — istället för att dölja, omorganisera (reflow). Användaren bör ha tillgång till samma funktionalitet, bara i en annan ordning
• Testa på alla size classes — iOS-simulatorn kan växla Size Classes utan omstart. Android-emulatorn erbjuder olika enhetsprofiler. Testa obligatoriskt på surfplattor och vikbara enheter
• Material 3 Adaptive Layout — Google tillhandahåller färdiga canonical layouts för lista/detaljer, verktygspaneler och navigering. Använd dem istället för att uppfinna egna mönster

Huvudprincipen för adaptiv design: innehållet bestämmer layouten, inte tvärtom. Om iPad visar samma kortstack som iPhone, bara utsträckt på bredden — det är inte responsive design. Responsive design omprövar kompositionen: på iPhone — vertikal rullning, på iPad — master-detail med sidopanel.