Tips Membangun Website Yang Mobile Friendly

Membangun website sekarang tentunya berbeda jauh dengan membangun website dengan 5 atau 10 tahun yang lalu. Dulu, orang mengakses website hanya dengan perangkat Laptop atau desktop. Sekarang  alat untuk mengaksesnya sangat beragam, dari featurephone, smartphone, gadget, Game Console,TV atau dashboard kendaraan. Dengan beragamnya perangkat pengakses, sudah saatnya kita meperhitungkan aspek ‘mobile friendly’ dari website yang kita bangun.

Sebelum lebih jauh, mari kita lihat statistik pengakses salah satu blog yang saya buat yaitu jejakcandra.blogspot.com , gambar berikut ini adalah data pengunjung berdasarkan OSnya .

 

pengunjung website berdasarkan osnya dari bulan november 2014
pengunjung website berdasarkan osnya dari bulan november 2014

 

Tampak bahwa pengakses Android sudah mencapai 37%, BB 9% dan iPhone 4%, jika di gabungkan pengakses mobile hampir menembus 50%. Windows  sendiri hanya 42%. Jika website anda hanya fokus ke desktop maka anda akan kehilangan calon pengunjung atau minimal pengunjung tidak akan nyaman dengan tampilan websitenya dilayar kecil.

Tips membuat website yang mobile friendly.

Berikut ini adalah tips yang bisa anda gunakan untuk meningkatkan kualitas website anda agar lebih mobile friendly.

1. Gunakan thema responsive. Jika anda memakai CMS, carilah tema yang mendukung mobile. Testingnya gampang, buka saja website anda di smartphone atau kecilkan browser anda, apakah tampilan akan menyesuaikan diri. Jika menggunakan layanan wordpress.com atau blogger, pilih dan aktifkan thema mobile. Jika anda ingin memulai membuat web yang responsive, silahkan download puluhan thema HTML5 responsive di html5up.net.

2. Hindari menggunakan kontent yang menggunakan Plugin seperti Flash, Java atau Silverlight. Gunakan HTML5.

3.  Gunakan Viewport Meta di Header (ini masih berhubungan dengan thema responsive), jika themanya sudah responsive ini ga usah di pikir lagi. jangan menggunakan Fix layout.

4. Gunakan font yang tidak terlalu kecil, jangan gunakan px sebagai satuan di CSS, biasakan menggunakan em dan ukuran relatif lainnya.

5. Jika web membutuhkan ikon, Gunakan font-icon seperti font-awesome untuk mempercepat loading halaman.

6. Gunakan teknik dinamic serving agar hasil optimal.

Sebagai contoh untuk Teknik ini, anggaplah kita punya website berita. Sebuah halaman web berita biasanya berisi (a) judul, (b) Gambar (c) ringkasan berita (d) isi berita (d) komentar (e) share button.  mengecek user agent browser dan OSnya. Jika browser desktop kita bisa meload dari point (a) sampai (e). Jika yang mengakses adalah smartphone maka cukup load (a), (b) dan (c). Jika yang mengakses adalah feature phone yang mendukung xhtml, maka cukup load point (a) dan (c). Inti dari dinamic serving kurang lebih seperti itu.

Baca tips lainnya di https://developers.google.com/webmasters/mobile-sites/.

Testing website Mobile Friendly

Setelah anda mengikuti tips diatas, maka langkah selanjutnya adalah testing. Disini ada 3 tool yang bisa kita gunakan untuk mengetesnya, semuanya tool dari Google.

Mobile friendly test

Alamat testingnya ada di https://www.google.com/webmasters/tools/mobile-friendly. Testing ini sangat sederhana, mengecek apakah website sudah menggunakan viewport(Responsive desain)  dan HTML5.

Hasil dari testing menyatakan candra.web.id mobile friendly
Hasil dari testing menyatakan candra.web.id mobile friendly

Testing di Pagespeed inSight

Testing sebelumnya hanya mengecek apakah website sudah mobile friendly. Testing ini mengecek lebih jauh yaitu mengecek apakah websitenya optimal jika diakses di mobile browser. Pagespeed memberikan point dari 0 sampai 100 dan memberikan rekomendasi untuk hal hal yang bisa ditingkatkan, terutama masalah kecepatan website. Alamat testing ada di https://developers.google.com/speed/pagespeed/insights

Tampilan hasil pagespeed test
Tampilan hasil pagespeed test, tampak bahwa candra.web.id belum optimal

Tampak bahwa saya harus mengoptimasi website ini. Pagespeed menyarankan mengkompress Javascript dan CSS serta memindahkan javascript ke bagian bawah halaman agar tidak memblokir proses rendering, kurang lebih itu inti dari sarannya.

 

Webmaster Tool Mobile Usability

Setelah anda mengoptimasi pagespeed, apakah sudah selesai? Tentu saja belum, masih ada point terakhir yaitu Mobile usability. Kadang, walaupun secara umum halaman website kita sudah mobile friendly,namun masih ada beberapa halaman yang kuran gmobile friendly. Bayangkan anda punya artikel ratusan, apakah yakin semuanya mobile friendly? Disinilah fungsi mobile usability. Webmaster tool ini akan mengecek per halaman artikel dan memberitahu artikel mana yang usabilitynya kurang. Jika anda belum paham webmaster tool, silahkan baca artikel saya yang berjudul Optimasi website dengan Google Webmaster Tool.

Menu mobile Usability ada di menu Search Traffics -> Mobile Usability.

Pengecekan Mobile usability di webmaster
Pengecekan Mobile usability di webmaster

Jika anda sudah melakukan 3 hal diatas, bukan hanya user akan nyaman mengakses website anda namun Google menjanjikan bahwa teknik diatas juga akan meningkatkan SEO dari website. Sekian dulu, semoga panduan singkat ini bermanfaat danHappy Testing!