Technology

Tips Mendesain Website Berbasis Mobile

 

Website yang dioptimasi untuk perangkat mobile termasuk kebutuhan yang mendesak. Terutama jika kita lihat sendiri bagaimana pesatnya distribusi perangkat seluler di masyarakat. Selain mendesak, dia bisa dikatakan termasuk tugas yang menantang. Apalagi dengan limitasi-limitasi yang dibawa masing-masing perangkat mobile dengan variasi tipe ponsel yang beredar di masyarakat. Nah, Tim developer JagoanStore.com memberikan ulasan mengenai sejumlah faktor X yang harus Anda perhatikan ketika mendesain website berbasis mobile. Dengan demikian Anda bisa menciptakan user experience yang maksimal. Berikut di antaranya:

1. Definisikan dulu kebutuhan Anda

Kabar baiknya, mengembangkan website berbasis mobile tidak begitu memakan waktu dan tidak mahal seperti yang mungkin Anda bayangkan. Paling tidak untuk yang levelnya standar, sejumlah layanan sudah tersedia untuk konversi website anda yang sekarang ke dalam format mobile-friendly. Google Mobile Optimizer (http://www.google.com/gwt/n) contohnya. Atau jika Anda menginginkan pilihan layanan yang memungkinkan kustomisasi website semau Anda, maka layanan berbayar seperti Mippin (http://mippin.com/web/), Mobify.com, dan Wirenode.com juga layak untuk dicoba.

Bagi Anda yang menguasai teknik dasar HTML, Anda bisa mempertimbangkan pendekatan secara DIY (Do It Yourself). Anda bisa membuat sendiri, atau jika merasa tidak punya waktu, anda bisa menyewa desainer web mobile yang sudah berpengalaman. Pada dasarnya seorang desainer profesional mengetahui lebih banyak mengenai plus dan minusnya sebuah website versi mobile.

2. Sesuaikan konten website dengan konteks mobile

Tugas yang paling menantang dalam pengembangan website mobile adalah bagaimana mereplika setiap konten yang sudah Anda desain khusus untuk PC ke versi mobile yang pastinya ukuran layarnya lebih kecil dan performanya lebih lambat.

Jika Anda merasa tidak tahu harus mulai dari mana, maka cobalah untuk mengidentifikasi satu atau dua fitur yang paling bermanfaat untuk customer Anda. Contohnya, bagi sebuah maskapai penerbangan akan lebih baik jika versi mobile websitenya mengutamakan fitur update jadwal penerbangan, atau informasi mengenai bagasi yang hilang. Karena fitur-fitur inilah yang mungkin dicari oleh pengguna yang sedang mengakses dari perangkatnya sendiri.

3. Optimasi desain sesuai batasan perangkat mobile

Ketika mengatur desain untuk website mobile, ada  setidaknya 60 elemen penting yang harus Anda pertimbangkan. Keterangan selengkapnya bisa Anda dapatkan di dokumen resmi W3C: http://www.w3.org/TR/mobile-bp/. Berikut adalah 4 elemen penting di antaranya:

  • Navigasi. Tampilkan navigasi dalam daftar sederhana sehingga pengguna tidak perlu mengakses beberapa halaman dulu untuk menemukan navigasi website Anda. Terutama karena perangkat mobile tidak memiliki sistem cache seperti halnya pada PC. Makanya, Anda harus membatasi jumlah halaman yang harus diakses pengguna.
  • Guliran. Anda harus membatasi area guliran (scrolling) menjadi satu arah saja, yaitu vertikal. Maka pastikan website versi mobile Anda tidak mengandung sidebar yang tidak diperlukan. Anda juga bisa menggunakan teknik Ajax yang pada dasarnya merupakan cara untuk mengambil sebagian halaman web tanpa harus refresh keseluruhan halaman.
  • Grafis. Atur ukuran grafis untuk layar yang lebih kecil dan hilangkan elemen yang tidak begitu penting / melambatkan waktu loading halaman anda. Juga, jadikan tautan dan tombol agar lebih mudah dibaca / diklik. Terakhir, jangan bergantung pada animasi Flash. Sebab platform multimedia ini tidak sepenuhnya didukung oleh beberapa perangkat mobile.
  • Cantumkan opsi untuk beralih ke website versi aslinya. Meskipun tujuan pembuatan website mobile adalah untuk mengoptimalkan tampilan pada perangkat mobile, ada beberapa pengguna yang justru lebih mengharapkan bisa mengunjungi website asli Anda melalui perangkat mobile mereka.

4. Kembangkan untuk piranti tertentu saja

Tentunya Anda ingin menjadikan website Anda bisa dibaca oleh sebanyak mungkin perangkat mobile. Ada sejumlah metode yang bisa Anda lakukan. Misalnya dengan teknologi ‘sniffer’ yang bisa mendeteksi tipe perangkat pengguna website Anda. Atau melalui metode ‘CSS3 media queries’ dengan menambahkan stylesheet untuk diterapkan sesuai tipe perangkat penggunanya.

Namun tidak ada salahnya apabila anda hanya fokus untuk pengembangan website anda pada piranti tertentu. Sebab jika terlalu banyak versi yang anda miliki, 15 misalnya, maka semakin banyak biaya yang harus anda keluarkan untuk perawatannya saja.

Hal ini lagi-lagi berujung pada siapa market anda. Apakah bisnis anda menjual pada pelanggan yang canggih? Atau bisnis anda orientasinya lebih ke B2B (bisnis-to-bisnis)? iPhone dan Android cocok bagi market pertama. Sedangkan BlackBerry sesuai fiturnya bisa mulai anda prioritaskan jika bisnis anda lebih ke B2B.

5. Berpikir kreatif, outside the web!

Browser mobile memang memiliki sejumlah batasan. Namun jangan lupa bahwa dibalik batasan tersebut tersimpan keunggulan yang tidak bisa ditemukan pada website berbasis PC. Yaitu fungsi ponsel yang bisa digunakan untuk melakukan panggilan langsung. Maka manfaatkan fungsi tersebut ketika mendesain versi mobile untuk website anda. Misalnya pada halaman ‘contact us’. Disamping sekedar mencantumkan formulir untuk diisi, cantumkan saja link yang bisa melakukan panggilan ke nomor anda secara langsung.

6. Kontrol bagaimana Google menilai website Anda

Jangan salah, versi mobile anda juga akan dinilai oleh mesin pencari. Googlebot menilai halaman web berbasis desktop, sedangkan Googlebot-Mobile menilai web mobile anda. Konten seperti apakah yang harus anda sediakan untuk Googlebot-Mobile? Dengan banyaknya variasi penjelajah versi mobile, maka anda harus tahu dulu daftar lengkap mengenai User-Agent dari Googlebot-Mobile. Selengkapnya bisa anda temukan di URL berikut: http://goo.gl/5sl3w. Dari masing-masing User-Agent itu, anda bisa menerapkan aturan-aturan yang bisa ditulis pada file robot.txt mengenai bagaimana Googlebot-Mobile bekerja.

Kemudian anda juga harus membuat sitemap khusus untuk website mobile anda. Fungsinya sama seperti sitemap pada umumnya. Yaitu memberi arahan pada Googlebot untuk menelusuri website anda. Format sitemap standar untuk versi mobile sendiri kurang lebih seperti ini:

<urlset>
<url><loc>http://www.google.com/xhtml</loc>
<lastmod>2004-10-01T23:05:32+00:00</lastmod>
<mobile:mobile/>
</url>
...
</urlset>

Keterangan selengkapnya perihal sitemap bisa anda temukan di halaman Help Center Google berikut: http://goo.gl/PEjvF.


Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *