Dengan semakin meningkatnya pengguna perangkat mobile, membuat website versi mobile friendly menjadi hal yang wajib. Jadi, kalau Anda belum sempat optimasi website ke mobile friendly, bersiaplah untuk mengikuti langkah-langkah cara membuat website mobile friendly sekarang juga. 

Cara merubah tampilan web ke mobile itu tidak sulit kok. Tidak percaya? Langsung saja scroll ke bawah untuk mengetahui cara merubah tampilan web ke mobile!

Website mobile friendly adalah website yang didesain supaya mudah diakses oleh pengguna perangkat mobile seperti smartphone dan tablet. Biasanya desain website ini dibuat responsif terhadap ukuran layar perangkat yang digunakan pengunjung website.

Sebagai bagian dari website development, ada tiga alasan kenapa website harus mobile friendly, yaitu:

Apabila Anda tak punya website versi mobile friendly, bisa-bisa Anda kehilangan pengunjung, ranking di mesin pencari, leads, dan cuan dari pembeli. 

Baca Juga: Cara Optimasi Website Untuk Google Mobile First Index

Sebelum melakukan optimasi, baiknya ketahui dulu apakah jenis website Anda sudah mobile friendly atau belum. Dari situ, Anda bisa tahu apa saja yang harus dilakukan. Dengan begitu, Anda terhindar melakukan segalanya dari nol. 

Untuk mengetahuinya, Anda bisa pakai Mobile-Friendly Test dari Google. Tinggal masukkan URL website dan tunggu beberapa saat. 

Platform ini bekerja menggunakan Googlebot. Googlebot akan mengakses JavaScript, CSS, dan dokumen gambar di web. 

Dari sana, bisa dipastikan apakah web Anda sudah mobile friendly atau belum. Lewat tool ini juga, Anda bisa tahu masalah spesifik yang membuat website tidak mobile friendly.

Setelah menunggu beberapa saat, Anda akan mendapati halaman seperti di atas. Di halaman tersebut Anda bisa mendapatkan info berupa:

Pastikan Anda mengklik Page Loading Issues di bagian bawah tulisan Test Results. Di sana, terdapat daftar lengkap isu yang ditemui oleh Googlebot. Setelah mengetahui isu-isunya, Anda bisa mulai mempraktikkan cara membuat website mobile friendly.

Nah, kini saatnya Anda melakukan optimasi secara menyeluruh. Berikut ini 11 cara membuat website mobile friendly yang bisa Anda ikuti:

Cara membuat website mobile friendly yang pertama adalah menginstall tema website yang responsif. Tema punya pengaruh besar pada website. Baik dari sisi performa website, maupun pengalaman berkunjung. 

Secara teknis, tema responsif membantu memotong waktu loading. Sebab, Google tak perlu melakukan redirect ke versi website yang teroptimasi. 

Kriteria tema yang sama juga membantu Googlebot mengindeks halaman website. Karenanya, ini berpengaruh langsung ke ranking website di hasil pencarian.

Dari sisi user experience, instalasi tema responsif memudahkan user membagikan konten. Pemilik website hanya punya satu jenis URL yang berlaku konsisten. Kalau user membagikan URL dari website versi mobile, URL yang sama bisa dibuka melalui desktop dengan tampilan yang pas.

Jadi, jelas sudah alasan mengapa tema responsif wajib diinstall di website. 

Namun nyatanya, tak semua tema itu responsif. Sayangnya, beberapa tema berfungsi sekadar sebagai riasan. Mereka hanya fokus untuk mempercantik tampilan website. 

Lalu, bagaimana bentuk tema yang responsif itu? Berikut tiga kriteria utama yang perlu diingat:

Untuk lebih mudahnya, Anda bisa dapatkan tema responsif di WordPress Directory. Anda tinggal ketikkan URL: https://wordpress.org/. Kemudian klik opsi Themes dan masukkan kata kunci “Responsive” di kolom pencarian. 

Seketika, Anda dapatkan ribuan pilihan tema mobile friendly dan responsif yang bisa dipakai secara gratis.

Ukuran layar desktop jelas berbeda dengan ponsel. Ketika desktop punya resolusi minimal 1080p, resolusi layar ponsel hanyalah 720p. Karena itulah, menu website perlu didesain berbeda dari versi desktop. 

Kalau mau menyederhanakan tampilan menu, ada beberapa prinsip yang perlu Anda ikuti:

Sedangkan untuk best practice-nya, Anda bisa contoh web milik Pizza Hut Delivery. Di bawah ini, Anda bisa bandingkan websitenya dalam versi mobile dan desktop.

Di versi mobile, menu Order Now dan Status Pesanan ditampilkan paling atas. Karena harapannya, user siap melakukan order melalui ponsel. 

Baru kemudian, menu makanan dan minuman diletakkan di bagian bawah. Tepatnya, setelah slider berisi foto promosi. Deretan menu produk masih mudah diakses meski diletakkan di bagian bawah. 

Tak lupa, ada menu navigasi tersembunyi di bagian pojok kiri atas. Menu navigasi berisi menu yang sama persis di halaman depan website. Namun, navigasi bukan berarti pemborosan tempat. Malahan, navigasi ini bekerja mirip dengan breadcrumbs yang memudahkan user untuk bolak-balik dari satu halaman ke halaman lainnya. 

Di versi desktop, tampilan website nampak lebih detail. Menu Order Now sama-sama diletakkan di bagian atas. Hanya saja posisinya ada di bagian kanan halaman.

Posisi ini membuat menu-menu produk dan slider promosi jauh lebih mencolok. Dengan tampilan macam ini, user lebih terpancing untuk mencari tahu produk apa saja yang disajikan oleh Pizza Hut Delivery. 

Tak semua hal bisa dibuat simpel. Termasuk di dalamnya menu dan konten website. Apalagi kalau website yang dimaksud merupakan marketplace atau toko online. Mau tak mau, ada begitu banyak menu dan halaman berisi produk yang dijual.

Kalau Anda punya website macam itu, ada baiknya untuk tambahkan kolom pencarian. Kolom pencarian bisa memudahkan pelanggan mencari produk yang benar-benar dibutuhkan. Toh, tak mungkin juga Anda menyuruh pengunjung mencari konten atau produk secara manual kan?

Cara membuat blog mobile friendly yang selanjutnya adalah dengan memilih jenis font yang tepat. Karena ruang yang terbatas di ponsel, pilihan font berpengaruh ke tampilan keseluruhan website.

Dengan font yang tepat, konten website bisa dengan mudah dibaca. Selain itu, font juga bisa mempengaruhi kesan, mood, dan branding website itu sendiri. 

Font yang sifatnya dekoratif biasanya tak masuk dalam kategori mobile friendly. Memang, tampilan font klasik macam ini biasanya amat menarik perhatian. Hanya saja, jika dilihat dari ponsel tampilannya akan jadi sangat besar dan kurang elok. 

Untuk tahu font apa yang baik digunakan, coba baca artikel Kombinasi Font Sempurna untuk Website Anda.

Cara merubah tampilan web ke mobile yang satu ini mungkin tak ada hubungannya dengan persoalan teknis. Akan tetapi, baiknya Anda terus mengingat dan mempraktikkan ini.

Tampilan putih polos memberi kesan bersih dan elegan pada website. Apalagi kalau website dilihat melalui ponsel. 

Di saat bersamaan, latar putih juga membuat pengunjung fokus ke objek utama di halaman website. Kalau Anda punya toko online atau ecommerce, latar putih membantu produk Anda tampak lebih mencolok.

Kalau konten yang dimaksud berupa paragraf, maka paragraf tersebut akan lebih mudah dibaca. Asalkan, Anda menulis dalam potongan paragraf yang pendek-pendek.

Form di website pada prinsipnya harus singkat. Tapi kalau bicara soal cara membuat blog mobile friendly, Anda perlu melakukan langkah ekstra. 

Pangkas semua form isian yang kurang penting untuk user. Ketika Anda menanyakan informasi untuk leads dan kontak, sertakan dua macam form saja yaitu nama dan alamat email.

Kalau konteksnya untuk pengiriman barang, buatlah form yang seperlunya. Fokuslah ke informasi penting yang dibutuhkan. Anda tak perlu tahu warna kesukaan atau dari mana pembeli mendapat info tentang bisnis Anda.

Selanjutnya, optimasi gambar termasuk ke dalam cara membuat website mobile friendly. Sebab, masih banyak orang yang asal mencantumkan gambar ke website. Tanpa peduli format gambar atau ukurannya.

Akibatnya, website jadi lambat. Belum lagi memori disk server jadi boros. Maka dari itu, optimasi gambar jadi hal penting untuk dilakukan.

Ada beberapa hal yang perlu dilakukan dalam mempraktikkan cara membuat blog mobile friendly yang satu ini, di antaranya:

Pop-up itu makan tempat. Bayangkan saja layar ponsel sekecil itu penuh dijejali pop-up. Menyebalkan, bukan? 

Lebih buruk lagi, pop-up sulit sekali ditutup. Tombol close (X) biasanya terlalu kecil atau sulit ditemukan. Double menyebalkan jadinya. Itulah mengapa, menghindari pop-up termasuk ke dalam cara membuat website mobile friendly.

Accelerated Mobile Pages (AMP) merupakan proyek yang digawangi oleh Google. AMP diklaim bisa membuat waktu loading website jadi super cepat. 

Ini karena AMP bekerja menggunakan cache. Cache dipakai untuk menyimpan data website di gadget. Selain itu, AMP Cache juga mampu mengoptimalkan kerja server dengan cara:

Lewat cara-cara di atas, tak heran kalau AMP mampu memangkas data website hingga delapan kali lebih kecil.

Sebagai proyek Google, AMP tentunya punya keunggulan di mesin pencari Google. Website dengan AMP punya prioritas untuk tampil di urutan teratas halaman pencarian. Seperti yang bisa dilihat pada gambar di atas.

Baca Juga: Cara Meningkatkan Pengunjung Blog dengan Google AMP

Flash sudah usang dan ketinggalan jaman. Semua orang tak suka padanya. 

Bahkan di desktop pun, pengalaman menjelajah website dengan Flash sangat menyebalkan. Website jadi tak responsif dan waktu loading-nya pun lama. Saking menyebalkannya, baik iOS dan Android pun sudah tidak mendukung Flash.

Maka dari itu, hindari penggunaan Flash menjadi salah satu cara membuat website mobile friendly yang harus diikuti. Sebagai gantinya, gunakan teknologi terbaru yang lebih kompatibel. HTML, misalnya.

Inti dari mobile friendly adalah soal kecepatan. Karenanya, kecepatan website harus jadi prioritas.

Kalau website Anda tak lekas muncul dalam waktu tiga detik, kemungkinan pengunjung tak jadi mengakses meningkat hingga 32%. Semakin lama waktu load yang dibutuhkan, semakin tinggi pula kemungkinan bounce rate-nya. 

Untungnya, itu semua tak jadi masalah. Terutama kalau Anda berhasil menerapkan 10 cara membuat website mobile friendly di atas. Syukur-syukur Anda juga melakukan langkah tambahan seperti:

Namun, ada kalanya ke semua langkah itu kurang manjur. Kalau sudah begitu, artinya ada yang salah dengan performa server yang Anda pakai.

Lalu bagaimana solusinya?

Anda bisa meng-upgrade paket hosting ke layanan web hosting sesuai kebutuhan. Kalau boleh memberi saran, kami rekomendasikan layanan Shared Hosting paket Personal. Sebab, paket ini sudah mencakup fitur web hosting unlimited disk space, unlimited website, dan unlimited akun email. Fitur-fitur tersebut pun sudah bisa Anda dapatkan dengan harga yang ramah di kantong.

Nah, itu dia 11 cara membuat mobile friendly yang bisa Anda praktikkan. Mulai dari menginstall tema yang responsif, membuat menu yang simpel, sampai memastikan ada whitespace yang cukup.

Nah, dalam proses melakukan cara merubah tampilan web ke mobile, sebaiknya Anda tidak mengotak-atik website yang live. Sebab, jika terjadi kesalahan, bisa-bisa website Anda malah tidak bisa diakses. Jadi, pastinya Anda perlu fitur yang memungkinkan Anda melakukan uji coba (staging).