Membuat situs web Anda kompatibel dengan sejumlah besar browser mungkin yaitu kiprah tersulit bagi pengembang front-end. Cara terbaik yaitu membangun situs Anda sehingga sanggup berjalan secara konsisten di semua browser. Metode ini dikenal dengan cross-browser encoding (atau multi-browser). Di kebanyakan browser, ada beberapa hal yang sanggup Anda lakukan untuk meningkatkan peluang Anda membuat situs yang berjalan di semua platform.
Ketika kami memutuskan untuk membangun sebuah situs web, kami perlu memakai beberapa praktik paling umum dan sederhana, yang bila diikuti sanggup menghemat waktu yang berharga selama uji lintas browser.
Berikut yaitu 10 prinsip dasar yang perlu kita gunakan dikala mendesain halaman HTML.
1. Validasi Kode
Sebelum mengupload situs Anda, Anda perlu mengusut aba-aba HTML dan CSS melalui validator. Setelah Anda mengusut kode, itu mungkin tidak bekerja dengan tepat pada semua browser. Jika Anda tidak lulus aba-aba melalui validator, selalu ada kemungkinan mengalami dilema yang sanggup dengan gampang dipecahkan.
Validator HTML wc3 dan validator CSS yaitu daerah yang baik untuk mengusut kode. Anda juga sanggup memakai ekstensi validator HTML Firefox untuk mengusut halaman yang dilihat di browser secara real time.
2. Usahakan Menjaga Struktur Situs sesederhana mungkin
Menggunakan header, beberapa kolom dan footer - dan menghindari banyak aba-aba HTML dan CSS yang kompleks - membuatnya lebih gampang untuk meraih kesuksesan. Jadi, singkirkan beberapa kesalahan dan bug dengan menghindari kotak samping pelengkap dan pemformatan yang tidak perlu. Untuk membuat menu, gunakan <ul> dan <li>, bukan tabel. Hindari memakai item bersarang dan sisipkan hanya item yang diperlukan.
3. Jangan Bekerja dengan Browser Quirks Mode
Sebagai aturan, bila laman Anda tidak menyertakan Doctype, peramban akan beralih ke kebiasaan secara otomatis. Sertakan tipe pernyataan (Doctype) untuk menghindari kebiasaan. Beberapa browser mempunyai mode quirks, memungkinkan situs web yang lebih renta untuk bekerja dengan peramban modern. Namun, mode quirks sanggup membuat banyak sakit kepala dan kesalahan yang tidak perlu
4. Gunakan Register Reset CSS
Setiap browser mempunyai nilai default masing-masing untuk aspek tertentu menyerupai lebar dan tinggi baris. Nilai default ini terkadang bertentangan dengan hukum CSS khusus dan mendistorsi tampilan halaman web. Anda sanggup melaksanakan semua pengaturan ulang pada awal file CSS biar tidak menyesuaikan setiap hukum CSS yang Anda tulis. Anda sanggup yakin bahwa sehabis menambahkan hukum ini ke style sheet (atau ke file terpisah), ini akan bekerja dari titik yang sama untuk semua browser.
5. Gunakan Mozzila Firefox
Sebagai aturan, pengembang situs web menguji situs melalui satu browser, Firefox. Setelah itu, mereka mengusut situs yang sama di browser lain dan terus melaksanakan perubahan yang dibutuhkan dari satu browser ke browser lainnya. Ini yaitu metode klasik, daripada memvalidasi situs web di semua browser pada tahap pertama proyek.
Jika situs terlihat anggun di Firefox, pastinya juga akan terlihat anggun di Opera atau Safari.
6. Pengujian
Ini sangat penting untuk menguji situs web Anda sebanyak mungkin browser. Ini yaitu browser web utama: Internet Explorer 6,7 dan 8, Opera, Safari, Firefox.
Untuk menguji di IE 6.7 dan 8 di komputer yang sama, ada aktivitas online yang membuat tangkapan layar situs Anda (browsershots; browsercam), sehingga tidak perlu mempunyai 3 PC berbeda dengan 3 sistem operasi. Penangkapan ini dikirim melalui email atau tersedia untuk diunduh.
7. Gunakan Komentar Bersyarat
Ada kalanya, bahkan bila Anda melaksanakan yang terbaik dan Anda bekerja secara profesional, mustahil situs Anda bekerja dengan tepat di Internet Explorer. Sebagai solusi pertama, Anda sanggup memasukkan aba-aba HTML untuk IE hanya dengan komentar terkondisi. Anda sanggup menambahkan HTML, CSS dan JavaScript hanya untuk IE, yang memungkinkan Anda memperbaiki kesalahan kode.\
8. Buatlah IE6 Kompatibel dengan Format PNG
Anda sanggup memakai gambar PNG transparan yang memungkinkan Anda mempunyai sampai 250 tingkat transparansi dalam satu gambar, yang berarti Anda sanggup memakai tembus pandang dan tepi yang halus pada latar belakang manapun.
Sayangnya, IE 6 tidak menampilkan gambarnya menyerupai apa adanya. Ada solusi anggun untuk dilema ini, yaitu IE PNG Fix.
9. Tambahkan fallback
Sebagian besar web browser kompatibel dengan JavaScript dan Flash, namun disarankan untuk memakai alternatif dari fitur ini, alasannya yaitu mereka tidak selalu berfungsi menyerupai yang diharapkan bagi pengguna atau memperlambat pemuatan browser. Misalnya, dengan browser Safari di iPhone, sajian navigasi Flash menjadi tidak berkhasiat alasannya yaitu iOS tidak mendukung Flash.
Inilah solusi sederhana yang akan menghemat waktu berharga Anda.
- Gambar - Anda harus memastikan bahwa setiap tag yang mempunyai ekstensi img berisi atribut lain yang menggambarkan gambar.
- Flash Movies - Jangan gunakan Flash untuk hal-hal penting di situs Anda, menyerupai browsing, namun berikan alternatif non-Flash.
- JavaScript - Hindari penggunaan JavaScript untuk fungsi penting. Sebagai gantinya, Anda sanggup menggunakannya untuk membuat segalanya lebih cepat dan mudah. Gunakan styling non-script untuk menunjukkan alternatif non-JavaScript.
10. Pilih Manual Encoding
Menggunakan alat Dreamweaver atau KompoZer sanggup menghemat banyak waktu dan berkhasiat bila Anda tidak mengetahui HTML. Namun, total kontrol atas situs Anda, dan pengoptimalan yang lebih mudah, dicapai dengan pengkodean manual dari semua aba-aba HTML, xHTML dan CSS. Di Internet, Anda sanggup menemukan banyak editor halaman web berbasis teks. Anda sanggup mencoba salah satu dari berikut ini:
- Coffee Cup (Windows)
- Atom Sublim Teks
- Coda (Mac)
- CkEditor
Prinsip dan rekomendasi yang diuraikan di atas harus menunjukkan dasar yang berpengaruh bagi pengembang situs web untuk membuat pengalaman browsing yang konsisten - sekaligus membuat pengalaman yang indah dan intuitif bagi pengguna. Anda tidak hanya akan memastikan bahwa situs tersebut sanggup diakses oleh publik, namun juga pengunjungnya bahagia, yang sangat penting.
<link rel="import" href="chunks.html">: <script>/* script chunk A goes here */</script> <script>/* script chunk B goes here */</script> <script>/* script chunk C goes here */</script> Source : http://www.htmlgoodies.com/
Komentar
Posting Komentar