Mobile First

Media query bisa ditulis dengan dua urutan: mulai dari desktop lalu memperbaiki untuk ponsel, atau mulai dari ponsel lalu menyempurnakan untuk desktop. Keduanya menghasilkan tampilan akhir yang sama, tetapi pengalaman menulis dan merawatnya jauh berbeda. Di chapter ini kita membiasakan strategi mobile first: gaya dasar ditulis untuk layar kecil, lalu ditingkatkan ke arah layar lebar dengan min-width. Strategi ini membuat cascade bekerja untuk kita, bukan melawannya.

Strategi Mobile First #

Aturannya sederhana: gaya dasar di luar media query ditujukan untuk layar kecil — satu kolom, susunan vertikal, ukuran hemat. Penyempurnaan untuk layar lebih lebar ditulis di dalam media query min-width:

.konten-demo {
  display: flex;
  flex-direction: column; /* dasar: menumpuk di layar sempit */
  gap: 12px;
}
@media (min-width: 640px) {
  .konten-demo {
    flex-direction: row;  /* tambahan: berdampingan saat lebar */
  }
  .konten-demo > * {
    flex: 1;              /* tiap panel membagi ruang sama */
  }
}

Perhatikan pola pentingnya: media query di atas hanya menambah perilaku baru, tidak ada aturan lama yang perlu dibatalkan. Demo berikut memakai pola itu apa adanya pada dua panel konten:

Media query di dalam bingkai menilai lebar bingkai itu sendiri — perkecil jendela browser dan peralihannya terlihat tanpa satu properti pun yang dibatalkan.

Mengapa Mobile First #

Tiga alasan membuat strategi ini layak dijadikan kebiasaan:

• Cascade yang lebih sederhana. Dengan min-width, aturan yang lebih spesifik selalu datang belakangan di source order, menambah perilaku di atas dasar. Kita jarang perlu menimpa aturan yang sudah ada.
• Prioritas konten terjaga. Layar ponsel yang sempit tidak memberi ruang untuk dekorasi. Memulai dari sana memaksa kita memilih apa yang benar-benar penting, lalu hal-hal sekunder ditempatkan saat ruang memungkinkan.
• Lebih sedikit kerja sia-sia. Layout ponsel pada dasarnya lebih sederhana daripada desktop. Mobile first membuat browser ponsel hanya memproses gaya sederhana itu, alih-alih menyiapkan layout kompleks yang sebagian besar langsung ditimpa oleh media query.

Jebakan Desktop First #

Kebalikannya, desktop first menulis layout lengkap sebagai dasar, lalu memakai max-width untuk merapikan layar kecil. Pola yang dihasilkan adalah membatalkan: setiap media query harus menimpa aturan yang sudah diterapkan.

/* Desktop first: dasar untuk desktop, lalu banyak yang dibatalkan */
.panel-info {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 767px) {
  .panel-info {
    flex-direction: column;  /* batalkan baris */
    align-items: flex-start; /* batalkan penengahan */
    gap: 8px;                /* kecilkan jarak */
  }
}

Masalahnya bukan pada hasil akhir — hasilnya sama saja. Masalahnya ada pada biaya perawatan: setiap properti di dasar adalah kewajiban yang harus diingat dan dibatalkan di media query. Lupa membatalkan satu properti saja (misalnya align-items: center) menghasilkan panel ponsel yang penempatannya janggal. Semakin besar proyek, semakin banyak pembatalan menumpuk.

Contoh Konversi ke Mobile First #

Panel yang sama, strategi yang dibalik:

/* Mobile first: dasar untuk ponsel, tambah saat lebar */
.panel-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
@media (min-width: 768px) {
  .panel-info {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
}

Mari kita bandingkan isinya secara berdampingan:

Membaca dua potongan kode di atas juga terasa berbeda: versi mobile first dapat dijelaskan dalam satu kalimat — “menumpuk di ponsel, berdampingan di desktop” — sementara versi desktop first perlu dijelaskan sebagai “berdampingan, kecuali…”. Kalimat yang lebih pendek biasanya menandakan kode yang lebih mudah dipelihara.

Ringkasan #

Mobile first menempatkan gaya layar kecil sebagai dasar dan menambah penyempurnaan lewat media query min-width, sehingga cascade selalu bekerja ke arah penambahan, konten inti terjaga, dan browser ponsel tidak menyia-nyiakan kerja pada aturan yang akan ditimpa. Kebiasaan kecil ini membentuk seluruh struktur CSS responsif kita. Selanjutnya kita bahas lapisan di bawahnya: layout fluid yang mengembang dan menyusut secara halus tanpa menunggu media query.