Mobile First: Pengertian dan Cara Menerapkan di Website

Mobile First adalah cara merancang website dari layar HP dulu, lalu Anda perluas tata letak ke tablet dan desktop. Titik berangkatnya konten, tombol, dan urutan blok di layar sempit, kemudian layar lebar menerima ruang ekstra. Bukan desktop dulu, HP belakangan.

Tiap bulan kami masih menerima file desain 1440 piksel yang klien kecilkan ke HP. Lantaran itu, tombol WhatsApp ketutup header dan form lead terpotong. Calon klien kontraktor di Tangerang menutup tab karena mereka belanja lewat Android, bukan monitor kantor.

Apa Itu Mobile First

Orang menyebut Mobile First sebagai pendekatan kerja, Anda menulis struktur, copy, dan gaya dasar untuk HP. Setelah itu layar tablet dan desktop mendapat tambahan kolom, spasi, dan gambar lebih besar. Bukan “tema yang muat di HP” semata.

Luke Wroblewski mempopulerkan gagasan ini saat lalu lintas HP menyalip desktop, aturannya ketat karena ruang kecil memaksa prioritas. Jadi tombol utama mesti kelihatan, teks mesti terbaca tanpa cubit, dan navigasi jangan menelan setengah layar.

Yakni Mobile First adalah filter keputusan. Anda menanyai setiap blok: apakah blok ini layak di HP? Kalau tidak, jangan naik ke atas lipatan. Jadi letakkan belakangan, atau buang.

Kami melihat kebingungan nama, ada tool simulator berlabel serupa di hasil Google. Itu perangkat uji layar, bukan metode desain, kami bahas metode merancang dan menulis CSS, plus dampaknya pada indeks Google.

Definisi kerja yang kami pegang sempit, Mobile first adalah urutan: HP dulu, lalu progressive enhancement. Bukan slogan di proposal, bukan lencana tema, kalau CSS akar belum rapi di 360px, metode itu belum jalan.

Bukan Nama Tool dan Bukan Cuma Tampil di HP

Situs “responsif” bisa lolos tes lebar, namun prioritasnya masih desktop: hero 700 piksel, menu hover, dan tabel 12 kolom. Di HP semuanya menumpuk, ibu jari capek, itulah beda hasil visual dengan metode kerja.

Mobile First membalik urutan, Anda mengunci satu kolom, satu CTA, satu janji di atas. Desktop boleh menambah galeri dan angka, HP tidak menanggung beban itu di detik pertama.

Menurut kami, label “ramah seluler” di proposal vendor sering hanya berarti tema bootstrap. Cara web developer CodeF membedah brief klien: kami membuka Chrome dengan lebar 360 dulu. Baru 1280, urutan itu mengubah rapat desain.

Definisi kerja yang kami pakai: Mobile First = konten dan CSS dasar untuk HP, lalu progressive enhancement ke layar lebar. Bukan shrink, bukan “ada media query lalu selesai”.

Memang banyak klien memakai kata yang sama untuk tiga hal berbeda, mereka bilang “sudah HP” padahal hanya preview DevTools. Mereka bilang “responsif” padahal grid desktop yang menyusut, mereka bilang “lolos tes Google” padahal CTA masih hover. Tiga klaim itu bukan satu metode.

Mengapa Mobile First Dipakai di Website Indonesia

Porsi trafik HP di situs UMKM-korporat Indonesia hampir selalu mayoritas, orang bandingkan harga genteng di angkutan. Mereka buka katalog klinik di ruang tunggu, mereka ketik WhatsApp sales dari satu tangan.

Lantaran itu, beranda yang indah di iMac tapi berat di Android 4 GB RAM akan kalah. Gambar 3 MB, slider otomatis, dan font 13 piksel mengusir pengunjung sebelum CTA.

Roadmap skill frontend di Indonesia pun sudah menaruh media query di tahap awal. Anda bisa menelusuri urutan belajar membuat website yang menempatkan unit rem, vw, dan breakpoint setelah HTML dasar. Itu sinyal: layar kecil bukan add-on.

WhatsApp sebagai saluran closing memperkuat pola ini, tombol “Chat” di HP mesti di zona ibu jari. Bukan di footer yang baru kelihatan setelah scroll 8 layar, nomor 0821-2345-076 tidak kami tulis mentah di sini. Pola CTA-nya yang kami bahas.

Sementara koneksi 4G di pinggiran kota tidak ramah pada pesta visual, desainer di kantor memakai Wi-Fi kantor. Pengunjung memakai kuota, dua dunia itu jarang ketemu di file Figma, kecuali Anda memaksa preview 360 di rapat pertama.

Perilaku Belanja lewat HP

Calon klien pabrik di Cikarang sering membuka compro saat rapat, layar 6 inci. Data seluler, mereka mencari alamat, sertifikat, dan portofolio proyek. Kalau tiga hal itu terpendam di mega menu hover, mereka anggap perusahaan itu tidak siap.

Meski staf internal masih memakai desktop, pengunjung pertama hampir selalu HP. Keputusan “lanjut telepon atau tidak” terjadi di sana. Mobile First menyesuaikan fakta itu, bukan selera desainer yang kerja di monitor 27 inci.

Ternyata banyak brief klien masih mengirim referensi desktop, moodboard Dribbble lebar. Kami minta versi HP di hari yang sama, kalau tidak ada, kami susun wireframe 360 dulu. Klien baru sadar CTA-nya terlalu banyak.

Data APJII dari tahun-tahun terakhir menempatkan HP sebagai perangkat utama akses internet rumah tangga. Itu bukan berita baru, yang sering tertinggal adalah file desain, tim marketing mengirim banner 1920×600, tim web menempelkannya utuh. Di HP, logo perusahaan setinggi 12 piksel, nama PT tidak terbaca, sales bilang “situs kami aneh”.

Koneksi 4G di pinggiran Tangerang atau Cilegon tidak ramah pada slider 5 MB. Mobile First memaksa Anda memilih satu aset: foto pabrik, kalimat klaim, dan tombol. Desktop boleh menambah denah dan angka omzet, HP menolak pesta visual itu di detik pertama.

Form lead 14 field di HP adalah hukuman, orang mengetik di angkutan. Mereka menyerah di field “jabatan”, lalu sales menyalahkan iklan, padahal halaman itu yang mengusir.

Rupanya pola itu berulang di klinik, kontraktor, dan distributor, bukan karena “rakyat tidak paham desain”. Lantaran brief masih lahir dari layar lebar, Anda membalik urutan brief, baru CSS-nya ikut rapi.

Mobile First vs Responsive vs Mobile Friendly vs Desktop First

Empat istilah ini sering tertukar di rapat, padahal objeknya beda: metode, teknik, hasil tes, dan kebiasaan lama. Campur aduk itu bikin vendor mengaku “sudah HP” padahal hanya menyusutkan grid desktop.

Desain responsif artinya tata letak menyesuaikan lebar, titik awalnya bebas. Anda bisa menulis CSS desktop dulu, lalu max-width untuk HP, hasilnya tetap “responsif”. Metode kerjanya desktop first.

Bandingkan dengan layout website modern yang menyusun prioritas, bukan menumpuk menu. Itu dekat dengan semangat Mobile First, walau kata “responsif” saja tidak menjamin urutan kerja yang sama.

Kapan Desktop First Masih Masuk Akal

Dashboard gudang dengan tabel 20 kolom memang hidup di desktop, operator pabrik jarang input stok lewat HP. Di sini kami tidak memaksa satu kolom, kami pisah: app internal desktop first. Situs pemasaran tetap Mobile First.

Namun landing iklan Meta yang pengunjung buka 95% di HP, lalu masih memakai hover mega menu, itu salah pilih metode. Bukan “selera”. Itu salah sasaran perangkat.

Adaptive (satu URL, beberapa template kaku) jarang kami rekomendasikan untuk compro, biaya dobel. Isi mudah timpang, responsive plus Mobile First cukup untuk hampir semua situs perusahaan.

Jadi ingat rumusnya, responsive = teknik lentur, Mobile First = urutan kerja, Mobile friendly = nilai tes. Desktop first = kebiasaan monitor, empat hal itu bisa bertumpuk, bisa juga bertentangan.

Kami pernah meninjau situs distributor alat berat, di desktop, katalog 4 kolom terasa “premium”. Di HP, kartu produk terpotong harga, tombol “minta penawaran” ada di hover. Nihil, mereka sudah membayar tema “responsive”, metode kerjanya tetap desktop first.

Tes mobile friendly Google tidak menangkap itu, ia hanya melihat viewport dan ukuran teks. CTA dan harga tidak masuk penilaian, jangan puas dengan lencana itu, buka HP staf sales, suruh mereka pesan. Itu ujian yang jujur.

Walau lencana hijau terasa menenangkan marketing, ibu jari pengunjung tidak peduli, mereka hanya ingin harga, foto proyek, dan tombol chat. Kalau tiga itu gagal, tes apa pun hanya laporan internal.

Cara Kerja Mobile First di CSS (min-width, bukan max-width)

Pola CSS-nya sederhana, gaya di akar file berlaku untuk HP. Media query min-width menambah aturan saat layar melewati ambang, arah terbalik memakai max-width sebagai “perbaikan HP”.

Desktop first menulis layout lebar di akar, lalu max-width “memperbaiki” HP, HP jadi pengecualian. Override menumpuk. Bug rapat tombol muncul di 400px, hilang di 401px. Makanya sulit Anda lacak.

Framework CSS modern sudah condong ke pola HP dulu. Perbandingan Bootstrap versus Tailwind memperlihatkan grid dan prefix yang mengasumsikan layar kecil sebagai default. Itu bukan jaminan UX, itu hanya arah CSS.

Agar arah tetap terbaca manusia, kami baca file dari atas, aturan tanpa query mesti sudah cukup untuk satu kolom. Query hanya menambah kolom, spasi, atau gambar. Kalau Anda tidak bisa men-screenshot 360px dari CSS akar saja, metode Anda belum Mobile First.

Contoh CSS min-width

Berikut potongan yang kami pakai di beranda jasa, dasarnya HP, tablet mendapat spasi, desktop mendapat dua kolom.

.hero { padding: 16px; font-size: 28px; }
.cta { width: 100%; min-height: 44px; }
@media (min-width: 768px) {
  .hero { padding: 32px; font-size: 40px; }
  .cta { width: auto; }
}
@media (min-width: 1024px) {
  .hero { display: grid; grid-template-columns: 1fr 1fr; }
}

Tanpa query, hero tetap rapi di 360px, query hanya menambah, itu progressive enhancement, Anda tidak “memperbaiki HP”. Anda memperkaya desktop.

Ambang 768 dan 1024 bukan dogma, ukur konten. Kartu harga 3 kolom mungkin butuh 1100, jangan copy breakpoint Bootstrap buta kalau isi Anda beda.

Dikarenakan banyak file warisan, kami sering menemui gaya HP tersembunyi di max-width: 767px. Akar file penuh aturan desktop, saat klien minta “tambah padding di HP”, orang menambah exception. File menggembung, bug muncul di 768px pas.

Setidaknya satu kali seminggu, buka DevTools 360 tanpa mengaktifkan query, kalau beranda sudah kacau, Anda sedang menambal desktop. Bukan membangun dari HP.

Pola Prefix Tailwind dan Grid Bootstrap

Tailwind: kelas tanpa prefix = HP, md:grid-cols-3 baru aktif di breakpoint md. Itu Mobile First, salah kaprah: menulis grid-cols-3 di akar, lalu max-md:grid-cols-1. Bisa jalan, arahnya sudah terbalik.

Bootstrap 4 ke atas: grid mobile-first, kolom col-12 di HP, col-md-6 di layar sedang. Override HP lewat kelas utilitas rapat sering menandakan desain masih berpikir desktop.

Viewport wajib ada, tanpa meta viewport, HP menampilkan versi “mini desktop”, semua metode di atas kalah.

<meta name="viewport" content="width=device-width, initial-scale=1">

Satu jebakan lagi: menulis gaya HP di dalam max-width: 767px, sementara akar file penuh aturan desktop. Itu desktop first yang menyamar, saat klien minta “tambah padding di HP”, Anda menambah exception. File menggembung, bug muncul di 768px pas.

Agar arah tetap HP dulu, kami review urutan di file, aturan tanpa query harus sudah rapi. Baru query, kalau Anda tidak bisa men-screenshot 360px dari CSS akar saja, metode Anda belum Mobile First.

Makanya kami menolak “nanti kami rapikan di HP” sebagai tahap terakhir, itu kalimat desktop first. Urutan kerja yang jujur: wireframe 360, CSS akar, baru min-width. Figma 1440 boleh hidup. Ia tidak boleh memimpin.

Prinsip Mobile First Design yang Sering Dilanggar

Prinsip kerjanya prioritas, satu layar HP menampung sedikit janji, tiga CTA di atas lipatan sama dengan nol CTA, jari bingung. Bounce naik.

Ukuran sentuh 44×44 piksel CSS adalah patokan praktis, tombol 28px dengan jarak 4px akan salah tap. Apalagi di bus yang berguncang, ini bukan selera UI, ini fisiologi.

Orang membahas masalah yang sama saat belajar tools UI/UX dan desain yang tidak ramah layar kecil. Popup besar menutup tombol tutup, tabel melebar. Itu gejala desain desktop yang orang paksa masuk HP.

Kendatipun moodboard kelihatan mahal, ibu jari tidak peduli. Mereka peduli apakah harga kelihatan dan apakah chat bisa Anda ketuk. Dua itu lolos, baru bicara gradasi dan animasi.

Tap Target dan Prioritas Konten

Thumb zone: bawah tengah mudah, pojok kanan atas sulit. Ikon hamburger di kiri atas masih lumayan, CTA utama jangan cuma di header kecil. Ulangi di badan, dekat harga atau portofolio.

Tipografi: body 16px minimum, line-height 1.5 ke atas, kontraktor sering memaksa font “elegan” 14px abu-abu, di layar murah, itu kabur. Kami tolak di review.

Gambar: satu foto proyek tajam lebih berguna daripada slider lima frame, slider mencuri LCP. HP menanggung decode, desktop first mencintai slider, Mobile First mencintai satu gambar yang jujur.

Navigasi: lima tautan di HP cukup, sisanya di halaman atau accordion. Mega menu 40 tautan adalah fantasi desktop, jangan wariskan ke 360px.

Trade-off jujur: halaman “semua jasa” yang padat di desktop akan terasa panjang di HP. Itu harga prioritas. Lebih baik panjang dan terbaca daripada pendek tapi sulit Anda ketuk.

Klinik di Bintaro sering ingin peta Google, 12 dokter, dan promo hari ini di hero. Di HP, peta menggeser CTA daftar, nama dokter tidak terbaca. Promo jadi gif berat, kami pilih: CTA janji, dua dokter unggulan, peta di bawah. Sisanya halaman dalam, klien protes sebentar, bounce turun.

UMKM fashion di Tanah Abang punya masalah lain, katalog 200 SKU. Filter warna di desktop enak, di HP, filter 8 dropdown membuat orang menyerah. Mobile First di sini berarti filter 3 chip: ukuran, harga, ready, detail filter pindah ke halaman koleksi. Stok tetap lengkap, jalan masuknya lebih pendek.

Sesungguhnya kami belum punya angka bounce untuk setiap niche. Dari klien Tangerang dan Bekasi, pola yang sama muncul: satu janji di atas, bukti di tengah, chat di zona ibu jari. Kalau Anda memaksa tujuh janji, jangan kaget orang pergi.

Mobile First Indexing Google — Apa Hubungannya dengan Desain

Indexing ini kebijakan crawl, Google memakai versi HP sebagai dokumen utama untuk indeks dan ranking. Bukan nama lain dari metode desain, keduanya bertemu di paritas konten.

Kalau alamat, harga, dan FAQ hanya ada di CSS desktop, crawler HP bisa tidak melihatnya. Peringkat halaman itu goyah, desain desktop-only merugikan indeks, meski “terlihat bagus di kantor”.

Skala tipe di HP ikut menentukan apakah teks kelihatan dan terbaca. Rujukan ukuran pada desain website perusahaan (H2 22–24px di HP, body 16–18px) cocok untuk baca cepat. Itu desain, dampaknya merembes ke crawl.

Rujukan resmi Google untuk situs mobile dan indexing ada di Search Central soal indexing versi HP. Definisi desain di kamus web ada di glosarium MDN untuk desain dari layar HP.

Manakala versi HP miskin, versi desktop kaya tidak menolong, Google membaca HP. Anda merancang untuk manusia di HP, dua kepentingan itu kebetulan selaras, asal paritas jujur.

Paritas Konten HP dan Desktop

Paritas artinya isi yang Anda ingin Google nilai harus ada di HTML versi HP. Bukan di tab yang hanya muncul setelah hover, bukan di kolom yang display:none di bawah 1024px.

Sembunyikan dekorasi, bukan data, sertifikat ISO yang hilang di HP = sertifikat hilang di indeks. Portofolio yang “lihat di desktop ya” = Google tidak melihat bukti kerja.

Structured data, canonical, dan hreflang harus sama secara niat, jangan versi HP menunjuk URL lain yang isinya lebih miskin. Itu jebakan situs m.example.com lama. Jangan ulangi di 2026.

Konten “tersembunyi di accordion” masih bisa Google indeks bila ada di HTML. Konten yang tidak pernah sampai ke DOM HP tidak. Beda itu kerap tertukar. Tab JavaScript yang hanya mengisi isi setelah klik di desktop, lalu di HP skripnya error, menghasilkan halaman kosong bagi crawler.

Peta situs dan tautan dalam juga ikut. Menu HP yang memotong 20 tautan footer berarti 20 URL kehilangan sinyal dari beranda. Kalau tautan itu penting, tampilkan di HP, kalau tidak penting, mengapa ada di desktop?

Kecepatan masih berpengaruh, namun jangan mencampur bahasan ini menjadi ulasan Core Web Vitals. Cukup: gambar sesuai lebar HP, tanpa slider otomatis, tanpa font berlebih, itu sudah menolong crawl dan manusia.

Sebelum rilis kampanye iklan, bandingkan view-source HP dan desktop untuk alamat, harga, dan FAQ. Kalau tiga itu timpang, indexing akan menghukum halaman yang “indah di kantor”.

Menerapkan Mobile First pada Website Perusahaan

Compro bukan galeri Dribbble. Pengunjung mencari bukti: siapa Anda, apa yang Anda kerjakan, di mana, bagaimana menghubungi. Di HP, empat hal itu harus berurutan tanpa tebak.

Urutan di brief jasa website perusahaan: janji singkat, bukti proyek, sertifikat, CTA WhatsApp, alamat. Visi-misi panjang turun ke bawah, jangan taruh manifesto di atas lipatan HP.

Hero 12 kolom plus video autoplay adalah warisan desktop, di HP, video 20 MB membunuh kunjungan. Ganti satu foto proyek, teks di atas foto harus kontras, tombol 44px.

Nyatanya banyak compro masih membuka dengan slogan kosong, “Solusi terdepan” tidak menjawab siapa dan di mana. Ganti dengan satu kalimat kerja: jenis proyek, kota, dan cara chat, desktop boleh menambah angka. HP minta kejelasan dulu.

Urutan Blok Beranda Perusahaan

Halaman jasa: satu masalah, satu hasil, satu bukti, satu CTA, jangan empat paket harga berjajar. Susun vertikal, harga boleh, asal tidak memaksa cubit horizontal.

Portofolio: kartu satu kolom, nama proyek, lokasi, satu foto. Detail di halaman dalam, filter kategori di HP memakai chips, bukan dropdown kecil yang sulit.

Form: sedikit field, nama, WhatsApp, kota, kirim. Captcha berat dan 12 kolom “jabatan” adalah fantasi CRM, isi lengkap bisa menyusul di obrolan.

Sejak 2009 kami melihat compro yang “mewah di kantor” gagal di lapangan. Bukan soal warna, lantaran urutan blok, Mobile First di perusahaan artinya urutan bisnis, bukan cuma grid 12 kolom.

Tim CodeF membuka preview 360px di rapat pertama, klien kadang kaget, menu favoritnya tidak muat, itu momen berguna. Lebih baik kaget di wireframe daripada setelah iklan jalan.

Halaman kontak perusahaan: peta fullscreen di HP menutup formulir, orang tidak bisa kirim pesan. Geser peta ke bawah, form dulu, peta belakangan, staf reception akan berterima kasih.

Halaman karir: tabel lowongan 8 kolom, di HP jadi hieroglif. Ubah jadi kartu: posisi, lokasi, deadline, tombol lamar, HRD tetap dapat data. Pelamar tidak marah.

Mulanya klien ingin semua sertifikat di hero, kami turunkan ke strip kecil, lalu halaman legal. HP punya napas, Google tetap membaca halaman legal, desktop boleh memajang lencana lebih besar, urutannya jangan terbalik.

Tailwind, Bootstrap, dan WordPress: Apa yang Sudah Mobile First

Alat bisa menolong, alat tidak mengganti keputusan isi, tema WordPress “responsive” tetap bisa merender popup penuh, slider, dan header 180px. Page builder menaruh 8 widget di atas, HP menderita.

Tailwind dan Bootstrap sudah Mobile First di lapisan CSS, page builder yang mengeluarkan max-width acak bisa membalik arah itu. Inspeksi computed style di 360px, kalau Anda melihat override bertingkat, desainnya masih desktop.

Skenario performa framework di artikel Next.js versus PHP menyinggung LCP dan interaksi. Itu lapisan mesin, Mobile First adalah lapisan prioritas konten, keduanya saling menolong, tidak saling menggantikan.

Pastinya orang menyamakan “pakai Tailwind” dengan “sudah Mobile First”, kelas tanpa prefix memang HP. Isi widget yang Anda taruh tetap bisa desktop, framework tidak menulis brief Anda.

Tema WordPress yang Sudah Responsif

Cek tiga hal tema. Satu: header di HP tidak makan 40% layar. Dua: pengunjung bisa menutup menu. Tiga: gambar produk tidak overflow. Lolos tiga itu baru bicara warna.

Plugin popup “jangan pergi” di HP hampir selalu salah tap, tombol silang 16px. Overlay gelap, itu musuh konversi, bukan “lead magnet”.

Blok Gutenberg atau elemen page builder: set default mobile. Jangan desain desktop di kanvas 1200 lalu menekan tombol “preview HP” di menit terakhir. Urutan itu desktop first, apapun frameworknya.

Custom theme dari freelancer yang sadar min-width sering lebih rapi daripada template marketplace penuh demo slider. Harganya beda, hasil HP-nya beda, itu trade-off anggaran, bukan dogma.

Tadinya kami kira ganti tema cukup, ternyata isi halaman builder yang menumpuk kolom. Ganti tema tanpa ganti urutan blok hanya mengganti kulit, HP tetap sesak.

Utamanya, matikan demo slider sebelum klien “jatuh cinta”, tunjukkan beranda 360 dengan satu foto. Kalau mereka menolak, Anda sedang berdebat metode, bukan selera warna.

Kesalahan Umum Saat Mengaku Sudah Mobile First

Kesalahan satu: menyamakan “ada hamburger” dengan metode ini, hamburger hanya ikon, isi menunya masih 40 tautan tanpa prioritas.

Kesalahan dua: hover-only, dropdown yang hanya muncul saat mouse, di HP tidak ada hover, cabang menu hilang. Google pun bisa kehilangan tautan itu.

Pola yang sama muncul saat orang menulis syarat situs. Bullet “Mobile-First & Fast Loading” di artikel fitur website marketing perumahan tepat sebagai syarat. Namun syarat itu kosong kalau pelaksanaannya masih slider desktop.

Biarpun proposal memuat kata Mobile First sepuluh kali, CSS max-width di akar file membongkar klaim itu. Baca file, jangan baca slide.

Hover, Popup, dan Gambar Berat

Popup penuh layar di kunjungan pertama menutup harga, pengunjung menekan silang, sering mengenai tautan di bawahnya, mereka pergi marah.

Tabel harga tanpa gulir memotong tujuh kolom paket, di HP orang kira paket “tidak lengkap”. Padahal CSS tidak memberi overflow-x: auto.

Ikon memakai gambar 4000px membuat Android mid-range lambat, Anda merasa “kualitas”, pengunjung merasa situs rusak.

Alamat di JPG gagal, Google tidak membaca teks dalam gambar, HP memperbesar JPG jadi pecah, tulis alamat sebagai teks.

Nomor tanpa tautan tel: menghalangi tap-to-call, di Indonesia ini dosa kecil yang mahal.

Sticky bar ganda (chat, cookie, CTA iklan, header) menutup 40% layar, Google melihat teks. Manusia tidak bisa tap, Anda “lolos tes” dan tetap kalah.

Font ikon tanpa label hanya kaca pembesar, di HP, itu cari atau zoom? Tambah teks, hemat tebak-tebakan.

Seterusnya, video autoplay di hero compro, desktop “terasa hidup”, HP menghabiskan kuota sebelum nama perusahaan terbaca, ganti poster diam. Video di halaman proyek, setelah orang sudah tertarik.

Sewaktu sales mengeluh “iklan mahal, lead sepi”, buka HP mereka, sering CTA tertutup widget. Bukan algoritma, itu desain yang masih takut menghapus elemen.

Checklist Ringkas sebelum Rilis

Uji di perangkat nyata, emulator Chrome berguna. Ia tidak menggantikan Android 4 GB di jaringan 4G, tim sales yang kerja di lapangan adalah tester termurah. Minta mereka buka beranda 30 detik, catat di mana mereka tersendat.

Arsitektur HP sebagai syarat, bukan hiasan, juga muncul di tulisan website sales mobil. Syarat loading dan tap itu bisa Anda pinjam ke niche lain, jangan pinjam slider showroom 20 foto ke compro hukum. Konteksnya beda.

Akhirnya checklist ini bukan lencana, itu kebiasaan rapat, HP dulu, desktop menyusul. Kalau urutan itu terbalik, CSS semodern apa pun hanya menutupi brief yang salah.

Uji di Perangkat Nyata

1. Pertama, buka 360px: CTA utama kelihatan tanpa scroll.
2. Kemudian tap semua menu; tidak ada item yang hanya hidup di hover.
3. Setelah itu, form kirim jalan; field tidak terpotong keyboard.
4. Selanjutnya gambar proyek < 200 KB setelah kompres, tetap tajam di HP.
5. Yaitu teks alamat dan harga ada di HTML, bukan di foto.
6. Agar viewport benar, cek meta viewport; jangan ada zoom aneh saat rotasi.
7. Berikut tombol WhatsApp 44px; tidak tertutup chat widget lain.
8. Setidaknya isi penting sama di HP dan desktop; tidak ada “lihat di PC”.
9. Terakhir, Anda gulir tabel menyamping, atau ubah jadi kartu vertikal.
10. Memang uji di Android nyata 10 detik first paint terasa wajar.

Alat uji “mobile friendly” Google boleh Anda pakai sebagai lampu kuning. Jangan jadikan satu-satunya gerbang. Lolos tes tapi CTA tertutup sticky bar tetap gagal bisnis.

Setidaknya satu orang di luar tim desain harus mencoba situs di HP pribadinya. Mereka tidak punya kesetiaan pada wireframe Anda, reaksi mereka lebih jujur daripada scorecard.

Jadi Mobile First bukan lencana tema, itu urutan kerja yang Anda ulangi tiap halaman baru. HP dulu, desktop menyusul, kalau urutan itu terbalik, CSS semodern apa pun hanya menutupi brief yang salah.

Simpan preset lebar 360, 390, dan 768 di DevTools, buka tiga lebar itu sebelum presentasi klien. Kalau 360 sudah rapi, 1280 hampir selalu tinggal menambah napas, kalau 1280 dulu yang rapi, 360 hampir selalu darurat.

Dokumentasikan keputusan: CTA utama apa, tautan HP yang boleh hidup, gambar yang boleh naik. Brief itu lebih berharga daripada file Figma 40 frame desktop, frame itu boleh. Urutannya jangan terbalik.

Kelak halaman baru akan lahir dari kampanye, ulangi urutan yang sama. Jangan wariskan grid 12 kolom “karena halaman lama begitu”, setiap URL adalah kesempatan merapikan prioritas.