Belajar CSS - Mobile-First Design dan Adaptasi Device
Episode ini membahas mobile-first design dan adaptasi device: prinsip mendesain untuk layar kecil terlebih dahulu, peran viewport meta tag, ukuran target sentuh yang ergonomis, serta penanganan safe area pada perangkat dengan notch.
#Pendahuluan
Episode 9 memperkenalkan media query, dan episode 12 memperdalam filosofi di baliknya: mobile-first. Alih-alih menyusutkan desain desktop ke layar kecil, kalian mulai dari ponsel lalu memperkaya tampilan untuk layar yang lebih besar. Layar kecil memaksa prioritas. Hanya konten dan interaksi terpenting yang muat, sehingga mobile-first menghasilkan desain yang fokus. Yang mengejutkan, pendekatan ini justru membuat kode lebih sederhana karena aturan dasar ditulis tanpa media query. Mengapa penting? Ponsel bukan lagi masa depan, melainkan perangkat utama. Mendesain mobile-first memastikan mayoritas pengguna mendapat pengalaman terbaik, bukan versi terkucil dari desain desktop.
#Prinsip Mobile-First
Mobile-first berarti struktur CSS dasar mewakili pengalaman ponsel, dan media query min-width menambahkan pengayaan bertahap:
.konten {
padding: 16px;
font-size: 1rem;
}
@media (min-width: 768px) {
.konten {
padding: 32px;
font-size: 1.125rem;
}
}Konten utama, teks yang nyaman dibaca, dan navigasi yang penting diletakkan tanpa media query. Ukuran yang lebih lega dan detail dekoratif baru muncul pada breakpoint yang lebih besar.
#Viewport Meta Tag
Tanpa meta viewport, ponsel merender halaman desktop dengan zoom otomatis — musuh utama mobile-first:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
<title>Halaman Mobile-First</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="topbar">DevNull</header>
<main>
<p>Konten utama yang dimulai dari pengalaman ponsel.</p>
</main>
</body>
</html>width=device-width menyetel lebar viewport mengikuti layar perangkat, dan initial-scale=1 memastikan tidak ada zoom awal. Jangan menonaktifkan zoom — aksesibilitas membutuhkan kemampuan memperbesar.
#Target Sentuh yang Ergonomis
Jari lebih besar daripada kursor. Pedoman aksesibilitas merekomendasikan target sentuh minimal 44x44 piksel:
.nav-item { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 12px; border-radius: 8px; }
.tombol-aksi { min-height: 48px; font-size: 1rem; }
.ikona { width: 24px; height: 24px; }Jarak antar target juga penting — sisakan margin atau gap agar jari tidak menekan tombol yang salah. Ikon kecil di dalam tombol bisa tetap ramping selama area sentuhnya cukup besar.
#Safe Area pada Perangkat Modern
Ponsel dengan notch dan layar melengkung menutupi sebagian pinggir layar. CSS modern menyediakan env untuk safe area:
.topbar {
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fab {
bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav {
padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}env(safe-area-inset-top) dan env(safe-area-inset-bottom) mengembalikan jarak aman yang dilaporkan perangkat. Nilai fallback di argumen kedua menjaga perilaku normal di perangkat tanpa notch. Gabungkan dengan calc() atau max() agar konten tidak tenggelam di balik indikator sistem.
#Menguji di Perangkat Nyata
DevTools bukan satu-satunya alat uji. Ada beberapa lapisan yang harus dicek:
npx serve . -l 3000Jalankan server, lalu buka halaman dari ponsel melalui IP lokal di jaringan yang sama. Setelah itu buka DevTools, pilih mode responsif, dan geser dari 320px hingga 1280px sambil memperhatikan teks, target sentuh, dan gambar.
:root {
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
.surface {
background-color: #0f172a;
color: white;
}
}Uji juga mode terang dan gelap serta orientasi potret dan lanskap. Media query prefers-color-scheme membuat tema mengikuti pengaturan sistem, bagian dari adaptasi device yang makin diharapkan pengguna.
#Latihan: Halaman Mobile-First
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top, 0px)); background-color: #0f172a; color: white; }
.list { display: grid; gap: 12px; padding: 16px; list-style: none; margin: 0; }
.item { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 8px; background-color: #2563eb; color: white; }
@media (min-width: 600px) { .list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .list { grid-template-columns: repeat(4, 1fr); } }<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mobile First</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="topbar">
<span>DevNull</span>
</header>
<ul class="list">
<li class="item">Satu</li>
<li class="item">Dua</li>
<li class="item">Tiga</li>
<li class="item">Empat</li>
</ul>
</body>
</html>Jalankan npx serve . dan buka halaman di mode responsif. Perhatikan bagaimana aturan dasar sudah nyaman di ponsel, lalu kolom bertambah saat viewport melebar tanpa mengubah HTML.
#Kesalahan Umum dan Solusinya
#Zoom Otomatis pada Input
Bila input memicu zoom saat difokus, cek ukuran font input minimal 16px. Browser seluler men-zoom bila font di bawah 16px untuk menjaga keterbacaan.
#Safe Area Diabaikan
Tombol dan menu yang menempel di tepi bawah bisa tertutup indikator home pada iPhone. Gunakan env(safe-area-inset-bottom) pada elemen yang menyentuh tepi.
#Target Sentuh Terlalu Kecil
Tombol kecil yang nyaman di klik mouse menyulitkan jari. Pastikan area interaktif minimal 44x44 piksel dan beri jarak antar elemen.
#Penutup
Inti yang harus dibawa pulang:
- Mobile-first menulis style dasar untuk ponsel lalu memperkaya dengan
min-width. - Meta viewport adalah prasyarat agar responsif berfungsi di perangkat seluler.
- Target sentuh minimal 44x44 piksel dengan jarak yang cukup.
env(safe-area-inset-*)menjaga konten dari notch dan indikator sistem.- Uji di perangkat nyata, bukan hanya DevTools.
- Hormati
prefers-color-schemeuntuk pengalaman yang konsisten dengan sistem. Di episode 13 selanjutnya kita akan membahas pseudo-class dan pseudo-element — gaya untuk state interaksi serta elemen dekoratif::beforedan::after.