Dengan lebih dari 60% traffic internet berasal dari perangkat mobile, pendekatan mobile-first bukan lagi pilihan — ini adalah keharusan. Artikel ini membahas trend desain mobile-first terkini.
Apa itu Mobile-First?
Mobile-first adalah pendekatan desain yang dimulai dari ukuran layar terkecil (smartphone), kemudian secara progresif meningkatkan layout untuk layar yang lebih besar (tablet, desktop).
Prinsip Utama
1. Content First
Di layar kecil, setiap pixel berharga. Prioritaskan konten yang paling penting dan hilangkan elemen yang tidak esensial. Pengguna mobile menginginkan informasi dengan cepat.
2. Touch-Friendly
Ukuran minimum target sentuh adalah 44x44px (rekomendasi Apple) atau 48x48dp (rekomendasi Google). Berikan jarak yang cukup antar elemen interaktif.
3. Performance Budget
Set batasan ukuran halaman. Target idealnya:
- Total page weight: di bawah 1MB
- Time to Interactive: di bawah 3 detik
- Jumlah HTTP request: di bawah 50
CSS Modern untuk Mobile-First
/* Mobile styles (default) */
.container {
padding: 16px;
font-size: 16px;
}
/* Tablet */
@media (min-width: 768px) {
.container {
padding: 24px;
max-width: 720px;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
padding: 32px;
max-width: 1200px;
}
}Tools yang Berguna
- Chrome DevTools — Device emulation dan performance profiling
- PageSpeed Insights — Analisis performa mobile
- Mobile-Friendly Test — Validasi mobile-friendliness