Mobile-First — Desain dari Layar Kecil

Mobile-first berarti mendesain untuk layar mobile terlebih dahulu, lalu menambahkan complexity untuk layar yang lebih besar.

Mengapa Mobile-First?

1. Majority traffic — di Indonesia, 70%+ traffic web dari mobile
2. Constraint-driven — layar kecil memaksa kamu fokus pada yang penting
3. Progressive enhancement — lebih mudah menambah dari mengurangi
4. Performance — mobile-first cenderung lebih ringan

Content Priority

Di mobile, space sangat terbatas. Tentukan apa yang paling penting:

1. Apa aksi utama user di halaman ini?
2. Informasi apa yang paling dibutuhkan?
3. Apa yang bisa disembunyikan atau dipindahkan?

Breakpoint Strategy

/* Mobile-first: base styles untuk mobile */
.container { padding: 1rem; }
.grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* Tablet */
@media (min-width: 768px) {
  .container { padding: 2rem; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Common Responsive Patterns

1. Stack → Grid — elemen yang vertikal di mobile menjadi horizontal di desktop
2. Hamburger menu — navigasi disembunyikan di mobile
3. Hide secondary content — sidebar disembunyikan di mobile
4. Full-width → contained — konten full-width di mobile, max-width di desktop
5. Touch → hover — hover effects diganti touch-friendly di mobile

Tips

1. Test di device nyata — emulator tidak sama dengan device asli
2. Font size minimal 16px di mobile — untuk readability dan mencegah iOS zoom
3. Touch targets 44px+ — jari lebih besar dari cursor
4. Avoid horizontal scroll — kecuali untuk carousel
5. Performance budget — mobile biasanya koneksi lebih lambat

Tokopedia, Gojek, dan Traveloka semua mobile-first — pengalaman mobile mereka bahkan lebih polished dari desktop.