Setelah dua bulan tidak pernah nge-post, jangankan blogwalking, memeriksa blog sendiri saja tidak (hello spammer… i catch you!!!), baru hari kemarin saya buka-buka banyak blog teman-teman maupun yang tidak saya kenal.

Bukan berarti tidak internetan, malah sudah satu bulan lebih dapat akses internet unlimitted dari salah satu ISP di Surabaya. Dapat akses internet unlimited ternyata enak-gak-enak. Karena merasa “free”, malah bingung internetan, download macem-macem, gak terkontrol, gak bisa “nulis”, dan imbasnya: TAGIHAN MELONJAK empat kali lipat!!!

lHo… kok malah curhat! Kembali ke laaaptoooppp…

Karena kesasar saat googling, saya menemukan blog seseorang. Lalu ngelantur ke salah satu judul postingnya tentang sebuah “topik”.
Satu topik yang banyak saya klik ke sana-sini, yaitu tentang “sebuah kontes”. Pasti semua sudah tahu, kecuali saya, yang baru tahu kemarin

Desainer Grafis dan Desainer Web

Menjadi desainer grafis lebih mudah daripada menjadi desainer web. Untuk menjadi seorang desainer grafis, kemampuan dasar yang diperlukan adalah SENI, khususnya melukis, dan mempelajari program komputer untuk membuat grafis (fotosop atau sejenisnya).

Sedangkan Desainer Web, selain juga diperlukan jiwa SENI dan kemampuan menggunakan aplikasi semacam fotosop, juga perlu pengetahuan tentang teknik pembuatan web (yang baik dan benar).

Membuat Halaman Web

Untuk memudahkan membuat rancangan halaman web (theme-nya), bisa dimulai dengan membuat gambar melalui aplikasi perancang grafis, semacam fotosop.

Buat sebuah gambar yang mirip halaman web. Tentukan logo, tajuk, warna latar belakang, teks, hipertaut, dan sebagainya. Apa yang tampil pada gambar tersebut anggaplah seperti halaman web yang sebenarnya.

Jika sudah merasa cocok dengan rancangan Anda, barulah memproses rancangan dokumen HTML, khususnya tata letak (layout).

Teknik Slicing

DULU, cara yang populer untuk memindahkan hasil rancangan dari fotosop adalah dengan memotong-motong menjadi beberapa bagian, kemudian digabungkan kembali dalam dokumen HTML menggunakan TABLE!

Layouting menggunakan tabel sangatlah mudah, apalagi jika menggunakan aplikasi semacam fronpeg atau drimwifer. Namun, setelah dihitung-hitung, penggunaan tabel sebagai dasar layout adalah hal yang boros, dan tidak pada tempatnya.
Table sebaiknya digunakan jika memang ingin menyusun tabel, seperti contoh tabel perbandingan diatas.

Bahayanya lagi, halaman web yang dirancangan dengan table sering tampil kacau jika diakses melalui layar kecil (PDA/henpon).

DIV: No more slicing, please…

Tag div (digabung dengan CSS) dapat digunakan untuk mengatur layout selain table. Lebih fleksibel terhadap desain, dan lebih friendly dengan berbagai macam layar atau media tampilan lainnya.
Memang, (based on experience) menggunakan DIV untuk membuat layout sedikit lebih susah daripada menggunakan tabel. Namun, mengingat manfaat yang lebih besar dibanding sekedar drag-n-drop, DIV dan CSS adalah pilihan tersarankan untuk membuat desain halaman web.

CSS: Yes!

CSS bukan sekedar untuk memudahkan kita mengubah desain web. Namun, kecepatan download halaman web sangat berpengaruh. Sebaiknya CSS dituliskan dalam file terpisah.
File (X)HTML murni berisi dokumen dan tag-tagnya, of course. Hindari menuliskan “sesuatu” yang bukan bagian dari dokumen HTML tersebut, Contohnya:

<td height="6" bgcolor="#999999"><img src="images/spacer.gif" width="3" height="3"></td>

Berapa kali dokumen tersebut muncul di file HTML? tinggal mengalikan jumlah karakter dengan jumlah kemunculan. Maka totalnya adalah Kilobyte sia-sia yang menjadikan halaman web lebih “besar” ukurannya, plus! proses di browser untuk melakukan parsing dan menggambarkan ke halaman putih-nya.

Coba tebak: “apa sesuatu yang BESAR dan tahan LAMA! tapi tidak disukai?”, hehehe…

Browser yang baik akan mendownload file CSS ini hanya untuk kali pertama. Untuk halaman-halaman berikutnya, CSS ataupun gambar tidak perlu didownload lagi. Sehingga halaman akan lebih cepat diunduh, meskipun berisi banyak gambar (untuk theme).

Manfaat berteman dengan standar web

• Membuat dokumen HTML yang ‘ringan’
• Tidak perlu “Best viewed with…”. BASI!
• Desain yang fleksibel: Suatu saat kita ingin mengubah ‘desain’ halaman, tinggal ganti CSS dan templatenya. Sama sekali tidak perlu ngutak-atik pemrogramannya.
• (X)HTML yang friendly: Tidak perlu membuat website khusus mobile devices (untuk yang support WAP 2.0)

Bukan berarti saya pakar desain web, namun, berusaha untuk mengikuti kaidah-kaidah pembuatan web, terutama menurut saran Organisasi Standard Web.

Behain_de_skin