Cara memahami perubahan kolom, gambar, menu, dan jarak antar elemen ketika situs dibuka dari ukuran layar berbeda. Halaman ini ditulis sebagai topik mandiri dengan kosakata dan contoh yang tidak menyalin artikel lain di dalam paket.
Kolom berubah mengikuti ruang
Layout multi-kolom di desktop akan turun menjadi satu kolom pada layar sempit agar isi tidak terjepit. Perubahan ini mempertahankan urutan informasi, bukan sekadar mengecilkan seluruh halaman.
Pengguna tetap melihat bagian penting dalam susunan yang logis meskipun posisi visualnya berbeda.
Gambar mengikuti lebar kontainer
Aset visual menggunakan ukuran fleksibel sehingga tidak melampaui layar. Browser juga dapat memilih berkas yang lebih kecil ketika resolusi besar tidak diperlukan.
Teknik tersebut menjaga detail cukup tajam sekaligus mengurangi pemuatan berlebih pada koneksi seluler.
Menu perlu tetap dapat digeser
Pada layar sempit, navigasi horizontal dapat memakai gulir agar label tidak dipaksa menjadi terlalu kecil.
Pengguna memperoleh akses ke seluruh menu tanpa membuat header memakan banyak baris.
Jarak sentuh berbeda dari pointer
Smartphone memerlukan target lebih besar dibanding desktop karena jari tidak sepresisi mouse.
Padding tombol dan jarak antaraksi membantu mengurangi salah tekan pada penggunaan satu tangan.
Uji pada beberapa lebar nyata
Perubahan breakpoint sebaiknya diperiksa pada ponsel kecil, ponsel besar, tablet, dan desktop.
Pengujian lintas ukuran membantu menemukan bagian yang secara teknis muat tetapi secara visual masih terasa sesak.