Mobile-First Bukan Sekadar Mengecilkan Layout Desktop

Layout desktop selesai, lalu kolom dipindah ke bawah, font dikecilkan, dan menu dimasukkan ke hamburger. Secara teknis hasilnya responsif. Namun, bila CTA tenggelam setelah delapan section dan filter hanya nyaman dengan mouse, pengalaman itu belum benar-benar mobile-first.

Mulai dari tugas paling penting

Di layar kecil, hierarki tidak bisa bersembunyi di balik ruang kosong. Tentukan apa yang paling mungkin dicari: nomor kontak, harga, status pesanan, jadwal, produk, atau tombol checkout. Letakkan informasi inti lebih awal, lalu gunakan progressive disclosure untuk detail yang tidak selalu dibutuhkan.

• Gunakan target sentuh yang cukup besar dan beri jarak antarkontrol.

• Pilih tipe keyboard input yang sesuai untuk email, telepon, angka, dan tanggal.

• Jangan mengandalkan hover untuk membuka informasi atau tindakan penting.

• Jaga form singkat, dukung autofill, dan pertahankan input saat validasi gagal.

• Pastikan gambar tidak melebar keluar viewport dan memiliki dimensi untuk mencegah layout shift.

Breakpoint mengikuti konten

Jangan membuat breakpoint berdasarkan daftar merek ponsel. Mulai dari layout sempit, lebarkan viewport, lalu tambahkan breakpoint ketika komposisi mulai kehilangan bentuk. Pendekatan ini lebih tahan terhadap perangkat baru dan membuat CSS mengikuti kebutuhan komponen.

Uji di luar DevTools

Gunakan ponsel nyata, koneksi yang tidak sempurna, mode hemat daya, dan satu tangan. Buka keyboard saat modal tampil. Rotasi layar. Perbesar teks. Coba kembali ke halaman setelah interupsi. Banyak masalah mobile bukan soal lebar piksel, melainkan konteks penggunaan yang tidak rapi.

Mobile-first bukan versi kecil dari desain besar. Ia latihan memilih apa yang harus bekerja lebih dulu.

Dasar teknis responsive design dapat ditinjau di web.dev Responsive Web Design Basics.