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 :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/
Tentang Penulis
Pupung Budi Purnama - Bukan pakar atau ahli, hanya seorang freelance web designer, tinggal di Bandung, Jawa Barat. Bergelut di dunia web sejak 1999, pernah bekerja di beberapa perusahaan IT sebagai desainer. Sehari-hari, ia menjalankan sebuah perusahaan web development dari kamarnya.
34 Comments
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.
Ribet jg buat IE…
Tampilan persis sama di tiap peramban mungkin semu. Setidaknya fungsional di kebanyakan peramban lah.
Tambahan buat testing versi mobile, selain test on the road, bisa dicek juga dengan W3C mobileOK atau ready.mobi.
Yang tes aksesibilitas versi WCAG 2.0, bisa coba ATRC Web Checker (masih dalam pengembangan).
IE di Linux bisa coba kombinasi Wine (versi sebelum 1.x) + script installer ies4linux.
Googling aja ya… :)