Penguji Keramahan Seluler

Apa yang diperiksa oleh pengujian

Konfigurasi viewport

Apakah ada model <meta name="viewport" content="width=device-width, initial-scale=1">? Jika tidak, peramban seluler akan menampilkan tampilan seolah telepon memiliki lebar layar setara dengan komputer desktop dan akan menyusut agar sesuai dengan ukuran layar, sehingga teks yang ditampilkan menjadi sangat kecil.

Ukuran teks

Setiap teks yang ditampilkan dengan ukuran kurang dari 12 px akan ditandai, sulit dibaca di ponsel tanpa fitur pinch-zoom. Banyak panduan gaya merekomendasikan ukuran huruf minimal 16 px untuk teks utama. Keterangan yang sangat kecil masih dapat diterima; namun, teks utama dengan ukuran 11 px tidak disarankan.

Ukuran target tekanan

– Tombol, tautan, dan kontrol formulir harus memiliki ukuran minimal 48×48 px (sesuai pedoman aksesibilitas seluler Google/W3C). Sasaran yang lebih kecil sulit disentuh secara akurat dengan ibu jari dan akan ditandai.

Jarak antar titik target

– Target yang berjarak lebih dekat dari 8 px dari target sekitarnya dapat menyebabkan tekanan yang tidak tepat; masing-masing ditandai secara terpisah.

Gulir horizontal

– Konten yang melebihi ukuran viewport memaksa pengguna melakukan geseran horizontal, sehingga menghasilkan pengalaman pengguna (UX) yang buruk di perangkat seluler. Hal ini umumnya disebabkan oleh gambar yang tidak memiliki kode identifikasi max-width: 100% atau tabel yang tidak dapat menyesuaikan tampilannya secara otomatis (reflow).

Plugin yang tidak didukung

Flash, Silverlight, dan ActiveX tidak dapat digunakan di ponsel. Situs lama terkadang masih menggunakannya.

Pemuatan font

Font web yang sangat besar dan menyebabkan proses rendering terhenti selama beberapa detik akan ditandai.

Mengapa hal ini masih penting

Google telah menghentikan uji coba khusus untuk perangkat seluler pada Desember 2023, namun tingkat kecocokan situs dengan perangkat seluler tetap menjadi indikator langsung dalam peringkat melalui metrik Core Web Vitals dan pengalaman pengguna halaman. Pendekatan indeksasi “mobile-first” berarti Google memindai situs Anda sebagaimana ditampilkan di ponsel; hal-hal yang tidak optimal saat digunakan di perangkat seluler juga akan muncul dalam peringkat versi desktop.

Perbaikan Umum

• Tambahkan meta viewport ke <head> dan <meta name="viewport" content="width=device-width, initial-scale=1">.
• CSS Responsif melalui kueri media: @media (max-width: 768px) { ... }.
• Flexbox dan Grid, bukan tata letak berlebar tetap.
• Atur gambar max-width: 100%; height: auto agar ukurannya menyusut seiring perubahan ukuran viewport.
• Buat tabel dapat digulir pada layar kecil: gunakan format wrapping <div style="overflow-x: auto">.
• Gunakan rem atau em untuk penentuan ukuran teks agar skala sesuai preferensi pengguna dapat berfungsi dengan baik.

Apa yang tidak terdeteksi oleh pengujian

– Kinerja pada perangkat keras nyata: Ponsel Android kelas bawah yang menggunakan jaringan 3G akan mengalami keterlambatan yang tidak disimulasikan oleh alat pengujian ini. Gunakan Lighthouse untuk mengukur kinerja secara akurat.

• Interaksi sentuh: Daftar drop-down yang hanya dapat digunakan saat kursor di atasnya dan berfungsi secara otomatis saat disentuh perlu diuji secara manual pada perangkat nyata. – Aksesibilitas yang melampaui keterbatasan ukuran layar perangkat seluler. Gunakan fitur kontras, dukungan pembaca layar, dan navigasi menggunakan keyboard dengan alat aksesibilitas khusus.
• Kesalahan JavaScript pada peramban khusus perangkat seluler. Safari di iOS terkadang berperilaku berbeda dibandingkan versi WebKit lainnya.