Mobile First: Strategi Desain Responsif

Dua arah berpikir

Ada dua strategi menulis CSS responsif:

1. Desktop first: tulis buat layar besar dulu, lalu "memperkecil" dengan max-width
2. Mobile first: tulis buat layar kecil dulu, lalu "memperbesar" dengan min-width

Industri modern condong ke mobile first, dan ada alasan teknisnya.

Kenapa mobile first?

• Pengguna mayoritas di HP: di Indonesia, akses internet didominasi perangkat mobile. Masuk akal mengutamakan pengalaman mereka.
• CSS lebih ramping: gaya dasar ditulis sekali buat mobile, lalu ditambah (bukan ditimpa berulang) buat layar besar.
• Progressive enhancement: mulai dari yang esensial, tambah kemewahan seiring layar membesar. Kebalikan dari desktop first yang harus "mengurangi" fitur.

Pola mobile first

/* DEFAULT: mobile, satu kolom, tanpa media query */
.daftar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* tablet: 2 kolom */
@media (min-width: 640px) {
  .daftar {
    grid-template-columns: 1fr 1fr;
  }
}

/* desktop: 4 kolom */
@media (min-width: 1024px) {
  .daftar {
    grid-template-columns: repeat(4, 1fr);
  }
}

Perhatikan: tidak ada max-width sama sekali. Setiap breakpoint hanya menambah kemampuan. Urutannya dari kecil ke besar, dan karena CSS dibaca atas ke bawah, aturan yang lebih besar otomatis menimpa yang lebih kecil.

Contoh tipografi mobile first

h1 {
  font-size: 1.75rem; /* mobile */
  line-height: 1.2;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem; /* tablet ke atas */
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 3.5rem; /* desktop besar */
  }
}

Kapan desktop first masih oke?

Kalau kamu mewarisi codebase lama yang sudah ditulis desktop first, jangan refactor total hanya demi ideologi. Konsisten dengan kode yang ada lebih penting. Mobile first adalah rekomendasi buat project baru, bukan hukum.

Catatan teknis: dengan mobile first, media query min-width harus diurutkan dari kecil ke besar di dalam file. Kalau urutannya terbalik (1024 dulu baru 640), aturan 640px akan menimpa 1024px untuk layar besar karena ditulis belakangan. Ini bug urutan klasik yang gejalanya "breakpoint-ku tidak jalan".

Checklist berpikir mobile

Saat mendesain tiap komponen, tanyakan:

• Apakah bisa dipakai dengan satu jempol? (target sentuh minimal 44px)
• Apakah teks terbaca tanpa zoom?
• Apakah yang penting muncul duluan tanpa scroll jauh?
• Apakah gambar tidak membuat loading berat di koneksi HP?

Rangkuman

Mobile first = tulis buat layar kecil dulu sebagai default, tambah min-width dari kecil ke besar buat layar yang lebih lega. Hasilnya CSS lebih ramping dan pengalaman HP jadi prioritas. Ingat urutan breakpoint: kecil dulu, besar belakangan.