Halaman/Aplikasi Web versi Mobile

Tulisan ini akan memuat beberapa istilah teknis seputar pertimbangan ringkas membuat halaman/aplikasi web versi mobile menurut rekomendasi W3C (‘World Wide Web Consortium’).

Karakter perangkat mobile

Karakter umum perangkat genggam/’mobile’/'handheld’ (PDA ['Personal Digital Assistant'], ‘SmartPhone’, iPhone, Blackberry) diantaranya:

• Layar
  ukuran kecil, masih ada yang resolusi layarnya rendah.
• Navigasi
  ada yang tanpa ‘keyboard’, hanya ‘keypad’, layar sentuh, ’side-scrolling’, ’stylus’.
• Sumber tenaga/batere
  makin tinggi konsumsi prosesor, makin boros.
• Peramban (‘browser’)
  • pengenalan CSS (‘Cascading Style Sheets’) yang belum seragam. Peramban yang hanya mengerti salah satu metode di bawah ini

    <link rel="stylesheet" type="text/css" media="handheld" href="/path-to/handheld.css"  />

    <style type="text/css">
    @import url("/path-to/handheld.css") handheld;
    </style>

    atau

    <style type="text/css">
    ...
    @media handheld {
    #content {
     width:90%
     }
    }
    ...
    </style>

    Belum lagi dukungan khusus untuk iPhone. Pilihan negosiasi konten di sisi ’server’ jadi salah satu jalan keluar.

  • dukungan JavaScript, SVG (‘Scalable Vector Graphics’) yang belum sempurna.
• Koneksi Internet
  tersedia pilihan akses via GPRS (‘General Packet Radio Service’), CDMA (‘Code Division Multiple Access’), hingga WiFi (‘Wireless Fidelity’).

Halaman dan aplikasi web untuk desktop yang ada pun belum tentu mendukung versi mobile sepenuhnya.

Rekomendasi W3C Mobile Web

Rekomendasi W3C Mobile Web Best Practices (MWBP):

1. Design for One Web
2. Rely on Web standards
3. Stay away from known hazards
4. Be cautious of device limitations
5. Optimize navigation
6. Check graphics & colors
7. Keep it small
8. Use the network sparingly
9. Help & guide user input
10. Think of users on the go

Konsep ringkasnya:

1. Desain One Web

   Jika URI (‘Uniform Resource Identifier’) diakses dengan perangkat berbeda, tiap halaman web versi desktop dan mobile masih berhubungan logis dengan konsep yang tidak jauh berbeda. Jika memungkinkan, tes langsung di peramban mobile, atau setidaknya emulator.

2. Standar web

   Gunakan cara penulisan kode yang valid dan terstruktur dengan semantik yang baik/logis. Lalu sajikan konten (karakter, teks, gambar, foto, audio, video) sesuai tipe format (HTML ['HyperText Markup Language'], XHTML ['Extensible HyperText Markup Language'], SVG ['Scalable Vector Graphics']) yang dipahaminya. Coba halaman web yang memuat inline SVG ini di peramban mobile Anda (maaf, bukan untuk Internet Explorer!). Atur tata letak/tampilan/desain dengan bantuan CSS (‘Cascading Style Sheets’).

3. Hindari praktik buruk berikut

   Penggunaan ‘pop-ups’, ‘open in new window’ tanpa peringatan pada pengguna, tabel untuk desain, grafis untuk spasi, ‘frame’, dan ‘image maps’.

4. Perhatikan keterbatasan perangkat mobile

   Jangan terlalu mengandalkan ‘cookies’, penggunaan JavaScript dan <object> yang berlebihan, serta ketergantungan pada CSS (termasuk variasi huruf beserta warnanya/’foreground’, dan gambar/warna latar/’background-color‘).

5. Optimasi navigasi

   Sediakan navigasi seperlunya di bagian atas halaman, konsisten, dan mengacu pada target ID yang tepat. Bila perlu, tambahkan ‘access keys’ pada menu yang sering diakses. Usahakan pula URI laman sesingkat mungkin. Ingat, terlalu banyak taut pada halaman akan membingungkan pengguna untuk menelusuri via ‘tabbing’.

6. Cek grafis dan warna

   Jika perlu, atur dimensi grafis di sisi ’server’, dan deklarasikan ukuran grafis di sisi klien. Haruskah menyajikan gambar resolusi tinggi via perangkat mobile? Sediakan teks alternatif untuk tiap elemen non-teks.
   Pastikan warna latar dan huruf memiliki kontras yang cukup. Dengan atau tanpa gambar serta CSS sekalipun. Sehingga properti CSS seperti display, float, diminimalisir pemakaiannya.
   Untuk menjaga fleksibilitas, sebaiknya gunakan ukuran relatif (%, em, xx-large, dll.).

7. ‘Keep it small’ (KIS)

   Bisa dicapai dengan penulisan kode yang efisien. Sehingga ukuran berkas X/HTML per halaman dan CSS masih dalam batas yang direkomendasikan. Usahakan hanya menggulung layar satu sisi (vertikal/atas-bawah).

8. Gunakan jaringan sehemat mungkin

   Hindari konten ‘auto refresh’ dan animasi berlebihan (terkait penghematan batere di sisi pengguna). Gunakan ‘redirect’/pengalihan (3xx) dan kompresi (gzip) berkas di sisi ’server’. Juga kurangi jumlah ‘request’/pemanggilan fitur (terutama JavaScript) di luar situs utama.

9. Bantuan dan panduan ‘input’

   Jangan terlalu banyak klik untuk mencapai menu/fitur tertentu. Gunakan <label> sewajarnya. Sertakan opsi ‘input’ dibanding mengetikkan teks panjang lebar, jika memungkinkan.

10. Berpikir sebagai pengguna

    Cantumkan judul halaman yang ringkas tapi deskriptif dan jelas.

Simpulan

Menurut saya, jika diperingkas lagi, konsepnya hanyalah seputar:

• standar web (X/HTML, CSS, JavaScript),
• ‘plain old semantic HTML’ (POSH) + semantik X/HTML,
• aksesibilitas,
• kebergunaan (‘usability’).

Untuk versi mobile, intinya, meningkatkan fleksibilitas demi memuaskan lebih banyak pengguna. Ini juga salah satu alasan Dani Iswara .Net menggunakan desain web satu kolom. Selain kemudahan pemeliharaan.

Cek juga pengujian desain web mobile-friendly.

Share on: Delicious™ | Digg™ | Facebook™ | Twitter™.