“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 :P
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/
34 Responses to Langkah-Langkah Pengetesan Sebuah Desain CSS
Kuswanto March 26, 2007
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.
Pupung Budi Purnama March 26, 2007
Iya, tapi ada ide gak ngetes safari dimana ? soalnya gak ada Mac nih…
Rizky March 26, 2007
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?
Kuswanto March 27, 2007
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…
Pupung Budi Purnama March 27, 2007
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…
Rio March 28, 2007
bukannya color profile buat dekstop/web slalu RGB dan untuk print out cocoknya CMYK ? Setau Rio kalo web pakenya warna2 RGB deh
achmadbiz March 31, 2007
Emulator mac yang ringan yg bisa di run di windows ada gak ya ?
maaf nih ndeso gak punya macbook hehehe :D
adhi April 9, 2007
untuk tampilan web memang rgb, gitu sih dulu gue di ajarinnya…
Rizky April 10, 2007
@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 :)
Hafiz April 21, 2007
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.
Hafiz April 21, 2007
edit: interview dengan Eric Meyer bisa dibaca di sini:
http://blog.lunarpages.com/2007/01/31/eric-meyer-interview-css/
didats April 28, 2007
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.
Yogi May 9, 2007
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.
Pupung Budi Purnama May 10, 2007
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…
kus May 14, 2007
coba browsershots.org , multi platform , multi browsr dan mendukung flash serta java.
Dan yang penting gratis!!!
nidya May 22, 2007
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..
Rizky May 23, 2007
@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…
Hengki May 26, 2007
Kalo testing di Mac? ngga punya MacBook? ndeso
kata-katanya terlalu mengejek mas!!!!!!
Rio June 12, 2007
Yey! skarang udah ada Safari buat Windows loh! buruan unduh!
Ewin June 14, 2007
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
zum June 26, 2007
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
superdeuthman July 6, 2007
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
recha July 10, 2007
tankz gue jd bisa download safari.x lg tankz ya bwt rio
Nata Yusriadi July 17, 2007
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
mamat July 22, 2007
belon ada konklusinya negh om.. :D
mudah mudahan setelah baca ini rada bisa dehh
N/A July 24, 2007
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
Rizky July 29, 2007
@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?
wahya August 17, 2007
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