Luke Wroblewski memberi nama pada praktik ini pada tahun 2009, tetapi logikanya sudah mendesak. Ponsel telah menjadi cara utama orang mengakses web, dan mendesain tata letak desktop terlebih dahulu memaksa desainer untuk memasukkan kompleksitas ke layar kecil di kemudian hari. Pendekatan mobile-first membalik urutan tersebut. Mulailah dengan layar terkecil, tentukan apa yang paling penting, lalu perluas ke atas ke tata letak tablet dan desktop.

Batasan ini produktif. Tampilan yang sempit memaksa prioritas. Navigasi menyusut menjadi menu. Konten berpindah ke satu kolom. Setiap fitur harus membenarkan ruangnya. Desainer membuat sketsa target sentuh yang ramah ibu jari, mempertimbangkan penggunaan satu tangan, dan merencanakan koneksi yang lambat. Ketika desain berkembang ke layar yang lebih besar, ruang ekstra digunakan untuk ruang bernapas dan panel sekunder daripada dijejali dengan kekacauan baru.

Praktik inti

• Mulailah membuat wireframe dengan lebar yang sama dengan lebar layar ponsel.
• Prioritaskan hierarki konten tanpa kompromi.
• Target sentuhan desain minimal 44 piksel.
• Tingkatkan skala ke tablet dan desktop terakhir.

Desain responsif dan mobile-first seringkali berjalan beriringan. Mobile-first menetapkan prioritas. Desain responsif menangani adaptasi di berbagai breakpoint.