Pertemuan 11-12: Desain Responsif (RWD)

Membuat Website yang Beradaptasi di Semua Perangkat

Pengertian

Desain Web Responsif (RWD) adalah pendekatan yang membuat halaman web Anda terlihat bagus di semua perangkat (desktop, tablet, dan ponsel). RWD adalah tentang menggunakan HTML dan CSS untuk secara otomatis mengubah ukuran, menyembunyikan, mengecilkan, atau memperbesar situs web, agar sesuai dengan perangkat apa pun. Tiga pilar utama RWD adalah Fluid Grid (layout fleksibel), Flexible Images (gambar fleksibel), dan Media Queries.

Analogi

Analogi: Air di dalam Wadah
Bayangkan konten website Anda adalah air. Desain responsif memastikan bahwa air tersebut akan mengisi wadah apa pun dengan sempurna, baik itu gelas kecil (ponsel), mangkuk sedang (tablet), atau ember besar (desktop), tanpa tumpah atau terlihat aneh.

Contoh Kode & Hasil

1. Meta Tag Viewport (Wajib di HTML)

Langkah pertama dan paling penting. Tanpa ini, browser mobile akan menampilkan halaman versi desktop yang diperkecil.

<!-- Letakkan ini di dalam <head> file HTML Anda -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Gambar Fleksibel (Fluid Image)

Membuat gambar tidak pernah lebih lebar dari containernya.

Gambar Responsif
img {
  max-width: 100%;
  height: auto;
}

3. Media Query untuk Mengubah Layout

Contoh layout yang berubah dari 2 kolom menjadi 1 kolom di layar kecil.

Kolom 1
Kolom 2
.container {
  display: flex; /* Layout default untuk desktop */
}
/* Untuk layar dengan lebar 768px atau kurang */
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column; /* Ubah menjadi tumpukan vertikal */
  }
}

4. Media Query untuk Mengubah Warna Latar

Ubah ukuran browser Anda untuk melihat perubahan warna latar belakang.

Latar belakang halaman ini akan berubah warna sesuai lebar layar.
/* Default untuk semua layar */
body {
  background-color: lightblue;
}

/* Untuk layar dengan lebar 600px atau kurang */
@media screen and (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

Latihan Mandiri

Tugas: Membuat Navbar Responsif

  1. Buat sebuah navbar menggunakan Flexbox.
  2. Secara default (desktop), tampilkan semua menu secara horizontal.
  3. Gunakan Media Query. Ketika lebar layar di bawah 768px, sembunyikan menu utama (display: none;).
  4. Masih di dalam Media Query, tampilkan sebuah ikon "hamburger" (bisa menggunakan teks atau gambar) yang sebelumnya disembunyikan di mode desktop.

Kesimpulan

Di dunia modern di mana pengguna mengakses web dari berbagai perangkat, RWD bukan lagi sebuah pilihan, melainkan sebuah keharusan. Dengan menguasai layout fleksibel (Flexbox/Grid), gambar fleksibel, dan Media Queries, Anda dapat memastikan bahwa website Anda memberikan pengalaman pengguna yang optimal di semua perangkat, dari ponsel kecil hingga monitor desktop besar.