Membuat website kini tidak bisa dipisahkan dari membangun bisnis. Melalui website, calon konsumen atau klien menemukan informasi lebih lengkap mengenai usaha Anda. Isinya lengkap, mulai dari jenis-jenis produk yang ditawarkan, sejarah perusahaan, bahkan sampai laporan keuangan apabila bisnisnya merupakan perusahaan terbuka (Tbk). Namun, tidak hanya konten yang perlu diperhatikan, karena Anda juga harus memastikan bahwa website sudah mobile–friendly. Simak artikel ini selengkapnya untuk tahu mengapa membuat website yang mobile–friendly itu penting, hingga cara membuat website yang mobile-friendly!
Kenapa website harus mobile-friendly?
- Menimbulkan rasa nyaman bagi audiens
Lebih banyak pengguna internet yang menggunakan perangkat mobile daripada personal computer atau PC. Sebab, smartphone dan tablet menawarkan pengalaman mengakses internet secara praktis. Penggunanya bisa saja membuka website sambil melakukan aktivitas lain, seperti makan atau sekadar rebahan. Harga smartphone pun lebih terjangkau dibandingkan PC, jadi tidak heran kalau lebih banyak orang memiliki smartphone.
Oleh karena itu, penting bagi Anda untuk membuat website yang mobile-friendly. Maksud dari mobile-friendly tidak hanya merujuk ke tampilan sesuai ukuran mobile, tapi juga memiliki navigasi lebih simpel untuk para pengguna mobile. Pasalnya, salah satu kesalahan yang sering ditemukan adalah tombol yang sulit ditekan. Mungkin tombol menu atau search bar dalam ukuran kecil bisa dilihat dengan jelas pada tampilan PC, tapi memakai layout yang sama di mobile hanya akan menyusahkan audiens Anda. Contohnya bisa dilihat pada gambar di bawah ini.
Menggunakan tampilan seperti gambar di kiri tidak masalah untuk PC, tapi pengguna mobile bakal kesulitan melihat isi konten, menu, sampai search bar karena ukurannya terlalu kecil. Itu alasannya gambar di kanan lebih ideal untuk jika ingin membuat website yang mobile-friendly.
- Meningkatkan kredibilitas brand
Bagaimana kesan yang timbul di benak Anda jika membuka website dengan tampilan enak dilihat? Loading-nya cepat? Sebagai audiens, pasti ini menjadi nilai plus untuk brand. Membuat website yang mobile-friendly menunjukkan bahwa brand tersebut memang berniat memberikan pelayanan terbaik bagi audiens. Dari situ pun dapat terlihat bahwa brand Anda memiliki tim profesional yang memadai di bidang teknologi sampai customer service.
- Mempermudah call-to-action
Ketika membuat website beserta kontennya, Anda tentu menetapkan tujuan konversi menuju penjualan. Jika bisnis Anda merupakan B2C, biasanya audiens diharapkan agar langsung mengeklik link pembelian. Sehingga, tidak heran kalau call-to-action atau CTA yang ditulis biasanya berbunyi, “Check out sekarang!” atau “Beli sekarang!” Sementara itu, bisnis B2B umumnya mengarahkan audiens untuk meninggalkan kontaknya atau langsung menghubungi pihak brand.
Lantas, apa hubungannya dengan membuat website yang mobile-friendly? Nyatanya, kebanyakan orang melakukan aktivitas digitalnya melalui smartphone atau tablet. Tidak heran kalau perangkat mobile biasanya sudah login banyak akun, seperti WhatsApp, email, hingga e-commerce. Sehingga, jauh lebih praktis bagi audiens untuk melakukan kontak atau klik link lewat mobile, karena semuanya sudah terkoneksi di situ.
Cara membuat website yang mobile-friendly
- Susun layout mobile-friendly
Sebagaimana sempat dibahas di atas, layout berpengaruh signifikan terhadap pengalaman audiens saat mengunjungi website Anda. Bayangkan saja jika audiens baru buka website di mobile, tapi sudah disuguhi menu dalam ukuran kecil sampai sulit dibaca. Kemungkinan besar mereka langsung beralih ke website lain, bukan?
Untuk mengatasinya, Anda bisa memanfaatkan template dari website builder semacam Wix dan Squarespace. Selain itu, Anda juga dapat menggunakan content management system (CMS) seperti WordPress yang menyediakan beberapa tema mobile-responsive. Jika sudah telanjur membuat website yang non mobile-friendly, biasanya terdapat opsi untuk mengubahnya ke template yang lebih cocok untuk mobile.
Namun, bagaimana kalau tidak bisa beralih template? Tenang saja, Anda bisa mengakalinya dengan viewport meta tag. Viewport meta tag adalah satu baris kode HTML yang menginstruksikan tampilan halaman web. Anda dapat menambahkan kode berikut ke tag <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Anda pun bisa melengkapi meta tag tersebut sesuai kebutuhan. Apabila ingin mencegah audiens untuk zoom in atau zoom out, berikut kode yang dapat ditambahkan:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">Pada akhirnya, detail proses pembuatan website bergantung pada keputusan bisnis Anda. Memastikan tampilan sudah cocok dengan mobile memang wajib, tapi bagaimana Anda ingin brand direpresentasikan melalui website? Seperti apa rincian pengalaman audiens yang Anda harapkan?
- Gunakan gambar berukuran kecil
Menurut riset Portent, rata-rata website conversion rates menurun 4,42 persen setiap ada penambahan satu detik loading website. Artinya, page speed atau kecepatan loading website memang berpengaruh terhadap keputusan pembelian.
Nah, gambar berukuran besar bakal membuat loading website menjadi lebih lambat. Tidak hanya itu, ukuran terlalu besar bisa-bisa malah mengganggu pandangan audiens saat ingin melihat keseluruhan isi konten. Sebagai solusinya, Anda bisa memilih gambar berukuran maksimal 2 MB atau melakukan compress supaya ukuran aset visual menjadi lebih kecil.
Jika isi konten memang didominasi oleh visual seperti infografik atau ilustrasi, melakukan compress atau resize pun bisa dilakukan untuk mempercepat page speed dari website Anda. Cukup praktis, bukan?
- Optimalkan JavaScript
Masih berkaitan dengan pembahasan sebelumnya, kode JavaScript terlalu panjang bakal menurunkan page speed dari website Anda. Hal ini dapat dihindari dengan beberapa cara, misalnya menggunakan JavaScript Framework, seperti Vue, React, dan Angular.
Selain itu, Anda pun bisa menghapus whitespace dan baris kode yang kurang penting dalam JavaScript. Ada juga obfuscation, yaitu mempersingkat variabel dan fungsi (function). Contohnya, terdapat kode asli seperti di bawah ini:
var numberOfCats = 5;
var numberOfDogs = 3;
var numberOfAnimals = numberOfCats + numberOfDogs;
console.log(numberOfAnimals);Kode tersebut bisa di-obfuscate menjadi:
var a = 5;
var b = 3;
var c = a + b;
console.log(c);- Test page speed
Menguji page speed bisa dilakukan dengan mudah. PageSpeed Insights digunakan banyak pengelola website, karena gratis dan memberikan saran terkait apa saja yang perlu ditingkatkan untuk meningkatkan kecepatan loading website Anda. Lihat saja contohnya di bawah ini.
- Testing di perangkat mobile
Last but not least, pastikan Anda melakukan testing website di perangkat mobile sebenarnya. Sederhana saja, testing bisa dilaksanakan dengan menggunakan smartphone atau tablet milik Anda sendiri. Agar semakin yakin, mintalah bantuan kepada rekan kerja atau teman untuk mengecek apakah website sudah mobile-friendly.
Dalam membuat website, memastikan bahwa laman sudah mobile-friendly sudah merupakan kewajiban. Pasalnya, sekarang berbagai kalangan telah terbiasa memakai smartphone. Banyak pula yang memakai perangkat mobile lain, seperti tablet. Begitu selesai membangun website yang mobile-friendly, jangan lupa melakukan testing di perangkat mobile, ya!
