Tips Membuat Website Lebih Mobile Friendly

mobile-friendly1

Pada saat pembuatan sebuah website biasanya kita sering mendengar tentang mobile friendly, website yang mobile friendly bisa diartikan website yang mengimplementasi desain yang nyaman untuk pengunjung ketika dibuka menggunakan smartphone atau tablet.

Mengapa kita perlu mengimplementasikan mobile friendly pada website kita, jawabannya adalah karena menurut riset pada awal 2014 statistik pengunjung yang menggunakan smartphone atau tablet sudah melampaui pengunjung yang menggunakan desktop atau PC. Selain itu dengan mengimplementasi mobile friendly pada website kita bisa membuat pengunjung lebih nyaman ketika membaca sebuah artikel atau ketika mengunjungi website kita.

Berikut 9 tips yang bisa diimplementasikan agar website anda lebih mobile friendly

1. jangan memisahkan website utama dan website mobile

Beberapa tahun yang lalu ketika membuat desain untuk website versi mobile, kita selalu memisahkan antara konten yang cocok untuk versi mobile. Sebagai contoh biasanya website versi mobile isinya lebih singkat baik berupa text ataupun penggunaan gambarnya

2. implementasi desain responsive

Dengan mengimplementasikan reponsive desain ini maka website akan mudah dilihat jika menggunakan ukuran yang layar yang berbeda. Responsive desain lebih mengimplementasi layout yang fleksibel, optimalisasi images dan css media queries. Jangan lupa untuk belajar membuat website yang responsive atau cari tahu mengenai apa itu responsive web design

3. mentambahkan meta tag viewport

Tag viewport merupakan bagian yang mengatur browser akan melakukan rendering dan memberikan perintah seberapa besar ukuran konten dan skala penyesuaiannya. Sebagai contoh meta tag viewport dibawah akan memberikan ukuran layar penuh atau fit dengan ukuran layar.

<meta name="viewport" content="width=device-width, initial-scale=1">

4. ukuran huruf dan tombol

Agar website kita lebih mobile friendly maka kita perlu menyesuaikan ukuran huruf dan tombol yang akan kita gunakan. Untuk mobile friendly minimal ukuran huruf default adalah 14px dengan begitu user tidak perlu melakukan zoom jika ingin membaca konten textnya.

Sedangkan ukuran tombol yang paling standard adalah implementasi lebar ukuran jari kebanyakan orang. Menurut Apple’s design guidelines yang di rekomendasikan untuk ukuran tombol adalah 44px lebar dan 44px panjang. Ukuran tombol ini sangatlah berpengaruh untuk website online shop.

5. Gunakan image dengan ukuran tinggi

Seperti halnya Instagram, image dengan resolusi tinggi sangatlah diperlukan untuk reponsive website yaitu dengan tujuan agar user experience mencapai standard paling tinggi. Karena jika kita berbicara tentang responsive desain maka target kita adalah pengguna iOS dan Android.

6. Hilangkan zoom default

Untuk membuat nyaman para pembaca lebih baik kita mengimplementasi default zoom pada website kita, berikut contoh meta tag untuk mengimplementasinya

<meta name="viewport" content="initial-scale=1"/>

7. Gunakan YouTube untuk menampilkan video

Untuk website yang memiliki kontek video lebih baik menggunakan YouTube karena video playernya sudah sesuai untuk versi mobile dan YouTube itu sendiri sudah mengimplementasi responsive design maka dengan begitu anda tidak perlu menghandle responsive video.

8. Pilihan versi Desktop

Seberapa baik dan indahnya sebuah website versi mobile, jangan lupa untuk include link “view desktop version” dibagian bawah. Hal ini untuk menghandle jika ada user yang lebih suka mengunjungi website anda versi desktop.

9. Jangan pernah berhenti menguji coba

Ketika membuat sebuah website yang responsive selalu lakukan uji coba pada banyak jenis ukuran layar, hal ini semata-mata agar website anda lebih optimal disemua ukuran layar yang ada.