Desain Web Mobile-First: Makna dan Cara Menerapkannya

Desain web mobile-first berarti merancang untuk layar ponsel terlebih dahulu, lalu menambahkan tata letak untuk layar lebih besar. Pelajari dampak, pertimbangan bisnis kecil, contoh terisi, dan daftar periksa.

Desain web mobile-first berarti merencanakan dan membuat setiap halaman untuk layar ponsel kecil terlebih dahulu, lalu menambahkan kolom dan tata letak tambahan seiring layar melebar. Pendekatan ini memaksa Anda menentukan hal terpenting karena ponsel hanya menampilkan satu hal pada satu waktu. Pendekatan ini juga sesuai dengan cara Google melihat situs: Google sebagian besar menggunakan versi seluler halaman untuk pengindeksan dan peringkat.

Mobile-first dibandingkan dengan desain "responsif"

Desain responsif adalah teknik: satu halaman dengan tata letak yang menyesuaikan ukuran layar menggunakan tag viewport dan kueri media. Mobile-first adalah urutan perancangan. Situs responsif yang dimulai dari desktop menyusutkan tata letak lebar, sedangkan situs mobile-first dimulai dari layar sempit lalu dikembangkan. Keduanya dapat responsif; mobile-first biasanya menghasilkan tampilan ponsel yang lebih rapi.

Kriteria keputusan untuk bisnis kecil

PertanyaanPilihan mobile-firstPertimbangan
Untuk apa layar pertama digunakan?Nama, layanan, lokasi, dan satu tombolRuang untuk slogan dan gambar besar lebih sedikit
Tindakan utamaTombol telepon atau formulir singkat yang mudah dijangkau ibu jariFormulir panjang sering ditinggalkan di ponsel; minta informasi lebih sedikit
NavigasiSedikit tautan utama; tombol menu di layar kecilMenu tersembunyi mudah terlewat, jadi ulangi tautan penting di halaman
GambarDikompres dan disesuaikan ukuran layarFoto sangat besar memperlambat ponsel saat menggunakan data seluler
Tabel dan konten lebarSusun menjadi kartu atau gulir di dalam kotaknya sendiriMemerlukan lebih banyak pekerjaan desain daripada tabel desktop

Area ketuk dan ukuran teks juga merupakan masalah aksesibilitas; ukuran target WCAG 2.2 menetapkan batas minimum 24 kali 24 piksel CSS.

Contoh pengerjaan (ilustrasi berlabel)

Toko roti fiktif, "Flour Lane Bakery", merencanakan beranda mulai dari tampilan ponsel. Ini bukan bisnis nyata; tidak ada hasil yang diklaim.

Layar ponsel 1: "Flour Lane Bakery - roti sourdough dan kue, Leith"
                tombol: "Pesan kue" | tautan: "Jam buka hari ini"
Layar ponsel 2: tiga kartu: Roti / Kue perayaan / Grosir
Layar ponsel 3: langkah pemesanan (pilih, tentukan tanggal, bayar uang muka saat pengambilan)
Layar ponsel 4: alamat, tautan peta, jam buka, telepon (ketuk untuk menelepon)
Tablet+:       kartu menjadi 3 kolom; jam buka di samping peta
Desktop+:      header menampilkan semua tautan; hero menambahkan foto kedua
Hapus dari ponsel: grid Instagram (cukup tautkan), cerita panjang (halaman Tentang)
Contoh desain situs toko roti yang dibuat dengan We.Inc
Contoh desain toko roti yang dibuat dengan We.Inc (desain templat, bukan situs pelanggan).
Pengalih perangkat di pembuat situs We.Inc yang menampilkan pratinjau situs pada lebar ponsel
Melihat pratinjau desain pada lebar ponsel di pembuat situs We.Inc.

Daftar periksa mobile-first untuk disalin

[ ] Satu tindakan utama terlihat di layar ponsel pertama
[ ] Nama bisnis, layanan, dan lokasi tampak di layar pertama
[ ] Nomor telepon berupa tautan yang dapat diketuk
[ ] Teks minimal 16px; tidak perlu mencubit untuk memperbesar agar terbaca
[ ] Tombol dan tautan mudah diketuk serta memiliki jarak yang cukup
[ ] Formulir hanya meminta kolom yang diperlukan; papan ketik sesuai (telepon, email)
[ ] Gambar dikompres dan ukurannya pas; tidak ada elemen lebih lebar dari layar
[ ] Tidak ada guliran horizontal pada lebar 360px
[ ] Menu dapat digunakan dengan satu ibu jari; tautan penting diulangi di halaman
[ ] Diuji di ponsel sungguhan dengan data seluler, bukan hanya di jendela desktop

Batasan yang perlu diketahui

Langkah berikutnya

Mulai dari templat bisnis di pembuat situs web We.Inc; templatnya responsif dan Anda dapat melihat pratinjau ponsel, tablet, serta desktop. Kemudian jalankan penilai situs web. Paket Free menyediakan hingga 3 situs templat dengan alamat we.inc (tanpa kredit AI dan domain khusus); Starter seharga $20/bulan menambahkan pembuatan berbantuan AI dan domain khusus (harga). Ingin menganggarkan biaya pembuatan? Gunakan kalkulator biaya situs web.

Mulai buat situs web bisnis Anda

Pertanyaan yang sering diajukan

Apa itu desain web mobile-first?

Merancang setiap halaman untuk layar ponsel terlebih dahulu, lalu menambahkan tata letak untuk layar yang lebih besar. Cara ini menjaga konten dan tindakan paling penting tetap berada di bagian atas pada ponsel.

Apakah mobile-first sama dengan desain responsif?

Tidak. Desain responsif adalah teknik agar satu halaman dapat menyesuaikan berbagai ukuran layar. Mobile-first adalah urutan perancangan: layar terkecil terlebih dahulu.

Apakah Google menggunakan versi seluler situs saya?

Ya. Google mengatakan bahwa mereka sebagian besar menggunakan konten versi seluler situs untuk pengindeksan dan peringkat.

Mulai gratis · Tanpa kartu kredit

Product

Who It's For

Features

Resources

Company

View Sitemap