Halaman/Aplikasi Web versi Mobile
April 5, 2009 – 04:27 by Dani Iswara. Words count: 600.Last updated: Sunday, April 19, 2009 at 22:13.
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.
- pengenalan CSS (‘Cascading Style Sheets’) yang belum seragam. Peramban yang hanya mengerti salah satu metode di bawah ini
- 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):
- Design for One Web
- Rely on Web standards
- Stay away from known hazards
- Be cautious of device limitations
- Optimize navigation
- Check graphics & colors
- Keep it small
- Use the network sparingly
- Help & guide user input
- Think of users on the go
Konsep ringkasnya:
-
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.
-
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’).
-
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’.
-
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‘). -
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’.
-
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 sepertidisplay,float,diminimalisir pemakaiannya.
Untuk menjaga fleksibilitas, sebaiknya gunakan ukuran relatif (%,em,xx-large, dll.). -
‘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).
-
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.
-
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. -
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.
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com or use contact form.
Comment by riesurya on April 16, 2009 at 00:29:36
using Mozilla Firefox 3.0.8 on Windows XP
artikel yg ringkas dan cukup jelas. berarti untuk tahunya kudu pake perangkat handheld ya. Mas Dani, ada tahu solusi simulator handheld untuk di komputer? (kalo small screen rendering kan cuma layarnya aja, cmiiw)
Comment by Dani Iswara on April 16, 2009 at 01:50:29
using Mozilla Firefox 3.0.8 on Gentoo Linux
riesurya,
saya biasanya nambahin Opera Mini emulator & iPhone tester ke ekstensi web developer-nya fx:
bisa dicek di nambahin tools ke ekstensi web developer Firefox
Comment by jenggo on April 17, 2009 at 13:35:09
using Mozilla Firefox 3.0.3 on Windows XP
Wah.. Makasih link emulatornya mas..!
Btw, kayanya lebih baik meng-convert ke WML aja yah Mas?
Comment by Dani Iswara on April 17, 2009 at 14:50:23
using Mozilla Firefox 3.0.8 on Gentoo Linux
jenggo,
kayaknya iya, mas..panduan di checker-nya ready.mobi jg simple. ato pake google reader, mofuse, ato yg sejenis..
Comment by rismaka on April 20, 2009 at 04:09:57
using Mozilla Firefox 3.0.8 on Windows XP
Saya sebenarnya kurang mngerti tentang CSS, tapi sebagai referensi sepertinya saya melihat blog mas dani sudah tingkat expert.
O iya mas, saya mau tanya pengaruh validitas w3c dengan SEO. Themes blog saya setelah saya rombak jadi kacau xhtmlnya (tidak valid, banyak warning), apakah itu mempengaruhi SEO?
Comment by Dani Iswara on April 20, 2009 at 08:03:29
using Mozilla Firefox 3.0.8 on Gentoo Linux
rismaka,
ini bukan bidang saya, mas, cuman icip-2..jd sama-2 masih belajar lah..
imo, selama crawl mesin pencari Internet masih bisa membacanya, pengunjung ngga ribet makenya (usable), tampil aman di peramban lain, ngga usah terlalu berurusan dgn validasi xhtml
ngga ada jaminan masing-2..
Comment by Andre Lukmana on June 11, 2009 at 06:39:32
using Mozilla Firefox 3.0.6 on Windows XP
wah berguna bgt ni buat jadi referensi bikin mobile web..
Comment by Dani Iswara on June 11, 2009 at 20:04:28
using Mozilla Firefox 3.0.10 on Gentoo Linux
Andre,
semoga sukses buat statuzz-nya ya mas Andre..