Materi
Mobile-first berarti layar sempit menjadi titik awal rancangan, bukan versi yang dipangkas belakangan. GOV.UK memulai dari satu kolom di layar kecil; grid USWDS memakai media query min-width sehingga kolom baru muncul ketika layar cukup lebar. Di CSS, aturan dasar ditulis untuk layar sempit, lalu media query min-width menambahkan yang dibutuhkan layar lebar. Kebalikannya, aturan dasar untuk desktop yang dibatalkan dengan max-width, membuat ponsel memuat gaya yang tidak dipakainya.
Di layar sentuh, ukuran target menentukan apakah jari mengenai kontrol yang dimaksud. Setiap panduan memakai satuannya sendiri, jadi angkanya tidak dicampur:
| Sumber | Angka | Catatan |
|---|---|---|
| WCAG 2.2, 2.5.8 (AA) | 24 × 24 CSS px | Batas minimum untuk semua penunjuk; ada pengecualian jarak. Dibahas penuh di kelas Aksesibilitas Web |
| Apple HIG, iOS dan iPadOS | 44 × 44 pt bawaan; 28 × 28 pt minimum | Halaman Buttons: hit region tombol minimal 44x44 pt |
| Android Accessibility Help | 48 × 48 dp, jarak 8 dp atau lebih | 48dp setara sekitar 9 mm secara fisik |
Jarak antartarget sama pentingnya dengan ukurannya. Apple meminta padding yang cukup di antara elemen supaya orang tidak menyentuh kontrol yang salah, sekitar 12 poin di sekitar elemen berbingkai dan sekitar 24 poin untuk elemen tanpa bingkai. Android menyarankan target 48x48dp dengan jarak 8dp atau lebih, dan menyebut atribut minWidth serta minHeight untuk kontrol yang ukurannya mengikuti isi. Di CSS, padanannya min-width dan min-height. Ingat juga catatan MDN dari pelajaran keadaan komponen: hover tidak bisa diandalkan di layar sentuh.
.tombol-ikon-peta { min-width: 44px; min-height: 44px; }
.deret-peta { display: flex; gap: 12px; }
