Responsive Design — dasar-dasar, adaptasi antarmuka ke layar

Apa itu Responsive Design?

Responsive Design — metode pembangunan antarmuka di mana tata letak bereaksi terhadap ukuran layar, orientasi, dan ruang yang tersedia, menata ulang posisi elemen tanpa kehilangan fungsionalitas. Istilah ini diusulkan oleh Ethan Marcotte pada tahun 2010 untuk desain web, tetapi prinsip-prinsipnya sepenuhnya berlaku untuk aplikasi mobile native.

Dalam pengembangan mobile, responsive design berarti aplikasi yang sama ditampilkan dengan benar di semua perangkat: dari iPhone SE (375 pt) hingga iPad Pro (1024 pt dalam potret) dan dari smartphone Android (360 dp) hingga tablet (800 dp). Elemen kuncinya adalah grid fleksibel (flexible grid), gambar adaptif, dan media queries di tingkat framework (size classes, qualifiers).

Menurut Apple Developer Documentation, aplikasi harus bersifat universal — berfungsi di semua perangkat tanpa kompilasi terpisah untuk iPad. Google Play merekomendasikan penggunaan adaptive layouts melalui Jetpack WindowManager dan canonical layouts. Kurangnya adaptasi ke tablet adalah penyebab umum ulasan negatif.

Responsive vs Adaptive Design

Istilah responsive dan adaptive sering tertukar, meskipun keduanya menggambarkan pendekatan yang berbeda. Responsive design menggunakan grid fleksibel yang terus menyesuaikan dengan lebar layar. Adaptive design menggunakan tata letak tetap untuk breakpoints yang telah ditentukan — aplikasi beralih di antaranya secara tiba-tiba.

Dalam praktiknya, aplikasi mobile menggunakan kombinasi kedua pendekatan. Grid dasar dibangun secara responsive (Auto Layout dengan dependensi constraint), dan saat mencapai breakpoint (misalnya lebar > 600 pt) tata letak beralih ke versi adaptif dengan komposisi elemen yang berbeda. iOS menggabungkan Auto Layout (responsive) dengan Size Classes (adaptive). Android menggabungkan ConstraintLayout (responsive) dengan sumber daya qualifier (adaptive).

iOS Size Classes: Compact dan Regular

Size Classes — mekanisme iOS yang mengklasifikasikan ruang layar yang tersedia pada dua sumbu: horizontal dan vertikal. Setiap sumbu bisa Compact (C) atau Regular (R). Kombinasinya memberikan empat varian untuk adaptasi tata letak: CR (iPhone potret biasa), RR (iPad potret/lanskap), RC (iPhone lanskap di Plus/Pro Max), CC (iPad Split View).

// Mendefinisikan Size Classes di 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 — tampilkan master-detail
        case (.compact, .regular):
            showStackedView() // iPhone potret — tata letak tumpukan
        case (.compact, .compact):
            showCompactView() // iPhone SE lanskap — diminimalkan
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // Kami menggunakan UISplitViewController atau HStack
    }

    private func showStackedView() {
        // Tumpukan vertikal untuk iPhone
    }

    private func showCompactView() {
        // Sembunyikan elemen sekunder, tampilkan yang utama
    }
}

Di Interface Builder, Size Classes dikonfigurasi melalui panel “wAny hAny” — pengembang memilih kombinasi tertentu (wRegular hRegular, wCompact hRegular) dan menambahkan variasi constraint. SwiftUI menggunakan @Environment(\.horizontalSizeClass) dan @Environment(\.verticalSizeClass) untuk adaptasi reaktif — saat orientasi atau ukuran jendela berubah, SwiftUI secara otomatis menggambar ulang view.

// Size Classes di SwiftUI
import SwiftUI

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

    var body: some View {
        if hSizeClass == .regular {
            // iPad — tata letak horizontal dengan panel samping
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — tumpukan vertikal layar penuh
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers — mekanisme Android untuk memuat berbagai sumber daya (layout, values, drawables) tergantung pada karakteristik perangkat. Kualifikasi mencakup ukuran layar (small, normal, large, xlarge), orientasi (port, land), lebar minimum (swdp), lebar tersedia (wdp), dan tinggi (hdp).

// Mendefinisikan konfigurasi perangkat di 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()
        }
    }
}

Struktur sumber daya untuk layar berbeda: res/layout/activity_main.xml (ponsel), res/layout-sw600dp/activity_main.xml (tablet 7"), res/layout-sw720dp/activity_main.xml (tablet 10"). Android secara otomatis memilih tata letak yang benar berdasarkan smallestWidth — lebar minimum layar dalam dp terlepas dari orientasi. Kualifikasi swdp — metode adaptasi paling stabil.

// Jetpack Compose — WindowSizeClass untuk adaptasi
@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 (pustaka androidx.window) menyediakan WindowSizeClass dengan tiga kategori lebar: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). Ini adalah alternatif modern untuk folder kualifikasi lama. Direkomendasikan oleh Google untuk adaptasi ke perangkat lipat dan tablet.

Grid adaptif dan breakpoints

Grid adaptif adalah dasar dari responsive design. Alih-alih ukuran tetap, elemen menggunakan rasio persentase, batasan fleksibel, dan intrinsic content size. Breakpoints — titik lebar layar di mana tata letak beralih antar status.

Breakpoints yang direkomendasikan oleh Google Material Design dan Apple HIG: 0–599 dp (ponsel, satu kolom), 600–839 dp (tablet, dua kolom, navigation rail), 840+ dp (tablet, tiga kolom, navigation drawer). Jumlah breakpoints tidak boleh melebihi 4 — terlalu banyak titik transisi mempersulit pemeliharaan dan pengujian.

Praktik terbaik desain adaptif

Responsive design yang sukses memerlukan kepatuhan terhadap seperangkat aturan yang dikembangkan oleh komunitas pengembang iOS dan Android selama dekade terakhir. Di bawah ini adalah rekomendasi utama berdasarkan Apple HIG, Google Material Design, dan pengalaman proyek produksi.

• Mulai dari layar terkecil — desain tata letak untuk iPhone SE (375 pt) atau Android compact (360 dp), lalu tambahkan ekstensi untuk layar yang lebih besar. Ini memastikan konten kritis muat di mana saja
• Gunakan intrinsic content size — UILabel, UIButton, ImageView memiliki ukuran alami. Auto Layout dan ConstraintLayout menggunakannya untuk penempatan otomatis tanpa batasan yang tidak perlu
• Jangan sembunyikan konten di layar kecil — alih-alih menyembunyikan, tata ulang (reflow). Pengguna harus memiliki akses ke fungsionalitas yang sama, hanya dalam urutan yang berbeda
• Uji pada semua size classes — simulator iOS memungkinkan perubahan Size Classes tanpa restart. Emulator Android menyediakan profil perangkat yang berbeda. Wajib uji pada tablet dan perangkat lipat
• Material 3 Adaptive Layout — Google menyediakan canonical layouts siap pakai untuk daftar/detail, panel alat, dan navigasi. Gunakan ini daripada menemukan pola sendiri

Prinsip utama desain adaptif: konten menentukan tata letak, bukan sebaliknya. Jika di iPad menampilkan tumpukan kartu yang sama seperti di iPhone, hanya diregangkan lebarnya — itu bukan responsive design. Responsive design memikirkan ulang komposisi: di iPhone — scroll vertikal, di iPad — master-detail dengan panel samping.