Responsive design tidak selesai ketika halaman “muat” di layar kecil. Pengguna mobile dapat membuka browser dengan mode normal, rotasi layar, zoom, atau bahkan memilih “Situs desktop”. Kombinasi ini membuat pengujian nyata jauh lebih penting daripada hanya melihat breakpoint di developer tools.
Mulai dari pengalaman mobile normal
Jika mayoritas peserta menggunakan smartphone, mobile normal harus menjadi baseline. Tombol perlu mudah disentuh, teks terbaca, form tidak terpotong, dan informasi utama muncul dengan urutan yang masuk akal.
Mode “Situs desktop” adalah kasus berbeda
Pada sebagian browser Android, mode Situs desktop dapat melaporkan viewport yang jauh lebih lebar daripada ukuran fisik layar. Akibatnya, aturan berbasis lebar saja tidak selalu cukup. Sebuah gambar dapat terlihat seolah-olah berada di desktop, padahal tetap dirender pada perangkat sentuh dengan layar fisik kecil.
Dalam kasus seperti ini, responsivitas gambar perlu menjaga rasio asli, lebar maksimum, dan cara `object-fit` bekerja. Tujuannya bukan membuat semua perangkat identik, tetapi mencegah crop atau skala yang tidak proporsional.
Jangan memperbaiki satu viewport dengan merusak viewport lain
Ketika tampilan mobile normal sudah bagus, perubahan sebaiknya dibatasi pada selector atau kondisi yang benar-benar diperlukan. Ini mengurangi risiko regresi pada laptop, desktop, atau tablet.
Perbaikan responsive yang baik bersifat sempit: memperbaiki kasus bermasalah tanpa mengubah baseline yang sudah berhasil.
Gunakan rasio intrinsik gambar
Untuk visual horizontal, `width`, `height`, dan `aspect-ratio` membantu browser mengetahui geometri sebelum gambar selesai dimuat. `object-fit: contain` berguna ketika seluruh visual perlu terlihat; `cover` lebih cocok ketika crop memang menjadi bagian dari desain.
Uji perangkat nyata
Developer tools membantu, tetapi pengujian pada Chrome Android, Safari/iOS bila tersedia, tablet, laptop, dan desktop tetap penting. Screenshot dari perangkat nyata sering mengungkap perbedaan yang tidak terlihat pada simulasi.
Cache juga bagian dari debugging
Ketika CSS sudah diperbarui tetapi perangkat belum berubah, masalahnya tidak selalu pada media query. Browser, CDN, atau cache edge dapat menyajikan file lama. Version query atau cache-busting yang terkontrol dapat membantu memastikan stylesheet terbaru benar-benar diambil.
Kesimpulan
Responsive-first berarti memandang perangkat sebagai kondisi penggunaan nyata, bukan sekadar angka breakpoint. Baseline yang stabil harus dipertahankan, kasus khusus ditangani secara terisolasi, dan hasil akhir diuji pada perangkat yang benar-benar dipakai pengguna.
Full Stack Developer. Catatan ini merupakan bagian dari Knowledge Center srilexbuditra.work dan ditulis dari pengalaman pengembangan sistem digital yang terdokumentasi.
Lihat Profil & Rekam Jejak →