Posted on 17 Oct 2009 by zaM

Rekap Pertanyaan 1-10 Tanya Jawab XHTML/CSS Web Design Usability Lewat Twitter

Acara “Tanya jawab XHTML/CSS web design usability lewat twitter” sesi pertama sudah berjalan, tak kurang dari 10 pertanyaan pertama sudah masuk dan syukurlah ternyata saya masih bisa menjawab :) meski tidak bisa terjawab secara langsung dan cepat, lewat postingan sebelumnya sudah saya sebutkan bahwa acara ini tidak dibatasi oleh waktu karena itu kita tidak perlu tergesa-gesa, selain karena berbagi waktu dengan pekerjaan juga karena saya harus browsing, googling sana-sini untuk memberikan jawaban. Disinilah poin pentingnya, bahwa akhirnya saya terpaksa belajar lewat pertanyaan yang masuk, setiap pertanyaan menjadi selayaknya tugas belajar di sekolah, dan siapapun yang bertanya ibarat guru bagi saya. Jawaban akhirnya juga bisa menjadi bahan untuk berbagi dan belajar bersama.

by trovster @flickr

Berikut rekap pertanyaan 1-10 (sesi 1) beserta jawabannya:

Pertanyaan 1 #zam gmn ya caranya bikin layout yg kolomnya sama tinggi pake css? @rizkysyazuli

• cara1 buat <div> sbg wrap dan <div> dalam <ul><li> sbg col. wrap display:table <ul> display:table-row <li> display:table-cell @rizkysyazuli
• keuntungan cara1 cukup sederhana tapi kekurangannya tidak bisa berjalan di IE7 apalagi IE versi dibawahnya @rizkysyazuli
• cara 2 mengakali tinggi kolom <div> menggunakan background image di wrap background-repeat: repeat-y; (repeat vertical) @rizkysyazuli
• keuntungan cara 2 cukup mudah kekurangan hanya bisa untuk kolom yg dibedakan warna oleh image dan tidak berlaku di fluid width @rizkysyazuli
• cara3 buat container <div> bertumpuk sebanyak jumlah kolom <div> masing2 kolom beda background dan tiap container meneruskan @rizkysyazuli
• cara3 semua <div> baik container maupun kolom float:left untuk container diberi jarak right: sesuai lebar kolom masing2 @rizkysyazuli
• keuntungan cara 3 bisa berjalan di semua browser kekurangannya agak ribet @rizkysyazuli
• cara 4 menggunakan jQuery dimana setiap <div> dalam container dibuat otomatis sama tingginya @rizkysyazuli
• keuntungan cara4 ok di semua browser kekurangan sulit mengatur <div> dlm <div> maupun <div> untuk clear:both ganti dgn <span> @rizkysyazuli

pertanyaan 2 #zam Sebenernya seberapa penting sih kita pake xhtml/css valid itu? @alitmahendra

• 2a) sangat membantu dalam cross-browser dan cross-platform. XHTML/CSS valid mengurangi jumlah error dan bug @alitmahendra
• 2b) bagus untuk SEO. Struktur XHTML/CSS yang valid dan rapi lebih mudah ter-index oleh mesin pencari @alitmahendra
• 2c) mempercepat loading halaman dan menghemat space hosting. XHTML/CSS valid meminimalisasi tag-tag yg tdk perlu @alitmahendra
• 2d) memudahkan dalam maintain dan redesain. Struktur XHTML/CSS valid dan rapi mudah dipelajari perlu terutama dalam kerja tim @alitmahendra
• 2e) lebih profesional dan mampu bersaing. web developer dengan karya web yg valid XHTML/CSS akan memiliki nilai lebih @alitmahendra

Pertanyaan 3 #zam Sebagai web designer, apakah kita harus “strict” dengan web accesibility? @fanari

• 3a) seharusnya YA karena web designer termasuk dalam bagian proses pembuatan dan penyajian web secara utuh @fanari
• 3b) Tapi kenyataannya aksesibilitas web dalam dunia desain web (lokal) mungkin masih sebatas wacana @fanari
• 3c) masih sulit mencari website di Indonesia yang sudah aksesibel untuk orang-orang dengan keterbatasan pancaindera @fanari
• 3d) salah satu contohnya http://mitranetra.or.id oleh Eko Ramaditya Adikara http://ramaditya.com Blogger tunanetra yg multi talenta @fanari
• 3e) web designer dituntut XHTML/CSS valid juga harus ingat kode aksibilitas (rel, nofollow, title, tag, alt, dll) http://w3.org/WAI @fanari
• 3f) terus terang ini PR untuk web designer (termasuk saya) karena mengakses serta berinteraksi dgn website adalah hak semua manusia @fanari

pertanyaan 4 #zam ada cara lain agar div kontainer ga lepas kalo div didlm pake float selain diberi div clear:both dbwh? @alitmahendra

• 4a) ada 3 cara untuk clearing float. Cara 1 membuat <div> kosong dengan CSS clear: both setelah kolom *cara lama /cara umum* @alitmahendra
• 4b) cara 2 pakai overflow: hidden di container tapi di beberapa browser mengharuskan adanya tag width atau height @alitmahendra
• 4c) cara 3 pakai tag :after CSS pseudo-class misalnya .clearfix:after{ tapi untuk IE7 / IE6 harus menambah tag hasLayout @alitmahendra

pertanyaan 5 #zam web usability. saya sering dengar itu. tapi apa itu sebenarnya dan contoh konkretnya bagaimana? @bocahmiring

• 5a) web usability, definisi istilah secara bahasa: kemudahan penggunaan web atau kebergunaan web @bocahmiring
• 5b) web usability = bagaimana membuat pengunjung mudah mengetahui/memahami semua pesan yang ada di dalam website @bocahmiring
• 5c) contoh: untuk icon play music tombolnya segitiga menghadap ke kanan, bukan ke kiri @bocahmiring
• 5d) contoh: tatak letak form login username di kiri/atas. dan password di kanan/bawah kalau dibalik bisa bingung dan salah isi @bocahmiring
• 5e) contoh: daftar list text mudah dibaca jika dalam format <ol>, <ul>, <li> bukan format <p> dan banyak contoh lainnya @bocahmiring

pertanyaan 6 #zam Gimana cara slicing yang enak dari file PDF? @hfz

• 6a) file mockup PDF memang sangat tidak direkomendasikan, seharusnya PSD (hasil Adobe Photoshop) atau PNG (hasil Macromedia Fireworks) @hfz
• 6b) kemungkinan kita (terpaksa) menerima PDF karena: (1) revisi di tengah jalan (2) klien tidak mau tahu (banyak di GetAFreelancer.com) @hfz
• 6c) Buka pakai Acrobat Reader view 100% – PrintScreenSysRq – copy paste ke Adobe Photoshop (cara tradisional) @hfz
• 6d) @ Photoshop pakai Rectangular Marquee (M) untuk menentukan jarak lebar/tinggi space, margin, padding dll serta untuk cropping image @hfz
• 6e) pakai Type Tool (T) untuk menulis 1 karakter atau 1 kata sekedar sebagai pembanding untuk memastikan ukuran dan jenis font @hfz
• 6f) pakai Eyedropper Tool (I) untuk menggambil komposisi warna RGB dari text, gambar maupun elemen lainnya @hfz
• 6g) tetap buka PDF di Acrobat Reader utk select text dan copypaste agar tidak mengetik ulang (AR 7.0 support *tdk berlaku utk graphic*) @hfz

Pertanyaan 7 #zam enaknya Web usability atau aksesibilitas Web dulu ya? Web yang aksesibel umumnya akan usable atau sebaliknya? @daniiswara

• 7a) Itu tergantung orientasi pembuatan web sejak awal untuk apa Penentuan prioritas masing2 menentukan proses design selanjutnya @daniiswara
• 7b)contoh: web yg dibuat untuk tunatera lebih prioritas accessible daripada usable sedangkan web pada umumnya mungkin sebaliknya @daniiswara
• 7c) Idealnya semua website harus usable, navigasi yg mudah dan sederhana, text yg mudah dibaca, tata letak tidak membingungkan @daniiswara
• 7d) Idealnya semua web harus accessible, baik di semua browser, semua platform, dan bisa dibaca device untuk yg disable/difable @daniiswara
• 7e) nyatanya jgn jauh2 bahas soal cross platform dan cross device soal cross browser saja web designer banyak terjebak soal IE6 @daniiswara
• 7f) web accessible belum tentu usable dan web usable belum tentu accessible karena alat ukurnya berbeda. atau perlu riset dulu? @daniiswara
• 7g) contoh web yg bagus design layoutnya (secara visual dan usable) belum tentu bisa diakses (accessible) baik di semua device @daniiswara
• 7h) tapi scr markup mgkn web accessible umumnya akan usable krn standart coding web accessible lebih strict daripada web usable @daniiswara

pertanyaan 8 #zam Pernah pake css framework? Sebaiknya pilih yg mana? Kasih rujukan dong. standarisasi yang pas untuk kerja tim :) @armono

• 8a) Pernah. dan masih pakai CSS framework 960 Grid System http://960.gs @armono
• 8b) rekomendasi 960.gs krn selain XHTML/CSS juga menyediakan file template PSD/PNG dll sebagai acuan Mockup. Cocok untuk kerja tim @armono
• 8c) dan setahu saya teman2 juga pakai 960.gs seperti @madeforyou, @didats, @halomomo, @jauhari, @icreativelabs dan lain-lain @armono
• 8d) di web http://960.gs kita lihat banyak contoh web popular dengan design bagus-bagus pakai 960.gs misalnya http://woothemes.com @armono
• 8e) didukung oleh GridFox http://is.gd/4exxN Addons Firefox yang bisa kita jadikan view-tester di browser sesuai acuan kolom2 960.gs @armono
• 8f) Selain itu sebenarnya ada banyak: Blueprint, YUI Grids, YAML dll tapi maaf belum bisa review karena belum mencoba satu-satu :) @armono

pertanyaan 9 #zam hows your opinion about css framework? @kakilangit

• 9a) CSS framework dibuat untuk mempermudah dan mempercepat proses pembuatan web (konversi PSD/PNG ke XHTML/CSS) @kakilangit
• 9b) lebih cepat karena CSS framework menyediakan paket kode standart, jadi tidak perlu mengetik kode yg sama berulang-ulang @kakilangit
• 9c) Ada cukup banyak CSS framework yang bisa kita download gratis, kita tinggal pilih mana yang sesuai dengan selera/cara kita @kakilangit
• 9d) Hati-hati salah memilih CSS framework bisa membuat pekerjaan slicing jadi lebih lama Tidak semua cocok dengan kebutuhan kita @kakilangit

pertanyaan 10 #zam kalo saya mau buat desain 1 kolom. kira2 butuh grid kayak gitu gak? @kusaeni

• 10a) Grid system (CSS framework) memang lebih dibutuhkan untuk pembuatan website multi kolom (misal: blog magazine style) @kusaeni
• 10b) namun Grid system tidak hanya menyediakan pengaturan kolom, juga mengatur Typography, Form, CSS Reset dan lain-lain @kusaeni
• 10c) karena itu Grid system dlm web 1 kolom bisa dimanfaatkan utk pengaturan tata letak banner, blockquote, list dalam kolom, dll @kusaeni
• 10d) Pada prakteknya, paket kode dalam Grid System / CSS Framework boleh kita kostumasi sesuai project yang sedang kita tangani @kusaeni
• 10e) Tapi keputusan terakhirnya ada di tangan webdesigner sendiri apakah lebih mudah menggunakan Gid system atau tidak :) @kusaeni

Terimakasih untuk semua teman-teman yang bersedia mengajukan pertanyaan serta beberapa teman yang ikut membantu sharing. Saya masih membuka sesi kedua tanya jawab ini dengan tema yang sama. pertanyaan sesi kedua ini dibatasi 10 pertanyaan, dan mungkin berlaku untuk sesi-sesi selanjutnya. silahkan untuk teman-teman yang sudah berniat mengajukan pertanyaan tapi belum sempat bertanya :) saya tunggu