Makna desain mobile-first, perbedaannya dari desain responsif, serta cara merancang dan membuat situs: urutan konten, area sentuh, breakpoint CSS min-width, gambar, pengujian, dan kiat untuk bisnis multi-lokasi.
Pertanyaan yang sering diajukan
Apa perbedaan desain mobile-first dan responsif?
Desain responsif berarti satu situs menyesuaikan tata letak dengan ukuran layar. Mobile-first adalah urutan desain dan pengodean: mulai dari layar kecil, lalu tambahkan tata letak untuk layar lebih besar. Situs mobile-first pasti responsif, tetapi situs responsif yang dibuat dengan pendekatan desktop-first sering menghasilkan tampilan ponsel sesak yang terasa seperti tambahan belakangan.
Mengapa mobile-first penting untuk SEO?
Google menggunakan pengindeksan mobile-first, artinya versi seluler terutama digunakan untuk mengindeks dan memberi peringkat halaman. Jika konten, judul, data terstruktur, atau tautan hilang di ponsel, Google mungkin tidak menemukannya.
Breakpoint apa yang perlu dipakai untuk situs mobile-first?
Biarkan konten yang menentukan: lebarkan browser sampai tata letak terasa terlalu renggang, lalu tambahkan breakpoint di sana. Titik awal umum sekitar 640px, 768px, 1024px, dan 1280px; banyak kerangka kerja CSS menggunakannya sebagai kueri media min-width.
Seberapa besar tombol di ponsel?
WCAG 2.2 menetapkan ukuran sasaran minimum 24 × 24 piksel CSS (level AA) dan merekomendasikan 44 × 44 (level AAA). Pedoman Apple menggunakan 44 poin dan pedoman Material Google memakai 48dp. Usahakan tombol utama dan tautan menu sekitar 44 sampai 48 piksel.
Bagaimana waralaba mengelola situs mobile-first?
Gunakan satu templat bersama dengan satu halaman per lokasi waralaba. Letakkan tombol telepon, petunjuk arah, jam buka, dan tindakan pemesanan atau pesanan khusus lokasi di bagian atas. Pengunjung ponsel yang mencari “dekat saya” ingin segera bertindak, jadi pencari lokasi dan tindakan utama harus mudah digunakan dengan satu ibu jari.
Jawaban singkat: desain web mobile-first berarti merancang dan membuat versi ponsel terlebih dahulu, lalu menambahkan tata letak tablet dan desktop saat layar melebar. Dalam kode, CSS dasar adalah tata letak ponsel; kueri media min-width menambahkan peningkatan. Pendekatan ini memaksa Anda menentukan hal terpenting di setiap halaman dan sesuai dengan cara Google mengindeks situs sekarang.
Mobile-first vs responsif: perbedaan sebenarnya
Orang sering memakai kedua istilah ini seolah sama, padahal menjawab pertanyaan berbeda.
Desain responsif
Desain mobile-first
Makna
Satu situs menyesuaikan tata letak dengan ukuran layar
Proses: mulai kecil, tingkatkan ke atas
Gaya CSS
Bisa max-width (perkecil desktop) atau min-width
min-width (perbesar dari ponsel)
Prioritas konten
Sering ditentukan di desktop lalu dipadatkan
Ditentukan untuk layar terkecil
Kegagalan umum
Konten tersembunyi, area ketuk kecil, halaman berat di ponsel
Tata letak desktop terasa kosong jika tidak ditingkatkan
Praktik terbaik adalah memakai keduanya: situs responsif yang dibangun dengan pendekatan mobile-first.
Langkah 1: Tentukan urutan konten di ponsel
Di layar sempit semua bagian tersusun satu kolom, jadi urutan adalah seluruh tata letaknya. Untuk tiap halaman, tuliskan nomor bagian sesuai urutan kebutuhan pengunjung ponsel.
Untuk beranda jasa lokal, urutannya bisa seperti ini:
Layanan dan lokasi (satu baris).
Tindakan utama: telepon atau pesan.
Bukti: peringkat, ulasan, atau klien yang dikenal.
Layanan dalam kartu pendek yang mudah diketuk.
Wilayah layanan atau lokasi.
Bukti tambahan: foto, sebelum dan sesudah.
FAQ.
Footer dengan jam, alamat, dan kontak.
Hal yang tidak layak masuk daftar ini mungkin tidak perlu ada di desktop juga.
Langkah 2: Rancang untuk ibu jari
Area sentuh: buat tombol dan tautan menu setinggi setidaknya 44 sampai 48 piksel, dengan jarak antaritem. Batas minimum WCAG 2.2 adalah 24 × 24 piksel CSS; itu batas bawah, bukan target.
Tindakan utama mudah dijangkau: bilah bawah yang menetap dengan “Telepon” dan “Pesan” cocok untuk bisnis lokal. Buat pendek agar tidak menutupi konten.
Navigasi: tombol menu yang membuka daftar layar penuh bisa digunakan. Batasi daftar menjadi lima hingga tujuh item dan letakkan tindakan utama di luar menu.
Formulir: satu kolom, label di atas bidang, dan jenis input yang sesuai (tel, email, number) agar ponsel menampilkan papan ketik yang tepat. Gunakan atribut autocomplete agar browser dapat mengisi nama dan alamat.
Teks: teks isi 16px lazimnya ukuran minimum dan mencegah Safari iOS memperbesar tampilan saat bidang formulir dipilih. Atur panjang baris agar nyaman dibaca dan kontras minimal 4.5:1 (WCAG AA).
Langkah 3: Buat dengan pendekatan mobile-first di kode
Mulai dengan tag viewport di bagian head setiap halaman:
Ukuran teks dan jarak yang fleksibel dengan clamp(), misalnya font-size: clamp(1.75rem, 5vw, 3rem) untuk judul, agar perlu lebih sedikit breakpoint.
Flexbox dan Grid dengan auto-fit: grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) membuat kolom hanya saat tersedia ruang.
Container query (didukung browser utama saat ini) memungkinkan kartu berubah berdasarkan lebar wadahnya, bukan seluruh layar; berguna untuk komponen guna ulang.
Kerangka utilitas seperti Tailwind CSS secara bawaan mobile-first: kelas tanpa awalan berlaku di semua ukuran, sedangkan awalan md: berlaku mulai lebar tersebut.
Pilih breakpoint berdasarkan saat konten mulai tidak pas, bukan berdasarkan model ponsel tertentu.
Langkah 4: Buat cepat di koneksi ponsel nyata
Ponsel memiliki prosesor lebih lambat dan jaringan yang kurang stabil dibanding laptop tempat Anda merancang. Core Web Vitals Google mengukurnya: Largest Contentful Paint (pemuatan), Interaction to Next Paint (respons), dan Cumulative Layout Shift (kestabilan tampilan).
Gambar responsif: gunakan srcset dan sizes agar ponsel mengunduh berkas kecil; pilih format modern seperti WebP atau AVIF.
Selalu tetapkan lebar dan tinggi (atau aspect-ratio) pada gambar dan sematan untuk mencegah pergeseran tata letak.
Muat lambat gambar di bawah layar dengan loading="lazy", tetapi jangan gunakan untuk gambar utama.
Batasi font ke satu atau dua keluarga dan beberapa ketebalan.
Kurangi skrip pihak ketiga: widget chat, pelacak, dan sematan sering memperlambat interaksi di ponsel. Muat belakangan atau hanya saat diperlukan.
Langkah 5: Tingkatkan untuk layar lebih besar
Setelah tata letak ponsel berfungsi, lebarkan browser dan tambahkan nilai, bukan sekadar ruang:
Kisi layanan dan produk beberapa kolom.
Bilah navigasi lengkap menggantikan tombol menu.
Teks dan gambar berdampingan.
Sidebar menetap untuk artikel panjang atau ringkasan pemesanan.
Efek hover, tetapi jangan sembunyikan informasi yang hanya muncul saat hover karena layar sentuh tidak memiliki hover.
Langkah 6: Uji seperti pengunjung
Gunakan mode perangkat di alat pengembang browser untuk pemeriksaan cepat pada lebar 360px, 390px, dan 414px, serta ukuran tablet.
Uji setidaknya pada satu Android nyata dan satu iPhone nyata karena emulator bisa melewatkan masalah gulir, papan ketik menutupi bidang, dan prosesor lambat.
Gunakan Lighthouse di Chrome DevTools dan PageSpeed Insights, yang menampilkan data lapangan dari pengguna Chrome nyata jika situs memiliki trafik cukup.
Putar perangkat ke mode lanskap dan pastikan bilah menetap tidak menutupi setengah layar.
Selesaikan tugas utama (pesan, beli, telepon) dengan satu ibu jari melalui data seluler.
Periksa Search Console untuk masalah seluler setelah peluncuran. Panduan Google Search Console menjelaskan bagian yang perlu dilihat.
Mobile-first untuk waralaba dan bisnis multi-lokasi
Situs waralaba dan banyak lokasi menghadapi masalah seluler khusus: mayoritas pengunjung datang dari pencarian “dekat saya” melalui ponsel dan ingin segera melihat informasi satu lokasi.
Pencari lokasi di bagian awal: “Gunakan lokasi saya” ditambah pencarian kode pos atau kota, dengan hasil berupa kartu yang dapat diketuk.
Satu halaman per lokasi memakai templat bersama: alamat, jam, telepon, tautan peta, layanan, dan tindakan pemesanan/pesanan setempat, dengan tombol telepon di atas.
Rincian lokal yang berbeda: setiap halaman perlu foto, staf, atau ulasan sendiri jika memungkinkan, bukan sekadar nama kota yang diganti.
Merek konsisten, kendali lokal: pemilik waralaba harus dapat memperbarui jam dan penawaran tanpa mengubah tata letak.
Data terstruktur: skema LocalBusiness di setiap halaman lokasi dengan nama, alamat, dan telepon yang benar.
Daftar periksa mobile-first
[ ] Tag meta viewport ada di setiap halaman.
[ ] Urutan konten disusun untuk satu kolom.
[ ] Tindakan utama terlihat di layar ponsel tanpa menggulir.
[ ] Area ketuk sekitar 44–48px dan memiliki jarak.
[ ] Teks isi 16px atau lebih dan kontras 4.5:1.
[ ] CSS dasar untuk ponsel; kueri min-width untuk layar lebih besar.
[ ] Gambar responsif dengan dimensi ditetapkan.
[ ] Konten dan data terstruktur sama di ponsel dan desktop.
[ ] Diuji di perangkat iOS dan Android nyata.
Buat situs tanpa memulai dari nol
Setiap situs yang dibuat We.Inc responsif sejak awal. Anda dapat melihat pratinjau tata letak ponsel di editor, lalu menyesuaikannya secara visual atau melalui kode. Jelajahi templat untuk melihat cara tata letak berubah menjadi satu kolom, atau jelaskan bisnis dan dapatkan draf awal untuk diuji di ponsel Anda.