Konsep Responsive Design

Halaman yang kita bangun tidak dibuka dari satu ukuran layar saja. Pengunjung datang dari ponsel saku, tablet di sofa, laptop di meja kerja, hingga monitor lebar di ruang studio — dan semua mereka mengharapkan pengalaman membaca yang sama nyamannya. Layout yang hanya terlihat rapi pada laptop kita pasti retak di tempat lain. Chapter ini meletakkan fondasi section Responsive Web Design: apa itu responsive design, tiga bahan pembentuknya, dan satu tag HTML kecil yang wajib ada agar ponsel menampilkan halaman kita dengan benar.

Satu Web, Banyak Layar #

Cara paling jujur memahami persoalan ini adalah melihat rentang perangkat yang benar-benar dipakai pengunjung:

Angka pada tabel hanya gambaran kasar, bukan daftar resmi — perangkat baru terus bermunculan dengan ukuran yang berbeda-beda. Justru karena daftarnya tidak pernah selesai, strategi “buat satu layout untuk setiap perangkat” tidak akan pernah tuntas.

Tiga Bahan Responsive Design #

Istilah responsive web design dipopulerkan Ethan Marcotte pada awal dekade 2010-an untuk mendeskripsikan pendekatan yang kini menjadi standar: satu halaman yang sama menyesuaikan diri terhadap ruang yang tersedia. Penyesuaian itu dibangun dari tiga bahan yang akan kita kuasai berurutan di section ini:

• Fluid layout — lebar elemen memakai satuan relatif (persen, rem, fr) sehingga mengembang dan menyusut mengikuti ruang, bukan terkunci pada piksel tetap.
• Flexible media — gambar dan video tidak pernah melebihi wadahnya, misalnya lewat max-width: 100%.
• Media queries — aturan CSS yang berlaku bersyarat, misalnya hanya saat layar sempit atau hanya saat lebar.

Ketiganya bekerja berlapis: fluid layout menangani perubahan kecil secara halus, media queries mengatur perubahan besar seperti menyusun ulang kolom. Tanpa fluid layout, media queries akan dipakai berlebihan untuk setiap piksel; tanpa media queries, layout fluid sulit mengubah struktur.

Demo berikut merangkai ketiganya pada empat kartu produk dengan markup yang sama persis untuk semua ukuran — kuncinya flex-wrap dan flex-basis yang kita pelajari di section Flexbox:

.baris-produk {
  display: flex;
  flex-wrap: wrap;      /* kartu yang tak muat pindah ke baris baru */
  gap: 12px;
}
.kartu-produk {
  flex: 1 1 180px;      /* dasar 180px, boleh mengembang */
}

Sepanjang section ini, demo berjalan di dalam bingkai yang lebarnya mengikuti kolom konten halaman. Perkecil jendela browser secara perlahan — bingkai ikut menyusut, dan setiap demo bisa dipakai sebagai laboratorium kecil untuk menguji perilaku responsif tanpa meninggalkan halaman.

Viewport Meta Tag: Syarat Wajib #

Sebelum satu media query pun ditulis, ada satu baris HTML yang menentukan segalanya. Tanpa baris ini, browser ponsel menganggap halaman kita dirancang untuk desktop, lalu me-render-nya pada viewport maya selebar sekitar 980px sebelum memperkecil seluruh hasilnya agar muat di layar:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Mari kita bedah isi atribut content di atas:

1. width=device-width: lebar viewport disamakan dengan lebar layar perangkat yang sebenarnya. Media query min-width: 640px kini membandingkan diri dengan lebar layar sungguhan, bukan angka maya 980px.
2. initial-scale=1: halaman ditampilkan tanpa zoom awal, pada skala 1:1.

Tanpa tag ini, halaman yang layout-nya sudah benar tetap tampil seperti versi desktop yang dikecilkan: teks mengecil, tombol menyempit, dan pengunjung terpaksa zoom dengan jari. Karena itulah tag viewport dianggap syarat masuk responsive design — semua CSS responsif yang kita tulis bergantung padanya.

Mengapa Ini Penting #

Di banyak negara, termasuk Indonesia, kunjungan web dari ponsel sudah lama melewati kunjungan dari komputer — ponsel adalah pintu utama orang mengakses internet. Mesin pencari pun menjadikan versi ponsel sebagai acuan utama penilaian halaman. Selain itu, responsive design memakai satu URL untuk semua perangkat: tidak ada situs m. terpisah yang harus dirawat dua kali, dan tautan yang dibagikan tetap bermakna bagi siapa pun penerimanya.

Ringkasan #

Responsive design berarti satu halaman yang sama tampil baik di segala ukuran layar, dibangun dari tiga bahan: fluid layout, flexible media, dan media queries. Syarat pertamanya ada di HTML berupa viewport meta tag, tanpa itu ponsel me-render halaman pada lebar maya 980px. Chapter berikutnya membahas strategi yang menentukan urutan kita menulis CSS responsif: mobile first.