Langkah-Langkah Pengetesan Sebuah Desain CSS
“Kok desain gue jadi ngaco di Mozilla/Firefox? Di IE bagus kok”. Well, ini jawaban gue untuk pertanyaan paling basi di dunia web desain itu.
Gini lho, IE 5 dan 6 punya banyak banget bug, jadi kalo platform development utama kamu adalah IE, dari awal kamu udah berpatokan pada hal yang salah. Jadi kali ini gue mau nunjukin langkah-langkah yang lebih menjamin kompatibilitas antar browser.
Gunakan Doctype Yang Sesuai
Doctype di bagian paling awal kode dokumen (x)HTML pada dasarnya berguna untuk menentukan mode layout dokumen tersebut. Tanpa ini browser akan beralih ke quirks mode, yang secara kasar bisa berarti merender sebuah sebuah dokumen seenaknya dewek.
Untuk hasil konsisten gue sarankan pake Doctype XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Mulai Dari Yang Mendukung CSS Lebih Baik
Biarpun kamu biasa browsing pake IE tapi waktu mendesain mendingan kamu menggunakan browser yang lebih standards-compliant seperti Firefox atau Opera. Kalo gue sendiri urutannya seperti ini:
- Firefox (Win XP): Banyak add-on yang membantu banget proses pengembangan web. Ngga ada lawan kalo soal ini.
- Opera (Win XP): Satu-satunya browser yang lulus acid test. Kalo ada masalah disini kemungkinan ada sesuatu yang salah.
- Safari (OS X): Perlu diinget kalo koleksi font dan cara rendering teks di sistem berbasis Unix itu beda, tapi secara umum ngga perlu perhatian khusus.
- Konqueror (Ubuntu): Catetan seputar font juga berlaku disini. Dan sejauh ini juga masih blom ada masalah.
- Internet Explorer 7 (Win XP): Mulai was-was, biarpun dukungan CSS udah jauh lebih lengkap tapi masih ada aja masalah
Tapi dengan sedikit hack atau conditional comment masalah beres. - Internet Explorer 6 (Win XP): Tantangan terbesar ada disini. Untungnya bug-bug IE 6 terdokumentasi dengan baik, jadi tinggal Googling sebentar aja. malah kalo udah berpengalaman gejala-gejala bug sebenernya cukup jelas kok.
Harus gue akuin urutannya ngga selalu gitu, kadang gue males ngecek di Linux. Browser laennya? Kalo Netscape dan semua yang berbasis Mozilla gue asumsikan punya kemampuan sama seperti Firefox. Dan IE 5 versi Windows ataupun Mac biasanya ngga gue urusin lagi, toh browser-browser ini juga udah jarang beredar — Kecuali ada permintaan spesifik atau duit ekstra ya 
Testing Untuk Perangkat Mobile
Ini era tri-ji bung, ngga ada salahnya untuk bersiap dari sekarang. Opera punya fitur berguna untuk melihat bagaimana tampilan desain kita di layar kecil (Opera Mobile).
Pilih menu View > Small Screen atau tekan Shift + F11
Testing Aksesibilitas
tanpa table, semantik, separasi antara struktur dan presentasi. apa kata-kata itu kedengarannya aneh buat kamu? Coba gunakan browser yang text-only seperti Lynx (Linux) dan lihat apakah kamu bisa meneluri situs kamu sendiri. Sedikit tips, di Firefox coba matiin style, image, dan JavaScript, hasilnya cukup mirip 
Catatan Tambahan
Ngga ada Linux? PC dual-boot bukan hal aneh jaman sekarang. sebuah CD Ubuntu Linux misalnya, gampang didapet dan di-install, jadi jangan cari-cari alesan deh. Kalo testing di Mac? ngga punya MacBook? ndeso! tapi ada sih layanan gratis di BrowsrCamp.com untuk mengambil skrinsyut desain kamu jika dilihat melalui Safari.
Terakhir kalo kamu masih perlu hasil tes tambahan dan punya sedikit dana ekstra ada BrowserCam yang bisa membantu kamu mengetes di berbagai platform sekaligus. Ada free trial 24 jam juga lho 
Penulis:
Rizky Syajuli - 23 / Male / Jakarta
Web Desainer dan konsultan Search Engine Marketing.
http://blog.kometdigital.web.id/
Boo! gak ada test Safari. Safari merender HTML dan CSS berbeda dari browser yang disebutkan. Juga bisa merender warna berbeda daripada browser yang ada di Safari.
Perlu di ketahui juga, browser Firefox di Mac juga kadang menampilkan hasil yang beda dengan Firefox di PC.
Iya, tapi ada ide gak ngetes safari dimana ? soalnya gak ada Mac nih…
warna apa Kus? gue sendiri juga sering ngalamin perubahan warna grafis yg rada aneh di Firefox Win XP. ini kejadiannya klo formatnya PNG. Kalo kowe gimana?
Monitor PC dan Mac secara default mempunyai gamma yang berbeda. Oleh karena itu, tampilan di Mac terlihat lebih pucat dibandingin yang di PC. Default gamma di Mac cocok untuk printing, sedangkan PC lebih ke screen.
Silahkan baca ini untuk solving the issue:
http://blogs.smugmug.com/onethumb/2007/02/14/this-is-your-mac-on-drugs/
Perasaan ada satu website yang bisa nge-render tampilan HTML seperti yang ditampilkan di Safari. Cuman dah lupa…
Hm… kalau Color Profile PC kan bisa di ganti tuh, ada informasi nggak biar PC kita bisa menyesuaikan warnanya dengan mac… Lagi nabung nih, buat beli Mac…
bukannya color profile buat dekstop/web slalu RGB dan untuk print out cocoknya CMYK ? Setau Rio kalo web pakenya warna2 RGB deh
Emulator mac yang ringan yg bisa di run di windows ada gak ya ?
maaf nih ndeso gak punya macbook hehehe
untuk tampilan web memang rgb, gitu sih dulu gue di ajarinnya…
@achmadbiz: ada Microsoft Virtual PC 2007 yg bisa didonlot gratis dari webnya Microsoft. tp gw sendiri blom pernah nyobain, jadi klo PC elo ancur jangan salahin gw ya
Mm, pernah denger quote dari oom Eric Meyer. Tentang testing di IE, biasanya dia nglakuin itu *setelah* semua desain benar secara web standard (ato dengan kata lain selama development pakai Firefox/Safari/Opera aja dulu). Kalau udah selesai, baru dilakukan debugging di IE (dan lebih mudah memakai conditional comment).
Selama ini saya selalu testing antar-browser di satu waktu yang sama dan bisa dikatakan emang membuat frustasi. Lagipula kalau dipikir-pikir kata om Meyer tadi benar juga. Dia nggak mau di awal-awal harus memusingkan IE dulu; “that way lie madness,” katanya.
edit: interview dengan Eric Meyer bisa dibaca di sini:
http://blog.lunarpages.com/2007/01/31/eric-meyer-interview-css/
web developer tools (most wanted)…
The tools you must have to become a web developer :
Ultimate web designer must have is BrowserPool. This is the most wanted tool ever for someone like me . It is multiple browser version tester including ability to select OS as well
For testing remot…
gw biasanya testnya langsung di 4 browser (firefox, ie6, ie7, opera). bersamaan. gag pake ini dulu ato itu dulu.
kenapa?
karena kalo di semuanya udah bagus, trus mo nyocokin ke ie6 dan ie7 yg suck, rata2 musti dari awal lagi… hehehe…
enaknya, kalo udah sering ngadepin si ie. jadi bisa ngerti gimana manjain dia.
Cara kerja gue sama ky Didats, jadi pas ngedesain selalu langsung buka 4 buah browser (FF, IE6, IE7 dan Opera).
Sekarang IE7 udah agak enakan kl buat ngetes2, hasilnya hampir selalu sama ky di FF & Opera, yg parah IE6 tuch, bener2 katcrut tuch browser :P.
Wah… Aku juga idem sama Didats dan Yogi… Kita gak mau balikan lagi dari awal hanya karena gak tau salah di IE itu sebelah mananya :d
tapi setelah baca2 cara mana aja ternyata sama, aku ada beberapa tips tentang “bug fixing” untuk css layout… nanti kl sempet aku tulis deh…
coba browsershots.org , multi platform , multi browsr dan mendukung flash serta java.
Dan yang penting gratis!!!
koq kl gw malah bgaus2 ajah sih kl di IE malah kl selaen IE ngaco bgt..malah kata atasan gw paling support itu IE… duh..gw seperti hidup di dunia yg terbalik nih..
@nindya: justru itu kan pertanyaannya. kenapa di IE bagus, dan di browser laen ngaco. duhh…
gini deh, gue bikin simpel aja. pilih jalan IE yang hanya didukung browser itu doank. ato jalan yang cross-browser, yang didukung semua browser di planet ini (termasuk IE).
bukannya maksa, tp gue milih yg terakhir. soalnya label “best viewed in Internet Explorer” udah basi banget…
Kalo testing di Mac? ngga punya MacBook? ndeso
kata-katanya terlalu mengejek mas!!!!!!
Yey! skarang udah ada Safari buat Windows loh! buruan unduh!
Safari browser : Now available for Windows…
Yey! now we can test our web apps with Safari on Windows. Don′t forget to download Flash plugin too.
See how the compatibility table among other browsers
I wonder could it be Safari on Linux too?
Download Safari »
Flash Plugin
……
iya safari 3 dah bisa dipake diwindows tuh sekarang.
Klo gw ngetesnya kok kebalik ya :p ..
Safari, Firefox, Opera, dan ga di test di IE, ga punya pc soalnya .. lebih ndeso lg :p
akhirnya nemuin yg versi bhs indo ttg cross-browser… hehehee….. BAGUS!!! terusin dan bahas lagi donk mas utk cross-browser, khususnya buat CSS table-less.
harus kuakui, kadang menyebalkan juga kalo di mac [safari, firefox, opera] udh oke bgt di coding, eh pas cek IE-nya windows jd busuk
oke mas pupung, terusin lg ttg ini… thanks
sangat terganggu dengan klaim “Gini lho, IE 5 dan 6 punya banyak banget bug” seolah browser yg lain tidak bermasalah HHHH
btw jangan salahin browser mas, browser itu udah dibuat oleh ratusan programmer, masak designer dengan ilmu cetek bisa kasih komen se-enak udelle dewek
yg jelas jika anda2 adalah CSS Designer semestinya harus bisa menyesuaikan dengan kondisi masing2 browser, ok Opera dan Firefox setali 3 uang, mampu menanggapi dengan baik sebuah dokumen CSS, tapi jika desain tsb kemudian dibuka di browser lain ternyata bermasalah, apakah lantas browser tsb yg bermasalah?
menurutku sih JELAS-JELAS SDM-nya yg tll bandeL gak mau memandang browser lain..
yang baik seharusnya adalah
pada saat develop gunakan browser yang paling banyak digunakan (IE, Firefox, Opera)
malu2in designer aja kalo sebuah desain web gak bisa optimal di 3 browser tsb
dari seseorang pengguna the Power of Mac
tankz gue jd bisa download safari.x lg tankz ya bwt rio
salam kenal teman-teman yang ada di design world master. saya ingin tanya ada yang mengerti tentang web assessment ???saya mohon bantuannya ya.. karena materi tersebut buat skripsi saya.. Terima Kasih
belon ada konklusinya negh om..
mudah mudahan setelah baca ini rada bisa dehh
Dear Semuanya,
Cuman mo ngecek aja kalo ada tanggapan buat komentar dari
superdeuthman Says:
July 6th, 2007 at 11:23 am
I seh setuju dengan pendapat beliau untuk beberapa hal. Tapi mungkin kurang setuju untuk klaim “masak designer dengan ilmu cetek bisa kasih komen se-enak udelle dewek”. Untuk superdeuthman, U mungkin bisa kasih beberapa referensi karya U untuk menunjukkan bahwa U sudah veteran =) Gimana ?
Terima kasih atas perhatiannya
@superdeuthman:
ngga ada yg bilang gitu. browser-browser laen juga pasti punya bug. tapi berhubung mereka open-source dan di develop oleh community, bug-bug cepet ditanggulangi.
sedangkan IE 6? 4 tahun kita harus ngadepin bug-bug yang ga pernah diberesin.
tp emang gue juga akuin klo masalah ngga selamanya berasal dari browser. jadi satu lagi saran buat yg laen: validasikan dulu dokumen web-nya ketika menemui masalah.
situ punya saran supaya kita-kita disini ngga malu-maluin komunitas desainer?
wah thanks semuanya thanks…terutama buat om pupung…gw juga dari dulu dibikin ribet sama masalh ini. klo gw biasanya cuma testing pake 2 browser ajah…Firefox baru IE. Dan sekarang udah dapet Safari..mau coba ahhhh disedootttttt
SOAL…
+++++++++++++++++++++++++++++++++++++
browser itu udah dibuat oleh ratusan programmer, masak designer dengan ilmu cetek bisa kasih komen se-enak udelle dewek
+++++++++++++++++++++++++++++++++++++
sorry dech, lagi emosi sih, jadi mohon maaf, btw aku bukan desainer top, menurutku yg desainer top tuh ya http://www.ndesign-studio.com ama desainer2 templatemonster.com
yg ga pernah protes dgn para browser
Gw siyh dah jarang nge-design lg, tapi gw selalu merhatiin hasil design dari rekan kerja di sebelah gw, kalo ada yg kurang2 selalu gw poles sendiri sambil ngasih tau dan diskusi ke dia setiap ada suatu kasus.
Untuk browser emang lebih enak dipake berbarengan semua waktu ngetest, kalo ada style yg beda tampilannya di lain browser, miring sana - miring sini, atau lebih panjang sana - lebih panjang sini, etc… gw biasanya pake penggabungan, dengan menge-cek pake JavaScript terlebih dahulu browser apa yg sedang dipake si user, baru kemudian kasih value di style CSS-nya.
komentar dari superdeuthman pedes juga tapi ada benernya sih. jangan kita nyalahin yang lain kalau ada yg kurang dari itu. mungkin kita telaah dulu gimana mengatasi semua itu, yg terbaik yg kita peke. selesai. thanks, jangan beratem ya.