Pengguna perangkat seluler smartphone dan tablet terus mengalami peningkatan. Smartphone dan tablet lebih mudah dibawa kemana pun dan dapat mengakses internet melalui mobile data dimana pun. Pada tahun 2016, pencarian di internet melalui perangkat seluler telah melampui pencarian melalui PC dan laptop. Diprediksi, pencarian melalui perangkat seluler akan terus meningkat dari waktu ke waktu.
Semua situs (blog atau website) perlu menyambut perubahan ini dan menyesuaikan pergeseran pencarian di internet melalui perangkat seluler. Semua situs harus sudah menerapkan desain yang responsif. Ini artinya situs harus dapat ditampilkan dengan baik di berbagai ukuran layar perangkat, termasuk perangkat seluler. Tampilan situs harus dapat melakukan perubahan dinamis secara otomatis untuk menyesuaikan ukuran layar perangkat yang berbeda.
Situs dengan desain responsif dapat memberikan pengalaman berselancar yang optimal di berbagai perangkat. Anda bisa bayangkan bila situs tidak responsif atau tidak ramah perangkat seluler (mobile-friendly). Situs yang tidak responsif tidak dapat memberi user experience yang baik dan tentu akan ditinggalkan pengunjung (visitor). Anda akan kehilangan potensi konversi seperti klik iklan, penjualan, pengisian survei online dan sebagainya.
Lalu, bagaimana cara menguji bahwa situs yang Anda buat responsif dan ditampilkan dengan baik di perangkat seluler (mobile-friendly)? Bila situs Anda sudah online, Anda dapat menguji menggunakan tool online gratis. Ada cukup banyak tool online yang bisa Anda gunakan seperti Mobile-Friendly Test dari Google dan Mobile Friendliness Test Tool dari Microsoft Bing. Alternatif lainnya adalah Anda dapat menggunakan emulator browser seluler di Google Chrome, Mozilla Firefox atau Microsoft Edge.
Emulator browser seluler adalah fitur web browser yang dapat mengemulasi atau meniru perangkat seluler. Dengan emulator browser seluler, Anda dapat melihat situs Anda ditampilkan dalam versi seluler (mobile version) di perangkat smartphone atau tablet. Hampir semua web browser modern memiliki fitur emulator browser seluler. Berikut ini adalah cara menggunakan emulator browser seluler di Google Chrome, Mozilla Firefox dan Microsoft Edge.
1. Google Chrome.
Jalankan browser Google Chrome dan kemudian buka halaman blog atau website (web page) yang ingin dilihat di versi seluler. Klik ikon Customize and control Google Chrome (1) yang ada di sudut kanan atas, pilih More tools (2) dan kemudian pilih Developer tools (3).
Klik tombol Toggle device toolbar (1) untuk mengaktifkan bilah alat perangkat tempat halaman blog atau website versi seluler dimuat. Secara default, device toolbar menggunakan template responsif untuk halaman blog atau website yang dimuat. Untuk menampilkan versi seluler halaman blog atau website di perangkat seluler tertentu, klik anak panah ke bawah di opsi Responsive (2) dan kemudian pilih perangkat seluler yang diinginkan, misalnya Pixel 2 XL (3).
Sekarang, Anda dapat melihat tampilan versi seluler halaman blog atau website yang dimuat di perangkat seluler Pixel 2 XL. Untuk menutup atau mengakhiri, klik tombol Close yang ada sudut kanan atas jendela Developer tools.
2. Mozilla Firefox.
Jalankan browser Mozilla Firefox dan kemudian buka halaman blog atau website yang ingin dilihat di versi seluler. Klik ikon Open Application Menu (1) yang ada di sudut kanan atas dan kemudian pilih More tools (2).
Dari daftar submenu More tools yang muncul, pilih atau klik Responsive Design Mode atau bisa juga menggunakan pintasan keyboard Ctrl+Shift+M.
Secara default, Responsive Design Mode menggunakan template responsif untuk halaman blog atau website yang dimuat. Untuk menampilkan versi seluler halaman blog atau website di perangkat seluler tertentu, klik spinner di opsi Responsive (1) dan kemudian pilih perangkat seluler yang diinginkan, misalnya Pixel 2 XL Android 8.0 (2).
Sekarang, Anda dapat melihat tampilan versi seluler halaman blog atau website yang dimuat di perangkat seluler Pixel 2 XL Android 8.0. Untuk menutup atau mengakhiri, klik tombol Close Responsive Design Mode yang ada di sudut kanan atas jendela Responsive Design Mode.
3. Microsoft Edge.
Jalankan browser Microsoft Edge dan kemudian buka halaman blog atau website yang ingin dilihat di versi seluler. Klik ikon Settings and more (1) yang ada di sudut kanan atas, pilih More tools (2) dan kemudian pilih Developer tools (3).
Klik tombol Toggle device emulation (1) untuk mengaktifkan bilah alat perangkat tempat halaman blog atau website versi seluler dimuat. Secara default, device toolbar menggunakan template responsif untuk halaman blog atau website yang dimuat. Untuk menampilkan versi seluler halaman blog atau website di perangkat seluler tertentu, klik anak panah ke bawah di opsi Responsive (2) dan kemudian pilih perangkat seluler yang diinginkan, misalnya Pixel 2 XL (3).
Sekarang, Anda dapat melihat tampilan versi seluler halaman blog atau website yang dimuat di perangkat seluler Pixel 2 XL. Untuk menutup atau mengakhiri, klik tombol Close yang ada sudut kanan atas jendela Developer tools.
Bila diperhatikan, emulator browser seluler yang ada di Google Chrome dan Microsoft Edge memiliki kesamaan. Hal ini karena browser Google Chrome dan browser Microsoft Edge baru sama-sama berbasis pada Chromium yaitu browser open source yang dikembangkan dan dikelola oleh Chromium projects yang diperkenalkan Google pada tahun 2008. Chromium projects sendiri adalah proyek open source dibalik Chromium dan Chromium OS.
