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!
Apa Itu Website Mobile Friendly?
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:
- Jumlah traffic dari ponsel kian meroket – Lebih dari separuh orang di dunia mengakses internet lewat smartphone. Diprediksi Statista, jumlah pengguna smartphone tiap tahun akan terus bertambah.
- Mobile-first index – Google memprioritaskan indexing website pada versi mobile. Dari hasil indeks ini pulalah, Google menentukan ranking pencarian sebuah website.
- Mobile Search Engine Optimization (SEO) – Logika mobile SEO sedikit berbeda dengan versi desktop. Lewat SEO versi mobile, Anda bisa menangkap peluang traffic dengan lebih baik lagi.
Apabila Anda tak punya website versi mobile friendly, bisa-bisa Anda kehilangan pengunjung, ranking di mesin pencari, leads, dan cuan dari pembeli.
Apa Website Anda Sudah Mobile Friendly?
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:
- Keterangan waktu tes dan hasilnya;
- Screenshot halaman yang tampak dari ponsel;
- HTML yang tampak oleh Googlebot;
- Isu-isu yang ditemui ketika loading halaman;
- Artikel-artikel penting lainnya.
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.
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:
1. Install tema yang responsif
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:
- Bisa menyesuaikan tampilan web secara otomatis;
- Punya desain website dan tampilan simpel;
- Punya user interface yang intuitif (button, slider, dan form).
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:
- Tampilkan menu-menu yang penting saja. Terlalu banyak menu membuat pengunjung kebingungan dalam menjelajah website (decision paralysis);
- Taruh menu-menu lainnya ke dalam collapsible navigation sidebar atau menu navigasi yang bisa disembunyikan;
- Tulis call to action (CTA) dengan singkat dan jelas;
- Buat tombol dalam ukuran yang besar;
- Hindari penggunaan sidebar untuk konten. Konten yang terletak di sidebar biasanya akan ditampilkan di bagian paling bawah halaman versi mobile.
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.
3. Sertakan kolom pencarian
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?
4. Pilih jenis font yang tepat
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.
5. Pastikan ada whitespace yang cukup
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.
6. Buat form yang singkat
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.
7. Lakukan optimasi gambar
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:
- Pilih format gambar yang tepat – Untuk menghemat disk space, baiknya Anda gunakan gambar berformat JPG atau JPEG. Kalau Anda perlu gambar detail seperti screenshot, barulah pakai gambar berekstensi PNG;
- Lakukan kompresi gambar – Unggah gambar ke TinyPNG atau TinyJPG. Keduanya akan melakukan kompresi ukuran file dengan mengurangi kompleksitas warna dan informasi kurang relevan soal gambar;
- Perkecil dimensi gambar – Untuk langkah ekstra, Anda bisa juga perkecil dimensi gambar sebelum mengunggahnya ke web. Pakai software macam Paint atau Picasa untuk memudahkan Anda;
- Install plugin image optimizer seperti WP Smush – Langkah ini bisa dilakukan semisal Anda butuh bantuan melakukan optimasi gambar. Plugin ini juga bisa dipakai untuk mengecek resolusi gambar yang belum optimal;
- Tambahkan title text dan alt text – Bot tidak bisa melihat gambar. Anda bisa membantunya dengan menambahkan title text dan alt text yang sesuai. Sertakan kata kunci untuk title text, lalu deskripsikan tampilan gambar untuk alt text.
8. Hindari pop-up
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.
9. Pakai AMP
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:
- Membatasi dimensi atau resolusi gambar;
- Mengubah format gambar ke ukuran yang sesuai untuk tampilan ponsel;
- Menurunkan kualitas gambar untuk mempercepat loading website;
- Mengamankan website lewat protokol HTTPS.
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.
10. Tinggalkan Flash
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.
11. Jadikan kecepatan sebagai prioritas
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:
- Mengurangi jumlah post yang tampil di halaman depan;
- Menghilangkan widget yang tak perlu;
- Melakukan uninstall plugin yang jarang dipakai.
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.
Siap Buat Website Mobile Friendly?
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).
Tak perlu khawatir bagi Anda pengguna layanan hosting Niagahoster. Sebab, ada Member Area Niagahoster yang memungkinkan Anda untuk membuat website cloning dan melakukan staging. Anda jadi bisa melakukan uji coba perubahan desain sebelum dirilis di website asli deh.
Menarik, ‘kan? Yuk, cobain layanan hosting dari Niagahoster sekarang!
Sumber Artikel
