Halo teman-teman! Kali ini kita bakal belajar tentang Responsive Design — salah satu skill paling penting di dunia web development. Dengan responsive design, website kita bisa tampil keren di semua ukuran layar, dari HP kecil sampai monitor gede.

Bayangin kalau website kita cuma bagus di laptop, tapi pas dibuka di HP jadi berantakan — pasti user langsung kabur kan? Nah, makanya kita perlu responsive design!

Apa Itu Responsive Design?

Responsive Design adalah pendekatan dalam membuat website yang bisa menyesuaikan tampilannya dengan berbagai ukuran layar dan perangkat. Website yang responsive akan:

• ✅ Tampil bagus di HP (mobile)
• ✅ Tampil bagus di tablet
• ✅ Tampil bagus di laptop/desktop
• ✅ Auto-adjust layout tanpa perlu buat website terpisah

Viewport Meta Tag

Sebelum mulai pakai media query, pastikan kamu udah pasang viewport meta tag di HTML. Tanpa ini, CSS media query nggak bakal work!

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Kenapa penting?

• width=device-width — lebar viewport sama dengan lebar device
• initial-scale=1.0 — zoom level default 100%

Tanpa viewport meta tag, browser bakal treat website kita kayak website desktop biasa — dan user harus zoom in/out manual di HP. Nggak enak banget kan?

Mobile-First Approach

Dalam responsive design, ada dua pendekatan:

1. Desktop-First — mulai dari desain desktop, lalu tambahin media query untuk mobile
2. Mobile-First — mulai dari desain mobile, lalu tambahin media query untuk layar lebih besar

Mobile-first lebih disarankan karena:

• Lebih cepat loading di mobile (kurang CSS)
• Lebih SEO-friendly
• UX lebih baik di mobile
• Google udah pakai mobile-first indexing

Contoh Desktop-First (❌ nggak recommended)

/* Default: Desktop */
.container {
  width: 1200px;
  padding: 20px;
}

/* Tablet */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 15px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .container {
    padding: 10px;
  }
}

Contoh Mobile-First (✅ recommended)

/* Default: Mobile */
.container {
  width: 100%;
  padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    width: 100%;
    padding: 15px;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .container {
    width: 1200px;
    padding: 20px;
  }
}

Lihat perbedaannya? Di mobile-first, kita pakai min-width (dari kecil ke besar), sedangkan desktop-first pakai max-width (dari besar ke kecil).

Media Query

Media Query adalah fitur CSS yang memungkinkan kita nulis style berdasarkan kondisi tertentu — kayak ukuran layar, orientasi, resolusi, dll.

Sintaks Dasar

@media media-type and (media-feature: value) {
  /* CSS rules di sini */
}

Jenis Media Type

Media Type	Deskripsi
all	Semua perangkat (default)
screen	Layar digital (HP, tablet, laptop)
print	Untuk pencetakan

Media Features yang Sering Dipake

Lebar Layar (width)

/* Mobile: max-width 767px */
@media (max-width: 767px) {
  .sidebar {
    display: none; /* Sembunyiin sidebar di HP */
  }
}

/* Tablet: min-width 768px */
@media (min-width: 768px) {
  .sidebar {
    display: block; /* Tampilin sidebar di tablet+ */
  }
}

Orientasi Layar

/* Portrait mode (vertikal) */
@media (orientation: portrait) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

/* Landscape mode (horizontal) */
@media (orientation: landscape) {
  .gallery {
    grid-template-columns: 1fr 1fr;
  }
}

Resolusi Tinggi (Retina Display)

/* Untuk layar retina */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .logo {
    background-image: url('[email protected]');
  }
}

Kombinasi Multiple Conditions

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .content {
    font-size: 18px;
  }
}

/* Hover capability (bukan touchscreen) */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background-color: var(--primary);
  }
}

Common Breakpoints

Breakpoint adalah titik di mana layout berubah. Nggak ada angka pasti yang “benar”, tapi ini beberapa yang umum dipake:

/* Mobile Small */
@media (min-width: 320px) {
  /* styles untuk HP kecil */
}

/* Mobile Large */
@media (min-width: 375px) {
  /* styles untuk HP besar */
}

/* Tablet */
@media (min-width: 768px) {
  /* styles untuk tablet */
}

/* Laptop */
@media (min-width: 1024px) {
  /* styles untuk laptop */
}

/* Desktop Large */
@media (min-width: 1200px) {
  /* styles untuk desktop */
}

/* Desktop Extra Large */
@media (min-width: 1440px) {
  /* styles untuk monitor gede */
}

Tips Memilih Breakpoint

Daripada pakai angka arbitrary, breakpoint berdasarkan konten lebih baik:

/* Breakpoint berdasarkan konten, bukan device */
@media (min-width: 65ch) {  /* 65 character width = comfortable reading */
  body {
    max-width: 65ch;
  }
}

@media (min-width: 40em) {  /* Ketika container mulai terasa sempit */
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Responsive Units

Pilih unit yang tepat untuk membuat layout fleksibel:

Units yang Perlu Diketahui

Unit	Tipe	Contoh Penggunaan
px	Fixed	Border, shadow
%	Relative	Width parent
em	Relative	Font-size, padding
rem	Relative	Font-size, margin
vw	Viewport	Width layar
vh	Viewport	Height layar
vmin	Viewport	Dimensi terkecil
vmax	Viewport	Dimensi terbesar
clamp()	Dynamic	Font-size responsive

Contoh Penggunaan Responsive Units

/* Font-size responsive dengan clamp() */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

/* Container responsif */
.container {
  width: min(90%, 1200px);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 3rem);
}

/* Grid responsif tanpa media query */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Responsive Navigation

Navigasi yang responsive itu penting banget. Di mobile biasanya kita pakai hamburger menu.

Contoh Responsive Navigation

<nav class="navbar">
  <div class="logo">MyBrand</div>
  <button class="menu-toggle" aria-label="Toggle menu">
    ☰
  </button>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

/* Mobile: Default */
.navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.nav-links {
  display: none;
  width: 100%;
  list-style: none;
}

.nav-links.active {
  display: block;
}

.nav-links a {
  display: block;
  padding: 0.75rem 0;
  text-decoration: none;
}

.menu-toggle {
  display: block;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Tablet & Desktop: Show nav */
@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }

  .nav-links {
    display: flex;
    width: auto;
    gap: 1.5rem;
  }

  .nav-links a {
    padding: 0;
  }
}

Contoh dengan Flexbox & CSS Only

/* Pure CSS responsive nav tanpa JavaScript */
.nav-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: 1rem;
  list-style: none;
}

/* Hamburger menu (CSS only) */
#menu-toggle {
  display: none;
}

#menu-toggle:checked + .menu-label + .nav-links {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 768px) {
  #menu-toggle:checked + .menu-label + .nav-links {
    flex-direction: row;
    width: auto;
  }
}

Responsive Images

Gambar yang nggak responsive bisa bikin layout berantakan. Ada beberapa cara bikin gambar responsive:

1. max-width (Paling Simpel)

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

2. srcset Attribute

<img 
  src="image-800.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Responsive image"
/>

3. <picture> Element

<picture>
  <source media="(min-width: 1024px)" srcset="large.jpg">
  <source media="(min-width: 600px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image">
</picture>

4. Background Image Responsive

.hero {
  background-image: url('hero-mobile.jpg');
  background-size: cover;
  background-position: center;
}

@media (min-width: 768px) {
  .hero {
    background-image: url('hero-tablet.jpg');
  }
}

@media (min-width: 1200px) {
  .hero {
    background-image: url('hero-desktop.jpg');
  }
}

Responsive Typography

Font yang bagus juga harus responsive!

/* Cara 1: Media queries terpisah */
body {
  font-size: 14px;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

@media (min-width: 1200px) {
  body {
    font-size: 18px;
  }
}

/* Cara 2: clamp() — lebih clean! */
body {
  font-size: clamp(14px, 2.5vw, 18px);
}

h1 {
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.3;
}

Best Practices

1. Gunakan CSS Grid & Flexbox

/* Grid yang otomatis responsive */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

2. Hindari Fixed Width

/* ❌ Jangan */
.container {
  width: 960px;
}

/* ✅ Pakai ini */
.container {
  width: min(90%, 1200px);
  margin: 0 auto;
}

3. Test di Berbagai Ukuran

Browser modern punya responsive design mode — tekan F12 lalu klik icon mobile di DevTools.

4. Gunakan box-sizing: border-box

*, *::before, *::after {
  box-sizing: border-box;
}

5. Perhatikan Touch Targets

Di mobile, pastikan tombol dan link cukup besar untuk di-tap:

/* Minimum touch target 44x44px */
.button, .nav-link {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

6. Jangan Sembunyiin Konten Penting di Mobile

/* ❌ Jangan sembunyiin konten penting */
@media (max-width: 767px) {
  .important-content {
    display: none;
  }
}

/* ✅ Lebih baik reflow/stacking */
@media (max-width: 767px) {
  .important-content {
    grid-column: span 1;
  }
}

Contoh Lengkap: Responsive Layout

/* Mobile First Approach */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

.container {
  width: min(90%, 1200px);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem);
}

/* Grid layout */
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Tablet */
@media (min-width: 768px) {
  .content-grid {
    grid-template-columns: 2fr 1fr;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .content-grid {
    grid-template-columns: 1fr 300px;
    gap: 3rem;
  }
}

/* Responsive cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

Kesimpulan

Responsive design itu wajib banget dipahami kalau mau jadi web developer. Ini poin-poin penting yang harus diingat:

1. Pasang viewport meta tag di HTML
2. Pakai mobile-first approach (min-width > max-width)
3. Media query untuk mengubah style di breakpoint tertentu
4. Pakai responsive units seperti rem, em, vw, clamp()
5. Responsive images dengan max-width, srcset, atau picture element
6. Test di berbagai ukuran layar pakai DevTools

Ingat, mobile-first bukan cuma tren — ini standar industri sekarang. Google udah pakai mobile-first indexing, jadi website yang nggak responsive bakal ketinggalan di SEO.

Sekarang cobain buat layout responsive sendiri! Mulai dari yang sederhana dulu, kayak buat navbar yang collapsible di mobile. Setelah nyaman, baru deh coba yang lebih kompleks kayak grid layout yang fully responsive.

---