July 24, 2024

Poin-Poin Penting dalam Tampilan Websitemu

4 min read
Salah satu tantangan yang harus dihadapi seorang web designer adalah membuat desain web yang kompatibel di berbagai macam browser, resolusi layar monitor dan sistem operasi. Selain itu flash, javascript dan CSS juga ikut ambil bagian dalam masalah tampilan website anda.

Salah satu tantangan yang harus dihadapi seorang web designer adalah membuat desain web yang kompatibel di berbagai macam browser, resolusi layar monitor dan sistem operasi. Selain itu flash, javascript dan CSS juga ikut ambil bagian dalam masalah tampilan website anda.

“Sebagus dan semenarik apapun tampilan dan isi website anda, tapi apabila pengunjung merasa tidak nyaman membaca (Atau malah tidak bisa membaca!) karena keterbatasan browser yang mereka pakai, semuanya sia-sia…”

Resolusi Layar Monitor

Pernah lihat tulisan seperti ini pada sebuah website?

This website is best viewed in 1024×768 resolution

Website ini paling bagussss diliat di resolusi 1024×768, 1024 pixel pada lebar dan 768 pixel pada tinggi. Artinya apabila resolusi kita ganti menjadi lebih rendah (800×600 contohnya), mungkin sebagian tampilan website tertutup karena terlalu lebar, atau malah jadi hancur karena teknik wrapping yang tidak bagus.

Menurut saya, sekarang ini resolusi yang paling banyak digunakan adalah 1024×768. Tapi bukan berarti lantas anda mendesain web yang hanya bagus dilihat pada resolusi 1024×768. Ambil aman saja, dengan mendesainnya menjadi 800×600 compatible, karena masih ada yang menggunakan resolusi tersebut.

Kalaupun anda ingin mendesain dengan tampilan 1024×768, pastikan bagian yang tertutup pada website anda bukanlah tampilan yang penting seperti isi artikel yang sedang dibaca. Tentu menyusahkan apabila pengunjung harus menggeser scrollbar setiap kali ingin membaca kata-kata yang tertutup karena lebar layout website yang terlalu lebar.

Bagaimana dengan 640×480? Resolusi ini sepertinya sudah ditinggalkan, kecuali ada pengunjung website anda yang masih menggunakan OS keluaran di atas 10 tahun yang lalu.

Web Browser + Sistem Operasi

Dengan browser apa anda memeriksa tampilan website anda?

Apakah Firefox?Firefox berapa? 2.0? 3.0?

Atau mungkin IE? IE5? IE6? IE7?

Opera? 8? 9?

Pernahkan anda mencoba menggunakan browser mini Opera untuk membuka website anda melalui Handphone? Apakah tampilannya baik-baik saja mengingat layar ponsel yang sedemikan kecilnya?

Apakah anda tahu, sistem operasi yang berbeda juga dapat menimbulkan tampilan yang berbeda pada website anda?

Oleh karena itulah, apabila anda web designer yang mengutamakan kenyamanan pengunjung, pasanglah semua browser demi keperluan ekseperimen. Semakin banyak semakin bagus. Apabila anda punya waktu, cobalah juga di berbagai macam sistem operasi, seperti linux dan mac OS.

Sekedar bahan referensi, mungkin anda bisa coba https://browsershots.org/ . Website ini dapat menampilkan tampilan website anda pada berbagai macam browser dan sistem operasi cukup dengan memasukkan alamat situs anda.

Loading Flash…

Saya bukan pemakai flash, tapi bukan berarti saya tidak suka memakai flash. Hanya saja menggunakan flash sebagai media untuk menampilkan konten website sepertinya adalah hal yang harus yang pikir berkali-kali.

Menggunakan flash berarti browser yang digunakan oleh pengunjung harus flash-enabled. Ya, semua browser keluaran mutakhir men-support flash tanpa harus menginstal plugin terlebih dahulu. Tapi bagaimana dengan pengunjung yang membuka lewat browser handphone. Sebagian besar teman saya (yang tidak memiliki koneksi internet sendiri) menggunakan browser handphone untuk menjelajahi dunia maya.

Jangan membuat file flash yang terlalu besar. Kasihani kami yang tidak memiliki koneksi dengan bandwidth yang besar. Ya saya juga sebagai pengunjung kadang menutup lagi jendela browser karena loading file flash yang terlalu lama atau malah berhenti sama sekali di tengah-tengah. Menunggu adalah hal yang amat membosankan bagi pengunjung! Tampilan yang mantab dan elegan tapi amat sangat disayangkan apabila 3 dari 10 orang pengunjung website anda hanya sempat melihat tampilan script flash anda yang sedang loading…. Loading… Loading…

Jadi memakai flash itu dilarang? Hahahaha.. Nggak lah… Pakailah flash untuk mempercantik website anda. Apabila memang ingin menggunakan full flash untuk seluruh konten website anda, setidaknya berilah versi alternatif website anda yang tidak menggunkan flash, agar semua pengunjung bisa menikmati website anda.

Javascript

Apa jadinya website anda bila fasilitas javascript dimatikan? Hancur? Atau masih bisa dibaca dan diakses pengunjung?

Hindari penggunaan javascript untuk memproses tampilan utama website anda. Karena apabila terjadi kesalahan atau kode tidak selesai diloading, otomatis pengunjung tidak bisa membaca isi website anda. Selain itu, javascript yang digunakan harus cross-browser, jangan hanya cocok di satu-dua browser saja.

Sebagai contoh, website saya ini menggunakan AuraCMS 2.2.2. Permasalahannya ada pada Ajax. Ajax? Yup… Apabila javascript dimatikan, otomatis user tidak bisa memberikan komentar pada setiap artikel. Hal ini sebenarnya tidak menjadi masalah untuk browser modern. Tapi sayang, masalah inilah yang menghadang di kala saya membuka website saya via mini opera di handphone. Saya kesulitan membuka news manager untuk melihat comment yang masuk. Saya masih mencoba untuk memodifikasi AuraCMS agar tidak menggunakan terlalu banyak ajax. Lagian, sepertinya halaman-halaman yang ber-ajax ini agak sulit untuk diindex oleh google.

CSS… terkait Koneksi Internet

99% website saya yakini menggunakan CSS. Selain kemudahannya dalam membuat tampilan web anda lebih gaya dan dinamis, CSS juga sudah full di-support oleh browser mana aja, bahkan browser pada handphone (Kecuali browser keluaran pas era Yahoo!Mail masih ngasih kapasitas inbox 6MB )

Ok, jadi kenapa CSS juga dibahas? Seperti halnya Javascript, apabila kode gagal diload atau tidak selesai diload, akan memengaruhi tampilan website anda. Saya tidak terlalu memikirkan apakah tampilannya jadi hancur atau tidak, saya hanya memikirkan apakah isi konten masih bisa dibaca atau tidak.

Pada suatu kasus, website yang menggunakan CSS, menggunakan huruf berwarna putih dan background sebuah gambar dominan warna gelap. Dalam keadaan normal website itu bisa dibaca dengan baik dan benar. Tapi saat koneksi internet yang jelek, sehingga menyebabkan file CSS tidak bisa diakses (karena RTO dan lain-lain) saya TIDAK BISA MEMBACA SATU KATA PUN KECUALI DENGAN CARA MEMBLOK TEKS.

Ah, itu mah masalah koneksi bukan CSS…

Ya, itu memang masalah koneksi, tapi sayangnya inilah yang sering saya alami sebagai seorang pengunjung. Solusinya, gunakan warna teks dan background yang bisa dibaca secara bawaan/default dari file html yang diakses, baru kemudian gunakan CSS untuk mengubah hurufnya menjadi warna putih dan backgroundnya diganti dengan gambar yang diinginkan.

Rumusnya:

Dokumen HTML biasa yang bisa dibaca + CSS = Dokumen HTML yang elegan dan bisa dibaca

bukan

Dokumen HTML biasa yang tidak bisa dibaca + CSS = Dokumen HTML yang elegan dan bisa dibaca

Tools yang sering saya gunakan untuk mengecek javascript dan tampilan website tanpa CSS adalah Web Developer, add on untuk Firefox. Cukup dengan mengklik disabled CSS atau disabled javascript, saya sudah bisa melihat bagaimana tampilan website saya saat tidak memakai CSS dan javascript. Selain itu kita juga bisa menset ukuran jendela windows seolah-olah resolusi layarnya telah kita ubah.

0 thoughts on “Poin-Poin Penting dalam Tampilan Websitemu

  1. @pak rais: duh yg master lagi” bagi ilmunya… thanks bgtz y pak…

    @awe: ^__^ semoga bermanfaat… tggl ditarik kesimpulannya saja we… krn klo terlalu singkat bukan artikel namanya say… tp tips

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.