Pengunjung datang dari ponsel, tablet, dan desktop sekaligus. Section ini merangkum prinsip responsive design: pendekatan mobile first, media queries dan pemilihan breakpoints, gambar dan tipografi responsif, navigasi yang menyesuaikan, serta cara menguji berbagai viewport.

# Responsive Design Principles

Pahami tiga bahan dasar responsive design — fluid grid, flexible images, dan media queries — serta peran meta viewport.

Buka → # Mobile First

Rancang gaya dasar untuk ponsel terlebih dahulu, lalu tambahkan enhancement dengan min-width untuk layar yang lebih besar.

Buka → # Media Queries

Kuasai sintaks @media: media type, media feature, serta penggabungan kondisi dengan and, not, dan koma.

Buka → # Breakpoints

Pilih titik perubahan layout berdasarkan kebutuhan konten, kenali skala umum, dan hindari media query yang berlebihan.

Buka → # Responsive Images

Jaga gambar tetap dalam bingkai dengan max-width dan height auto, lalu kenali srcset, sizes, dan picture untuk kasus lanjutan.

Buka → # Responsive Typography

Atur ukuran teks yang menyesuaikan viewport dengan clamp(), jaga skala rem, dan sesuaikan line-height antar ukuran layar.

Buka → # Responsive Navigation

Ubah navbar desktop menjadi menu ponsel dengan checkbox hack atau scroll horizontal, lengkap dengan trade-off dan catatan aksesibilitasnya.

Buka → # Responsive Layouts

Susun layout halaman utuh yang responsif: sidebar grid yang berpindah kolom dan card grid auto-fit yang mengatur dirinya sendiri.

Buka → # Testing Berbagai Viewport

Uji halaman responsif secara sistematis: device mode DevTools, mode responsif Firefox, alat online, dan checklist uji manual.

Buka →