Membuat webpage bagi beberapa orang cukup mudah, apalagi menggunakan software yang berbasiskan grafis seperti Macromedia Dreamweaver (sekarang Adobe Dreamweaver) dan Microsoft FrontPage. Banyak web desainer pemula akan mencoba hasil pekerjaannya menggunakan satu web browser. Tapi yang kadang tidak disadari adalah belum tentu tampilan dari satu web browser mirip dengan web browser lainnya. Hal ini tidak akan terlalu menjadi masalah bila kalangan atau target pasarnya tidak terlalu besar dan luas atau untuk digunakan sendiri. Akan tetapi ketika masuk ke dalam tahap produksi (publikasi) di mana pengguna yang mengakses webpage itu berasal dari berbagai daerah, menggunakan berbagai browser, dan dengan pengalaman web yang berbeda - mulai dari pemula sampai profesional - tentu hal ini bisa menjadi masalah besar.

Berdasarkan statistik, saat ini terdapat 5 web browser yang mendominasi pasar yaitu Internet Explorer (sekitar 60%), Mozilla Firefox (sekitar 30%), Safari (sekitar 5%), Opera (sekitar 3%) dan Konqueror. Browser seperti Safari, Opera dan Konqueror telah terbukti dapat me-render web sesuai dengan standar yang ada, sehingga hasilnya tidak akan berbeda antara yang satu dan lainnya. Firefox (serta browser lainnya yang menggunakan engine yang sama - Gecko) memiliki sedikit masalah pada standar tetapi tidak terlalu terlihat karena hasil yang dicapai melalui 3 web browser sebelumnya dengan Firefox hampir tidak berbeda. Pada rilis berikutnya yaitu versi 3, Firefox akan memenuhi standar web. Internet Explorer, browser yang paling menguasai pasar sampai saat ini, memiliki masalah yang besar dalam hal standar web (paling tidak sampai versi 7 saat ini). Untung saja di versi yang akan datang, versi 8, browser ini akan memenuhi standar web.

Masalahnya tidak semudah itu berhadapan dengan Internet Explorer. Dari statistik yang ada, sampai saat ini pasar yang paling besar saja masih ada di Internet Explorer 6 yang bahkan tidak dapat melakukan rendering terhadap gambar berformat PNG dengan benar. Padahal IE6 saat ini masih menguasai 30% lebih pasar web browser. Ini tidak terlepas dengan banyaknya pengguna Windows XP yang sudah menyertakan IE6 dalam instalasinya. Bukan hal yang mudah untuk melepaskan 30% pengguna web untuk pergi meninggalkan web anda karena halaman web anda tidak dapat ditampilkan dengan benar.

Umumnya perbedaan tampilan web dikarenakan CSS atau Cascading Style Sheet yang berfungsi untuk memberikan style kepada suatu halaman web. Browser seperti IE6 belum mampu menerjemahkan CSS dengan baik sehingga tampilan web di IE6 tidak sesuai harapan. Untuk itu ada beberapa hal yang harus diperhatikan ketika mendesain web dengan menggunakan CSS agar tampilan web paling tidak bisa lebih mirip ketika ditampilakan dengan berbagai browser.

1. Lakukan standarisasi pada elemen. Standarisasi dapat dilakukan dengan memberi nilai awal pada setiap elemen, misalnya margin dan padding pada elemen form, ul, li. Jangan lupa juga untuk memberi nilai awal berupa jenis, warna dan ukuran huruf pada elemen body dan elemen lain yang dirasa perlu. Hal ini dilakukan karena beberapa web browser memberikan nilai default yang berbeda satu sama lainnya, misalnya pada IE7 elemen ul memiliki nilai margin tetapi tidak memiliki nilai padding. Padahal di web browser lainnya seperti Firefox dan Opera hal sebaliknya terjadi, elemen ul tidak memiliki nilai padding, tetapi memiliki nilai padding.
2. Submit hasil web anda untuk divalidasikan oleh W3C. Terkadang kesalahan dalam penulisan kode HTML dan CSS lah yang membuat web anda tidak tampil dengan benar. Silahkan cek ke website validator untuk informasi lebih lanjut.
3. Bila anda menggunakan image berformat PNG yang menggunakan transparansi, gunakan script untuk mengaktifkan filter transparansi yang terdapat di IE5.5 dan IE6. Klik di sini untuk mendownload script (pngfix.js). Karena hanya berlaku untuk IE5.5 dan IE6, maka browser lain tidak memerlukan script ini. Untuk itu, gunakan commented condition yang dikenal dalam IE. Masukkan penggalan kode di bawah ke HTML anda sebelum </head>:

   <!--[if lt IE 7.]>
   <script defer type="text/javascript" src="http://www.example.com/pngfix.js"></script>
   <![endif]-->

   Alamat yang terdapat di dalam src diganti dengan alamat script di web anda.

4. Lakukan pengecekan dengan berbagai browser. Terutama IE7, IE6, Firefox, Opera, Safari. Bila anda tidak memiliki semua browser tersebut, cukup bandingkan dengan 3 browser untuk memastikan kompabilitas.
5. Bersabar ketika anda menemui masalah dalam tampilan yang tidak sesuai harapan. Coba untuk mengubah kode CSS atau HTML yang ada (umumnya pada margin dan padding). Bila ternyata masih belum didapat solusi melalui CSS, maka harus dilakukan fallback dengan menggunakan table untuk mempermudah memperbaiki tampilan.

Bila anda masih memiliki solusi lainnya, silahkan memberi komentar.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.