Website Mobile Friendly

9 Tips Membuat Website Mobile-Friendly

Bagi Anda yang belum tahu, saat ini Google memiliki algoritma terbaru yang disebut dengan “Mobilegeddon”. Algoritma ini akan mengurangi peringkat website yang tidak mobile-friendly. Google akan mengurangi peringkat website tersebut dalam hasil pencarian melalui perangkat mobile seperti ponsel atau tablet.

Sebelumnya pada tahun 2014, total penggunaan perangkat mobile menyalip jumlah penggunaan dekstop oleh masyarakat ketika mengakses internet. Itu berarti, dekstop tidak lagi menjadi satu-satunya wadah yang diperlukan untuk mengembangkan website. Algoritma Google mendorong para pebisnis untuk memikirkan mengenai penerapan website yang mobile-friendly.

Lalu bagaimana membuat website Anda agar mobile-friendly ? Berikut sembilan tips yang akan membantu Anda

1. Jangan Membuat Website Mobile-Friendly yang Terpisah

Dulu ketika Anda mendesain website untuk penggunaan mobile, Anda akan memotong konten yang sesuai untuk penggunaan mobile. Namun, Anda tidak bisa mengkontrol konten mana yang dibutuhkan atau diinginkan oleh pengguna.

Jangan lupa untuk menggunakan Google Page Speed Insights untuk mencari tahu elemen apa saja yang membuat load website menjadi lambat.

Dengan demikian, konten website yang Anda sajikan, baik pada tampilan dekstop dan tampilan perangkat mobile haruslah sama.

2. Gunakan Desain Responsif

Website Mobile-Friendly
Ilustrasi website mobile-friendly

Desain responsif memungkinkan web developer membuat website yang akan mudah dilihat dari beragam ukuran di perangkat yang berbeda. Hal ini akan mengurangi tugas yang harus dilakukan web developer ketika menciptakan sebuah website.

Desain responsif memenuhi kebutuhan penggunaan layout dan gambar yang fleksibel, serta penempatan item yang efektif. Ketika desain responsif digunakan pada sebuah website, maka halaman website dapat mendeteksi ukuran layar, orientasi pengguna dan mengubah tata letak yang sesuai.

3. Selalu Sertakan Viewport Meta Tag

Viewport adalah daerah virtual yang digunakan oleh mesin rendering browser untuk menentukan bagaimana konten diskala dan diukur. Karena itulah viewport adalah sebuah kode kritis ketika membangun website mobile-friendly. Tanpanya, website Anda tidak akan berfungsi dengan baik pada perangkat mobile.

Baca Juga  Cara Membuat Navigasi Website yang Ramah SEO

Yang diberitahukan viewport meta tag ke browser adalah halaman wesbite terkait harus sesuai dengan ukuran layar. Banyak konfigurasi berbeda yang bisa Anda gunakan untuk mengontrol viewport Anda. Berikut salah satu caranya :

Viewport Meta Tag

4. Pentingnya Menyesuaikan Ukuran Font dan Tombol

Ukuran font dan tombol pada website Anda sangat penting untuk diperhatikan dalam penerapannya di perangkat mobile. Untuk ukuran font, setidaknya Anda dapat menggunakan ukuran 14px. Walaupun mungkin tampak besar, namun hal ini akan membantu pengguna agar tidak perlu lagi melakukan zoom. Untuk ukuran kecil, minimum 12px, dapat Anda gunakan untuk teks dalam label atau misalnya formulir.

5. Gunakan Gambar Dengan Resolusi Tinggi

Sama halnya seperti Instagram, gambar resolusi tinggi sangat penting bagi website Anda untuk memastikan kenyamanan dan pengalaman pengguna. Model terbaru perangkat iOS memiliki layar HD (high defenition) dengan resolusi gambar tinggi yang akan membantu Anda menghindari gambar yang blur.

6. Hapus Default Zoom

Auto zoom bisa benar-benar mengacaukan elemen tata letak, terutama untuk gambar dan konten navigasi. Mereka mungkin akan terlihat kecil atau terlalu besar dalam tata letak website. Untuk memperbaiki hal ini, gunakan viewport meta tag dalam mengatur variabel khusus dalam konten.

Viewpoert-Metatag-Default-Zoom

7. Gunakan Video YouTube di Website Anda

Jika Anda menggunakan banyak elemen video, maka cara video Anda terlihat dalam tampilan di perangkat mobile akan berbeda dan sulit untuk disaksikan.

Youtube

Karena itu, menggunakan video YouTube adalah solusi untuk mengatasi kesulitan dalam menyaksikan video melalui perangkat mobile. Pasalnya, kode embed di YouTube sudah responsif untuk website di perangkat mobile.

Gunakan tag standar HTML 5 untuk animasi dan gunakan video embedding yang kompatibel di semua perangkat. Google Web Designer bisa membantu Anda untuk membuat animasi HTML5 sehingga content Anda mudah diakses.

Baca Juga  Macam-Macam Browser Terbaru & Fiturnya

8. Jangan Batasi Penggunaan Website Anda

Seindah apapun tampilan website Anda pada perangkat mobile, selalu sertakan pilihan “go to full website” atau “view dekstop version” pada bagian bawah halaman.

Banyak orang yang masih lebih menyukai website versi dekstop. Lalu untuk apa memberikan mereka batasan jika memang hal itu yang membuat mereka berlama-lama ada di website Anda? Jangan sampai Anda kehilangan pelanggan potensial hanya karena menghentikan mereka melakukan sesuatu yang membuat mereka nyaman menggunakan website Anda.

9. Jangan Berhenti Melakukan Percobaan

Percobaan Dilakukan Hingga Tujuan Tercapai
Jangan pernah berhenti lakukan percobaan hingga tujuan Anda tercapai

Setelah Anda selesai membuat website yang responsif atau mobile-friendly, cobalah terlebih dahulu untuk yang kedua kalinya, dan terus coba lagi. Coba di banyak perangkat berbeda seperti iPhone, Android, ponsel Windows dan tablet lainnya.

Lakukan pengujian secara berkala pada setiap halaman, mulai dari reaksi pengguna hingga ke fungsi tombol. Saat Anda melakukannya, posisikan diri Anda sebagai pengguna atau minta bantuan orang lain yang tidak ikut dalam proses perancangan website untuk mengujinya.

 

Sumber :

https://blog.hootsuite.com/9-tips-to-creating-a-mobile-friendly-website/

https://smallbiztrends.com/2015/03/top-7-mistakes-with-mobile-friendly-web-design.html

Leave a Reply

Your email address will not be published. Required fields are marked *