Jangan Hanya Reponsive, Desain Web Harus Mobile Friendly

Jangan Hanya Reponsive, Desain Web Harus Mobile Friendly - Banyak orang yang menganggap bahwa website mobile friendly dan responsive itu sama saja, padahal hal tersebut saling terkait dan berbeda dalam ruang lingkupnya, lalu sebenarnya apakah yang membedakan desain responsive dan mobile friendly? Mari kita bahas.

Pengertian Desain Web Responsive dan Mobile Friendly

Pengertian Desain Web Responsive

Responsive berarti tampilan display sebuah web atau blog yang mampu menyesuaikan tampilan dengan segala jenis perangkat perangkat terutama dari ukuran layar dan resolusi layar. Sehingga pada desain web responsive, sumberdaya atau resource yang digunakan sama saja, dan lebih sering mengunakan media query untuk menyesuaikan tampilan berdasarkan perangkat.

Pengertian Desain Web Mobile Friendly

Website atau blog yang mobile friendly dapat mirip dengan website atau blog yang reponsive, perbedaannya hanya pada sumberdaya (resource) yang digunakan. Seperti kita ketahui bahwa perangkat mobile memiliki kemampuan yang lebih rendah dalam menampilkan laman web dengan sumberdaya besar dan berat, untuk itu para pembuat website mobile friendly membuat pemuatan sumberdaya secara adaptif, tergantung perangkat yang digunakan selain itu juga bisa menggunakan desain website untuk mobile dan desktop yang berbeda.

Perbedaan

Seperti yang tertera di atas, bisa disimpulkan bawah website atau blog yang mobile friendly pasti responsive, namun website atau blog responsive belum tentu mobile friendly.

Mengapa Mobile Friendly

Nah ini merupakan pertanyaan umum yang sering ditanyakan kenapa sih, harus mobile friendly ? responsive aja kan cukup, iya ngak ? Begitu kiranya pertanyaan yang akan muncul di benak anda, seperti yang saya utarakan tadi, bahwa mobile friendly bukan hanya tentang tampilan, tapi lebih kompleks meliputi kecepatan, aksesbilitas, kenyamanan pengguna, dan kompabilitas.

Tahukah anda ? ditahun 2015 ini diprediksi 52,4% akses Internet dunia berasal dari perangkat mobile, dan tahukah anda, waktu yang dibutuhkan untuk memuat laman website desktop responsive pada perangkat mobile membutuhkan waktu 1,2 sampai 3 kali lipat lebih lama daripada perangkat desktop, jadi jika website atau blog anda membutuhkan waktu 2-3 detik untuk dimuat, maka di perangkat mobile bisa mencapai 6-9 detik, dan seperti yang kita ketahui, bahwa pengunjung akan meninggalkan sebuah laman website jika membutuhkan waktu lebih dari 5 detik untuk berhasil di render.

Bagaimana Membuat Website Mobile Friendly

Secara garis besar, Ada beberapa poin penting dalam membuat website atau blog mobile friendly diantaranya :

Penyajian Sumberdaya Dinamis

Hal ini sangat efektif terutama apabila anda mengurangi sumberdaya JavaScript, karena pada perangkat desktop saja JavaScript sering membuat suatu website menjadi berat, apalagi perangkat mobile, benar ? Hal ini bisa dilakukan dengan menghilangkan beberapa elemen pada tampilan mobile atau membuat laman khusus untuk pengguna mobile. Untuk lebih jelasnya mari simak cerita berikut :

Di sebuah keluarga yang terdiri dari 3 orang, yaitu ayah, ibu dan anak yang berusia 2 tahun, nah suatu hari ayah meminta pada ibu makanan yang enak, dan ibu memberi sebungkus nasi padang untuk ayah, tak lama kemudian, sang anak meminta makanan enak juga pada ibu, dan ibu memberikannya 1 bungkus biskuit bayi.

Sekarang ibaratkan bahwa ibu adalah website atau blog kita, jenis makanan adalah sumberdaya atau resource seperti HTML, CSS, dan JavaScript, ayah dan anak adalah perangkat yang digunakan.

Saat ayah meminta makanan enak ibu memberikan nasi padang dan saat anak meminta hal yang sama yaitu makanan enak, ibu memberikan sebungkus biskuit, jadi dari analogi tersebut website kita harus memberikan sumberdaya yang paling cocok sesuai perangkat yang digunakan.

Biasanya, Penyajian Sumberdaya Dinamis pada website menggunakan Header HTTP Vary untuk mendeteksi perangkat yang digunakan. Sedangkan bagi blog yang menggunakan CMS seperti WordPress dan Blogger, bisa menggunakan fitur kondisional mobile untuk memberikan sumberdaya dinamis. Dan saya menggunakan metode ini untuk memberikan sumberdaya dinamis. Ingin tahu bagaimana melakukannya ? Ikuti blog ini via email melalui formulir di akhir posting dan saya akan berikan rahasianya.

Membuat Desain Web Responsive

Seperti yang saya sebutkan diatas, laman mobile friendly pasti responsive, kenapa ? Karena perangkat mobile jauh lebih variatif daripada perangkat desktop, jika kebanyakan perangkat desktop memiliki aspek rasio 16:9, 4:3 atau 16:10, web yang mobile friendly harus tampil sempurna di perangkat mobile dengan aspek rasio 16:9, 16:10, 4:3, 3:4, 10:16, dan 9:16, tentu lebih rumit bukan ?

Salah satu jalan pintas untuk mengimplementasikan RWD (Responsive Web Design) yang mobile friendly bagi anda yang tidak ingin pusing adalah dengan menggunakan jasa pembuatan website dengan RWD, atau membeli template yang responsive bagi blog atau website, tapi saya punya yang responsive dan mobile friendly dan saya bagikan gratis khusus untuk anda, para pengguna blogger yang mengunjungi situs ini, Pangeran Biru blogger template.

Nah trik membuat RWD terakhir agar anda tidak membuang banyak waktu untuk mengubah tampilan website atau blog anda adalah membuat template dengan plugin framework responsive seperti Bootstrap dan sejenisnya, kebetulan saya juga pengguna framework Bootstrap.

Membuat Laman Web Khusus Mobile

Tentunya hal ini menjadi senjata pamungkas apabila anda kesulitan melakukan hal-hal diatas, anda bisa menggunakan penanda URL khusus seperti query string atau subdomain untuk website atau blog versi mobile milik anda, untuk blogger, sudah disediakan fasilitas query string ?m=1 sebagai penanda website mobile, dan apabila anda menggunakan cara ini, jangan lupa menambahkan tautan rel='alternate' dari :

Versi mobile ke versi desktop;
Versi desktop ke versi mobile;

Untuk mengatasi deskripsi meta duplikat dan juga indeks duplikat di search engine, selain itu pastikan anda menambahkan tautan rel='canonical' menuju versi utama website atau blog anda (dekstop) baik dari versi mobile dan juga desktop. Hal ini bertujuan untuk menujukan website utama kepada mesin telusur.

Nah bagian ini juga saya sedikit gunakan, untuk mengeceknya, silahkan lihat artikel ini di versi mobile dan rasakan perbedaannya. Baik, sekian dulu tips dan trik dari saya, sebelum memulai membuat website responsive semoga bermanfaat.