Responsive Design dan Mobile-First

Lebih dari 70% traffic iklan di Indonesia datang dari HP. Kalau landing page kamu berantakan di layar mobile, kamu secara harfiah membakar uang iklan.

Meta Viewport: Fondasi Responsif

Ingat tag ini dari chapter 2?

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

Tanpa tag ini, browser mobile akan menampilkan halaman kamu seolah-olah dilihat dari layar desktop, lalu di-zoom out supaya muat. Hasilnya: teks super kecil, tombol tidak bisa diklik, pengunjung langsung back.

Pastikan tag ini selalu ada di setiap halaman.

Media Query: CSS yang Berubah Sesuai Layar

Media query memungkinkan kamu menulis CSS yang berbeda untuk ukuran layar berbeda:

/* Default: styling untuk mobile */
.hero h1 {
  font-size: 24px;
  padding: 20px;
}

.cta-button {
  width: 100%;
  padding: 16px;
}

/* Untuk layar 768px ke atas (tablet dan desktop) */
@media (min-width: 768px) {
  .hero h1 {
    font-size: 48px;
    padding: 60px;
  }
  
  .cta-button {
    width: auto;
    padding: 16px 40px;
  }
}

Pendekatan ini disebut mobile-first: kamu mendesain untuk HP dulu, baru menambahkan penyesuaian untuk layar yang lebih besar. Ini pendekatan yang saya rekomendasikan karena mayoritas traffic kamu kemungkinan dari mobile.

Ukuran yang Perlu Kamu Tahu

Breakpoint yang umum dipakai:

Breakpoint	Target Device
< 480px	HP kecil
480px - 768px	HP besar
768px - 1024px	Tablet
> 1024px	Desktop

Untuk landing page iklan, saya biasanya cuma pakai dua breakpoint: satu untuk mobile (default) dan satu untuk desktop (min-width: 768px). Tidak perlu terlalu granular.

Tips Responsif untuk Landing Page Iklan

1. Tombol CTA harus full-width di mobile

.cta-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px;
  font-size: 18px;
}

Tombol kecil di HP itu conversion killer. Jempol orang butuh target yang cukup besar untuk diklik.

2. Gambar harus fleksibel

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

Dua baris CSS ini memastikan gambar tidak pernah meluap keluar dari layar. Wajib ada di setiap project.

3. Hindari fixed width

/* Jangan begini */
.container {
  width: 1200px;
}

/* Pakai begini */
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

max-width memastikan container tidak lebih lebar dari 1200px di desktop, tapi menyusut di layar yang lebih kecil.

4. Font size minimum 16px di mobile

Di bawah 16px, teks jadi sulit dibaca di HP. Dan kalau input form punya font lebih kecil dari 16px, iOS Safari akan otomatis zoom in saat pengguna mengetik. Ini bikin form berantakan.

Testing Responsif di DevTools

Kamu tidak perlu HP untuk testing. Di Chrome DevTools:

1. Buka DevTools (F12)
2. Klik ikon device toolbar (ikon HP di sebelah tab Elements) atau tekan Ctrl+Shift+M
3. Pilih device dari dropdown, atau drag tepi layar untuk resize manual

Cek landing page kamu di setidaknya tiga ukuran:

• iPhone SE (375px) — HP kecil
• iPhone 12/13 (390px) — HP standar
• iPad (768px) — Tablet

Kalau ada elemen yang terpotong, teks yang terlalu kecil, atau tombol yang sulit diklik, itu masalah yang harus diperbaiki sebelum traffic iklan diarahkan ke sana.

Praktik: Landing Page Responsif

Kembali ke kode di chapter 6 dan tambahkan media query:

<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: Arial, sans-serif; }
  
  .hero {
    background-color: #1a1a2e;
    color: white;
    padding: 40px 20px;
    text-align: center;
  }
  .hero h1 { font-size: 24px; margin-bottom: 12px; }
  .hero p { font-size: 16px; color: #cccccc; margin-bottom: 24px; }
  .cta {
    display: block;
    background-color: #e94560;
    color: white;
    padding: 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 18px;
  }
  
  @media (min-width: 768px) {
    .hero { padding: 80px 40px; }
    .hero h1 { font-size: 48px; margin-bottom: 16px; }
    .hero p { font-size: 20px; }
    .cta {
      display: inline-block;
      padding: 16px 40px;
    }
  }
</style>

Buka di CodePen, lalu resize jendela browser kamu. Perhatikan bagaimana tampilan berubah otomatis sesuai lebar layar.

Chapter terakhir, kita rangkum semua ilmu yang sudah dipelajari dan saya kasih checklist praktis yang bisa kamu pakai sehari-hari.