Pendekatan Mobile-First vs Desktop-First

Desain web responsif membuat tata letak yang beradaptasi dengan ukuran layar apa pun, mulai dari ponsel cerdas kecil hingga monitor desktop besar, menggunakan grid fluida, gambar fleksibel, dan kueri media CSS.

Dalam pendekatan mengutamakan seluler, Anda menulis CSS dasar untuk layar kecil, lalu menggunakan kueri media min-width untuk menambahkan kerumitan secara bertahap pada layar yang lebih besar.

Dalam pendekatan mengutamakan desktop, Anda menulis CSS dasar untuk layar besar, lalu menggunakan kueri media max-width untuk menyesuaikannya pada layar yang lebih kecil.

Keuntungan mengutamakan seluler:

• Memaksa Anda memprioritaskan konten, yaitu menentukan hal yang paling penting pada layar kecil
• Peningkatan progresif — mulai dari yang sederhana, lalu tambahkan kerumitan
• Performa lebih baik — perangkat seluler hanya memuat gaya dasar, bukan gaya penimpaan
• Selaras dengan kenyataan bahwa sebagian besar lalu lintas web berasal dari perangkat seluler

Pendekatan mengutamakan seluler bekerja secara alami dengan kaskade CSS. Gaya dasar dimuat terlebih dahulu; gaya penimpaan untuk layar yang lebih besar ditambahkan kemudian melalui kueri media. Artinya, konflik spesifisitas CSS menjadi lebih sedikit.

Sebelum menulis CSS, tanyakan: konten apa yang dibutuhkan pengguna seluler? Susun HTML dan CSS dasar berdasarkan jawabannya. Pada layar yang lebih besar, Anda menyempurnakan pengalaman tersebut, bukan membangunnya ulang.

Peningkatan progresif (mengutamakan seluler): mulai dari fungsi minimum, lalu tambahkan peningkatan secara berlapis. Penurunan bertahap (mengutamakan desktop): bangun fitur yang lengkap, lalu sesuaikan untuk layar yang lebih kecil. Peningkatan progresif umumnya lebih tangguh.

Pengguna seluler menggunakan jari, bukan kursor tetikus yang presisi. Desain yang mengutamakan seluler secara alami menghasilkan target ketuk yang lebih besar, minimal 44x44px, serta jarak yang sesuai di antara elemen interaktif.

Navigasi yang mengutamakan seluler biasanya dimulai sebagai menu hamburger/laci, lalu diperluas menjadi bilah navigasi yang terlihat pada layar yang lebih besar:

Tetapkan ukuran fon yang nyaman dan mudah dibaca untuk seluler terlebih dahulu, lalu perbesar ukurannya pada layar yang lebih besar:

Desain responsif dapat berupa:

• Fluida: menggunakan satuan relatif dan beradaptasi dengan lancar pada ukuran apa pun
• Adaptif: berpindah di antara tata letak tetap pada titik henti tertentu

Praktik terbaik modern menggabungkan keduanya: tata letak fluida di antara titik henti, dengan tata letak yang berbeda pada setiap titik henti.

Jenis kueri media apa yang menjadi ciri pendekatan yang mengutamakan seluler?

Desain yang mengutamakan seluler menulis gaya dasar untuk perangkat seluler dan menggunakan kueri min-width untuk menyempurnakannya pada layar yang lebih besar. Pendekatan ini mendorong prioritas konten, performa yang lebih baik, dan kesesuaian dengan pola lalu lintas modern. Peningkatan progresif yang dimulai dari layar kecil menghasilkan desain responsif yang lebih tangguh dan mudah dipelihara.