Responsive Design Principles

Satu halaman web kini dibuka dari ponsel dengan lebar layar 360px, tablet dengan lebar 800px, hingga monitor desktop 1920px. Alih-alih membangun versi halaman yang berbeda untuk tiap perangkat, responsive design menempuh jalan yang lebih terjaga: satu HTML dan satu CSS yang menyesuaikan diri terhadap ruang yang tersedia. Pendekatan ini dipopulerkan oleh Ethan Marcotte pada tahun 2010 melalui tiga bahan dasar yang sampai hari ini masih menjadi fondasinya: fluid grid, flexible images, dan media queries. Pada Chapter ini kita membedah ketiga bahan tersebut, ditambah satu langkah wajib di HTML bernama meta viewport, sebelum masuk ke teknik-teknik spesifik pada chapter berikutnya.

Tiga Bahan Dasar Responsive Design #

Ketiga bahan dalam responsive design masing-masing menyelesaikan satu masalah dan saling melengkapi:

Fluid grid menangani penyesuaian harian: ketika container menyempit satu piksel, kolom ikut menyempit satu piksel. Flexible images memastikan media tidak pernah keluar dari wadahnya. Media queries mengatur perubahan besar — misalnya sidebar yang pindah posisi ketika ruang cukup. Tanpa salah satu dari ketiganya, halaman akan terasa “setengah responsif”: kolomnya elastis tetapi gambarnya keluar dari kotak.

Meta Viewport: Langkah Wajib di HTML #

Sebelum CSS apa pun bekerja, browser ponsel perlu diberi tahu lebar sebenarnya. Tanpa petunjuk tersebut, browser menganggap halaman berlebar 980px lalu menampilkannya dalam bentuk yang diperkecil agar muat di layar. Akibatnya media query min-width: 768px ikut aktif di ponsel, dan layout yang kita rancang untuk ponsel tidak pernah terlihat.

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

Mari kita telaah dua atribut penting pada meta viewport di atas:

1. Baris 3 (content="width=device-width, ..."): atribut width=device-width memerintahkan browser menjadikan lebar layout viewport sama dengan lebar layar perangkat dalam CSS pixel, bukan nilai default 980px.
2. Baris 3 (... initial-scale=1): initial-scale=1 menetapkan zoom awal pada 100%, sehingga satu CSS pixel sama dengan satu piksel perangkat pada skala tersebut.

Tiga Bahan dalam Satu Halaman #

Demo chapter ini menyatukan ketiga bahan dalam satu file. Berikut inti CSS-nya:

.kisi-fluid { width: 600px; display: flex; }
.kolom { width: 50%; padding: 16px; }

.bingkai-gambar { width: 400px; }
.gambar-fleksibel { width: 100%; height: auto; display: block; }

.panel-media { padding: 12px 16px; background: rgb(203, 213, 225); }
@media (min-width: 1024px) {
  .panel-media { background: rgb(14, 165, 233); color: rgb(255, 255, 255); }
}

Mari kita telaah potongan di atas:

1. .kisi-fluid + .kolom (width: 50%): container selebar 600px dibagi dua kolom; masing-masing mengambil 50% sehingga lebarnya 300px. Bila container menyusut ke 300px, tiap kolom otomatis menjadi 150px tanpa mengubah satu baris kode pun.
2. .gambar-fleksibel (width: 100%; height: auto): gambar mengikuti lebar bingkai 400px, sedangkan height: auto membuat tinggi menghitung ulang dari rasio asli gambar 800x400, menghasilkan 200px — rasio 2:1 tetap terjaga.
3. @media (min-width: 1024px): aturan di dalamnya hanya diterapkan bila viewport berlebar minimal 1024px; di bawah nilai itu panel memakai warna abu-abu dasarnya.

Hasil di Browser:

Kedua kolom fluid grid masing-masing selebar 300px (50% dari container 600px).
Gambar SVG 800x400 tampil selebar 400px dengan tinggi 200px — rasio 2:1 terjaga.
Panel media query berwarna rgb(14, 165, 233) dengan teks putih, karena viewport
harness 1280px memenuhi syarat min-width: 1024px.

Sikap Dasar yang Menemani Ketiga Bahan #

Responsive design bukan sekadar daftar properti, melainkan cara berpikir. Tiga kebiasaan yang sebaiknya kita tanam sejak awal: tulis markup bermakna terlebih dahulu dan tata layout belakangan; pakai satuan relatif (%, rem, fr) sebelum mempertimbangkan piksel; serta tambahkan gaya baru sebagai enhancement, bukan menulis ulang dari nol untuk tiap perangkat. Sikap ini menjadi dasar pendekatan mobile first yang kita bahas pada Chapter berikutnya.