Desain Weblog-Website yang Ubiquitous

March 2, 2008 – 11:05 am by Dani Iswara

Tulisan ini akan memuat beberapa anjuran membuat blog / web yang ubiquitous menurut standar W3C (World Wide Web Consortium). Jika dimasukkan dalam lingkup ilmu kedokteran, mungkin terkait dengan consumer health informatics, medical informatics dan fisiologi (ergonomi)–terutama aksesibilitasnya.

Ubiquitous weblog / website maksudnya adalah situs web / blog yang dibuat sedemikian rupa hingga dapat diakses oleh siapa saja, kapan saja, dengan perangkat apa saja.

Yang membutuhkan ubiquitous weblog / website saat ini mungkin belum terlalu banyak, apalagi di Indonesia. Tapi bukan berarti dapat diabaikan, bukan? :)

Siapa saja? Kapan saja? Perangkat apa saja?

Siapa saja? Semua pengguna harusnya boleh dan dapat mengaksesnya. Mulai dari pengguna yang berkacamata minus, plus atau silinder. Hingga saudara-saudara kita yang buta warna dan dengan ketidakmampuan tertentu (people with disabilities). Hendaknya mereka dapat mengakses suatu situs web / blog dengan nyaman. Tanpa diskriminasi media informasi.

Kapan saja? Dengan ketersediaan jaringan Internet, situs web / blog dapat diakses kapan saja saat dibutuhkan. Baik sepanjang hari (24 jam), saat pengguna berada dalam kampus, kantor, rumah bahkan di perjalanan / dimana saja. Tentunya dengan bantuan perangkat teknologi mobil.

Perangkat apa saja? Pada komputer misalnya Internet Explorer (yang masih dominan penggunanya), Firefox, Opera, Netscape, Camino, Safari, Maxthon, Flock, SeaMonkey, dll. Pada perangkat mobil / bergerak (mobile) misalnya dikenal peramban Blazer, Opera Mini, Pocket Internet Explorer, Minimo, Safari, Blackberry Browser.

Jika ditambahkan faktor aksesibilitas, situs blog / web sebaiknya juga dapat diakses oleh perangkat yang belum bisa membaca javascript dengan baik. Mampu juga digunakan oleh pengguna yang memakai peramban atau perangkat pembaca bermoda suara (speech reader). Pengguna yang fakir berhemat atau pengguna Internet dengan biaya koneksi berbasis volume (volume-based)–dengan moda ‘berselancar tanpa gambar’ (disable images), hendaknya tetap mampu membaca halaman web / blog dengan nyaman tanpa kehilangan informasi yang ada.

Beberapa tips (untuk kebutuhan teknis; berstatus masih dalam pengembangan) yang dianjurkan dalam membuat halaman web / blog untuk akses mobil:

  1. Lebar layar minimun 120 px (pixels) atau lebih baik menggunakan, misalnya width:90%[?] (fluid design)
  2. Berbasis XHTML 1.1 Basic dengan tipe muatan (content type) application/xhtml+xml
  3. Character encoding utf-8
  4. Gambar berformat JPEG atau GIF 89a
  5. Total ukuran suatu halaman maksimal 20 kilobytes
  6. Warna minimal 256 colors
  7. Mendukung CSS (Cascading Style Sheet) level 1 atau 2
  8. Menggunakan HTTP1.0 atau HTTP1.1
  9. Menghindari pemakaian script dan plugin tertentu yang berjalan di sisi pengguna
  10. Jika terpaksa harus memuat script, gunakan onclick dibandingkan memakai onmouse atau onkey
  11. Memberi atribut alt, width, height pada gambar atau tiap elemen img. Terutama mengantisipasi pengguna yang memilih berselancar dengan moda ‘hanya teks’ (text-only / disable images) untuk menghemat lebar pita (bandwidth) dan biaya koneksi Internet
  12. Menggunakan judul laman (halaman awal) yang singkat, misalnya http://example.org dibandingkan http://example.org/index.html. Sehingga memudahkan mengetiknya dengan pena stylus atau pilihan entri lainnya (papan / alas tombol jari [keyboard / keypad of typewriter], papan ketik virtual)
  13. Menggunakan judul halaman yang ramah pengguna (serta mesin pencari) seperti http://example.org/example dibandingkan http://example.org/example.html
  14. Sebaiknya meletakkan taut navigasi yang mudah terlihat saat awal situs tampil seluruhnya
  15. Memberi keterangan taut (bukan hanya sekadar ‘click here‘). Belum tentu semua taut aktif yang bertuliskan ‘click here’ menuju situs yang sama
  16. Menghindari penggunaan pop-ups, pop-unders, gambar iklan yang besar
  17. Mengusahakan scrolling hanya satu sisi (fluid design[?])
  18. Menerapkan desain yang fleksibel (fluid design) pada width, font-size. Terutama pemanfaatan persentase dan ukuran relatif lainnya, seperti em, ex, bolder, larger, thick
  19. Menghindari penggunaan elemen frame (frameset, iframe)
  20. Mengujinya di emulator atau langsung di peramban mobilnya.

Selebihnya mengacu pada standar web dan aksesibilitas yang ada.

Nantinya kita dapat menguji validasi ubiquitous weblog dengan status ‘mobileOK’, tetapi masih dalam pengembangan. :)

Bacaan:

Share :
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • Live
  • Technorati
  • YahooMyWeb
  • Furl
  • Ma.gnolia
  • NewsVine
  • StumbleUpon

Last updated: Sunday, March 2, 2008 at 5:29 pm

You are free to share (copy, distribute and transmit) this blog post under the similar license (Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported; CCA-NC-ND 3.0 Unported). Please put these link on your copy:
Taken from: Desain Weblog-Website yang Ubiquitous by Dani Iswara (Dani Iswara .Net).

4 Responses (2 Trackback/s) to “Desain Weblog-Website yang Ubiquitous”

1. By ur-icon devari on Mar 2, 2008 at 14:21:17
Using Mozilla Firefox Mozilla Firefox 2.0.0.12 on Mac OS Mac OS X

klo blog saya dihubungkan dengan no 11,12 dan 19 gimana bli dani?
juga begini nih, blog saya klo dibuka pake IE6 kadang2 sidebar nya drop kebawah, sedangkan browser lain terlihat ok ok saya, kenapa ya bli? ini terjadi pada artikel artikel tertentu di blog saya. misalnya artikel ‘there is meat in my eyes’.

2. By ur-icon Dani Iswara on Mar 2, 2008 at 15:18:23
Using Mozilla Firefox Mozilla Firefox 2.0.0.12 on Linux Linux

devari:
brgkt ke lokasi.. :)

bbr jenak kmd..

ngga usah tll serius bli.. :)
scr saya bukan desainer web,
kl mo lbh puas, cb dinikmati sendiri..
diliat pake ’small screen rendering’nya ekstensi firefox yg ‘web developer’ atau di opera ada yg terintegrasi scr standar utk ’small screen rendering’..mnrt saya sih sejauh ini blog bli aman2 aja.. :) yg penting muatannya..jeg kocak abiz..

kl menu samping yg melorot, biasanya krn bagian/elemen main content ada yg ‘ngambil jatah’, misalnya ada gambar/objek yg terlalu lebar ato interpretasi peramban yg berbeda thd bbrp satuan ukuran desain web..scr IE gitu loh.. :) cmiiw ya..

2 Trackback(s)

  1. May 22, 2008: Medical Weblog Design - Dani Iswara .Net - Indonesia Physician Weblog - Using WordPress WordPress 2.5.1
  2. May 24, 2008: Semantik XHTML, Aksesibilitas, SEO - Dani Iswara .Net - Indonesia Physician Weblog - Using WordPress WordPress 2.5.1

Post a Comment

You may read again from the Top

  • Strict XHTML (semantic markup) tags allowed (see Site Help - Leaving Comment)
  • All tags must be properly closed
  • Comment contains some words (eg. URLs) will be held in moderation
  • Paragraphs and line breaks are automatically converted
  • Keep relevant. Inappropriate comments may be edited, moderated, or removed
  • To have image beside your comment, get Gravatar!