Cara Membuat Website Mobile Friendly

Setelah tahu isu-isu spesifik yang perlu ditangani, gilirannya melakukan optimasi secara menyeluruh. Di sini, kami akan tunjukkan 11 cara yang bisa dilakukan untuk membuat website 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. 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 versi mobile, URL yang sama bisa dibuka melalui desktop dengan tampilan yang pas.

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

Namun nyatanya, tak semua tema itu responsif. Beberapa tema (sayangnya) 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 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 responsif yang bisa dipakai secara gratis.

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 didesain berbeda dari yang di 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-bali dari satu halaman ke halaman lainnya.

perbandingan mobile view vs desktop view
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.

Niagahoster juga memberikan contoh tampilan website yang menarik di halaman promo domain dan hosting.

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
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 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
Hal 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, 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 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: nama dan alamat email.

Baca juga: Membuat Formulir Kontak WordPress dengan Contact Form 7

Kalau konteksnya untuk pengiriman barang, buatlah form yang apa perlunya saja. Fokus ke informasi penting yang dibutuhkan. 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 dilakukan.

tinypng untuk kompres gambar
Ada beberapa hal yang perlu dilakukan dalam mengoptimasi gambar, yaitu:

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 demi SEO. 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.

Tak perlu alasan lain lagi. Sebisa mungkin, hindarilah pop-up pada website
jasa seo situbondo

jasa seo youtube

jasa seo situbondo

jasa seo malang

jasa seo serang
versi mobile.

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;
Mengamankan website lewat protokol HTTPS.
Lewat cara-cara di atas, tak heran kalau AMP mampu m