oleh

Cara Membuat Website Mobile Friendly

Jika kita mempunyai sebuah website, maka website yang mobile friendly itu penting dan malah wajib pada zaman sekarang ini, jadi kalau anda belum sempat optimasi website ke mobile friendly, bersiaplah untuk melakukannya sekarang juga, jangan sampai lalai soal ini. 

Ada tiga alasan kenapa website harus mobile friendly, penjelasan singkatnya begini :

  • Jumlah traffic dari ponsel kian meroket – Lebih dari separuh orang di dunia mengakses internet lewat smartphone dan di prediksi Statista, jumlahnya tiap tahun kian terus bertambah, hal ini karena jumlah pengguna smartphone juga ikut bertambah seiring waktu. 
Statistik Trafik Dari Ponsel
Statistik Trafik Dari Ponsel
  • 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. jika lewat SEO versi mobile, anda bisa menangkap peluang traffic dengan lebih baik lagi.

Misal anda tak punya website versi mobile friendly, ya untuk zaman sekarang ini tamatlah sudah, anda bisa kehilangan pengunjung, ranking di mesin pencari, leads dan cuan dari pembeli jika anda punya website toko online. 

Jadi sebelum terlanjur, baiknya anda bergerak cepat untuk menghindarinya. Lantas, bagaimana Cara Membuat Website Mobile Friendly? Silakan simak point-point di bawah ini :

  1. Install tema yang responsif;
  2. Buat menu yang simpel;
  3. Sertakan kolom pencarian;
  4. Pilih jenis font yang tepat;
  5. Pastikan ada whitespace cukup;
  6. Buat form yang singkat;
  7. Lakukan optimasi gambar;
  8. Kurangi pop-up;
  9. Pakai AMP;
  10. Tinggalkan Flash, dan
  11. Jadikan kecepatan sebagai prioritas.

Tak perlu khawatir, pusing dan merasa rumit dengan banyaknya cara-cara di atas, ikuti langkah-langkah berikut ini.

Apa Website Anda Sudah Mobile Friendly?

Anda jangan juga terburu-buru dalam melakukan optimasi, sebaiknya anda jawab dulu pertanyaan di atas. 

Dan dari situ anda bisa tahu berapa banyak hal yang perlu anda lakukan, karenanya, anda akan terhindar dari melakukan segalanya dari nol, kemudian anda bisa fokus ke hal-hal yang memang perlu di perbaiki. 

Untuk menjawab pertanyaan di atas, anda bisa pakai link ini untuk mencobanya, yaitu Mobile-Friendly Test dari Google, tinggal masukkan URL website dan tunggu beberapa saat.

Situs Pengujian Mobile-Friendly
Situs Pengujian Mobile-Friendly

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

Dari sanalah, bisa di pastikan 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 menjumpai halaman seperti berikut ini :

Hasil Pengujian Situs Mobile-Friendly
Hasil Pengujian Situs Mobile-Friendly

Pastikan anda mengklik pada bagian Page loading issues di bagian bawah tulisan Test results. Di sana, terdapat daftar lengkap isu yang di temui oleh Googlebot.

Dari sanalah anda bisa mulai mengubah website jadi mobile-friendly dan pastikan anda melakukan rekomendasi optimasi sesuai yang Google resepkan pada website anda yang terllihat pada hasil pengujian tersebut.

Cara Membuat Website Mobile Friendly

Setelah tahu isu-isu spesifik yang perlu di tangani, gilirannya melakukan optimasi secara menyeluruh, di sini kami akan tunjukkan banyak cara yang bisa di lakukan untuk membuat website anda jadi mobile-friendly.

1. Install tema 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, karena hal 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 versi mobile, URL yang sama bisa di buka melalui desktop dengan tampilan yang pas.

Theme Responsive WordPress
Theme Responsive WordPress

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

Namun nyatanya, tak semua tema itu responsif, beberapa tema (sayangnya) berfungsi sekadar sebagai hiasan saja, mereka hanya fokus untuk mempercantik tampilan website semata. 

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

  • Bisa menyesuaikan tampilan web secara otomatis;
  • Punya desain 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/ atau bisa anda download di sini Download Template Blogger Dan WordPress Terbaik, Responsif Dan Super Cepat 2019

2. Buat menu yang simpel

Ukuran layar desktop jelas berbeda dengan ponsel, ketika desktop punya resolusi minimal 1080p, resolusi layar ponsel hanyalah 720p. Karena itulah, menu website perlu di desain berbeda dari yang di desktop. 

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

  • Tampilkan menu-menu yang penting saja, terlalu banyak menu membuat pengunjung kebingungan dalam menjelajah website (decision paralysis);
  • Letakkan menu-menu lainnya ke dalam collapsible navigation sidebar atau menu navigasi yang bisa di sembunyikan;
  • 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 di tampilkan 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.

3. Sertakan kolom pencarian

Tak semua hal bisa di buat simpel, termasuk di dalamnya menu dan konten website, apalagi kalau website yang di maksud merupakan marketplace atau toko online, anda mau tak mau, jelas saja ada begitu banyak menu dan halaman berisi produk yang di jual.

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

4. Pilih jenis font yang tepat

Sama halnya dengan tema, font juga punya pengaruh ke tingkat mobile friendly sebuah website, karena ruang yang terbatas di ponsel, pilihan font berpengaruh ke tampilan keseluruhan website.

Dengan font yang tepat, konten website bisa dengan mudah di baca, selain itu, font juga bisa mempengaruhi kesan, mood dan branding website itu sendiri. 

Baca juga...  Yang Perlu Di Ingat Ketika Membuat Tautan Dari Perspektif SEO Holistik

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

5. Pastikan ada whitespace yang cukup

Hal satu ini mungkin saja 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 di lihat melalui ponsel. 

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

Kalau konten yang di maksud adalah berupa paragraf, maka paragraf tersebut akan lebih mudah di baca. 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 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 cukup nama dan alamat email.

Kalau konteksnya untuk pengiriman barang, buatlah form yang apa perlunya saja, fokus ke informasi penting yang di butuhkan, anda tak perlu tahu warna kesukaan atau darimana pembeli mendapat info tentang bisnis anda.

7. Lakukan optimasi gambar

Dalam membuat website mobile friendly, gambar biasanya jadi momok. 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 anda lakukan.

Tinypng Untuk Kompres Gambar
Tinypng Untuk Kompres Gambar

Ada beberapa hal yang perlu di lakukan dalam mengoptimasi gambar, yaitu :

  1. 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;
  2. 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;
  3. 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;
  4. Install plugin image optimizer seperti WP Smush. Langkah ini bisa di lakukan semisal anda butuh bantuan melakukan optimasi gambar. Plugin ini juga bisa di pakai untuk mengecek resolusi gambar yang belum optimal;
  5. Tambahkan title text dan alt text demi SEO. Bot tidak bisa melihat gambar, anda bisa membantunya dengan menambahkan title text dan alt text yang sesuai, anda 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 di jejali pop-up. Menyebalkan, bukan?

Lebih buruk lagi, pop-up sulit sekali di tutup. Tombol close (X) biasanya terlalu kecil atau sulit di temukan, tambah menyebalkan jadinya.

Tak perlu alasan lain lagi, sebisa mungkin, hindarilah pop-up pada website versi mobile.

9. Pakai AMP

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

Ini karena AMP bekerja menggunakan cache. Cache di pakai 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;
  • Mengamankan website lewat protokol HTTPS.

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

Hasil Pencarian AMP
Hasil Pencarian AMP

Sebagai proyek Google, AMP tentunya punya keunggulan di mesin pencarian Google. Website dengan AMP punya prioritas untuk tampil di urutan teratas halaman pencarian, seperti yang bisa di lihat 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, jangan pernah pakai Flash. Sebagai gantinya, gunakan teknologi terbaru yang lebih kompatibel, misalnya HTML.

11. Jadikan kecepatan sebagai prioritas

Inti dari mobile friendly adalah soal kecepatan, oleh sebab itukecepatan website harus jadi prioritas, kalau website anda tak lekas muncul dalam waktu tiga detik, kemungkinan pengunjung tak jadi mengakses meningkat hingga 32 persen, semakin lama waktu load yang di butuhkan, semakin tinggi pula kemungkinan bounce rate-nya, seperti yang nampak pada infografis di bawah.

Hubungan Waktu Loading dan Bounce Rate
Hubungan Waktu Loading dan Bounce Rate

Untungnya, itu semua tak jadi masalah. Terutama kalau anda berhasil menerapkan Cara Membuat Website Mobile Friendly di atas, sebaiknya anda juga melakukan langkah-langkah tambahan, seperti :

  • Mengurangi jumlah post yang tampil di halaman depan;
  • Menghilangkan widget yang tak perlu;
  • Melakukan uninstall plugin yang jarang di pakai.

Namun, ada kalanya kesemua langkah itu kurang manjur, kalau sudah begitu, artinya ada yang salah dengan performa server yang anda pakai, kalau begitu bagaimana pula solusinya?

Anda bisa mengupgrade paket hosting ke layanan unlimited web hosting sesuai kebutuhan, kalau boleh memberi saran, kami rekomendasikan paket hosting Personal untuk layanan shared hosting

Paket ini sudah mencakup fitur unlimited disk space, unlimited website dan unlimited akun email, harganya pun lebih miring di banding dua paket lainnya.

Kalau anda butuh yang lebih, anda bisa pilih layanan cloud hosting, layanan ini menjanjikan performa server jempolan dan cocok untuk website toko online hingga marketplace.

Siap Buat Website Mobile Friendly?

Oh, tentu saja! Kami harap dengan Cara Membuat Website Mobile Friendly di atas benar-benar bermanfaat buat anda.

Akhir kata, selamat ber-website-ria!

Komentar

Tinggalkan Balasan Anda dan Terima Kasih Atas Kunjungannya...

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Artikel Terbaru