Dibalik Template Baru Achedy's Weblog

Setelah seminggu dikerjakan, dengan memanfaatkan hampir semua waktu luang, akhirnya template baru blog saya selesai juga dikerjakan. Ada yang istimewa dengan template baru ini, adalah karena saya menulisnya sendiri dan tidak menggunakan template wordpress yang bertebaran di internet, meskipun beberapa kali saya mencontek style dari template yang sudah ada. Yah, namanya juga masih belajar.

Sejak saya konsentrasi di programming, saya memang jarang menyentuh desain. Meskipun saya punya niat yang sudah lama untuk belajar desain kembali, namun niat itu tidak pernah kesampaian karena waktu saya yang sangat terbatas, dan baru kali ini saya serius belajar.

Belajar sambil mempraktekan saya kira memang cara yang cukup efektif. Saya bukan hanya disuguhi teori, namun bisa langsung melihat hasilnya di browser, sehingga kita akan mengenali beberapa kesalahan dan pemecahannya.

Sebenarnya beberapa waktu yang lalu saya telah mencoba membuat desain dengan CSS, namun setelah saya coba di beberapa browser dan tidak kompatibel, maka saya kembali ke model desain lama, tabel. CSS hanya saya gunakan untuk mempercantik web, bukan untuk membuat layout.

Saya rasa belajar programming dan CSS memang cukup berbeda. Di dunia programming, compiler dan interpreter dibuat oleh sebuah vendor, namun di desain, interpreter CSS yang berupa browser itu dibuat oleh banyak vendor dengan cara menterjemahkan sintak yang terkadang tidak sama. Meski telah dibuat standart oleh W3C, namun tidak sepenuhnya browser mentaati aturan W3C. Karena itulah, tantangan di web design tidak kalah dengan dunia programming, apalagi disana dibutuhkan kemampuan untuk memberi sentuhan seni, pada penataan huruf-huruf dan layout.

Desain blog ini mengambil tema clean and fast, dengan beberapa kriteria yang saya tetapkan :

1. Sederhana

2. Menggunakan warna dasar gray

3. Tidak kaya warna

4. Tidak banyak gambar

5. Tidak menggunakan flash dan obyek lainnya

6. Tidak menggunakan ajax, dan bahkan javascripts (soalnya memang nggak butuh JS he.. he..)

7. Menggunakan CSS

8. Tidak menggunakan table sama sekali

Untuk membuat layout, saya menggunakan tutorial dari maxdesign, situs tutorial yang sangat lengkap dan mudah. Sedangkan ide layout saya dapatkan dari http://www.nodethirtythree.com, yang terkadang bermasalah di IE5, dan template wordpress, Serene . Penggunakan font Verdana 11px (yang disitus ini 1.1 em) untuk navigasi, dan pola hover untuk "li a" diilhami dari Serene. Typography menggunakan ukuran em, sehingga untuk memperbesar/memperkecil font bisa di Ctrl+ dan Ctrl-. Untuk konten, pertama saya menggunakan Verdana 11 em, namun untuk resolusi 1024 ukuran itu ternyata sangat kecil bagi mata. Lantas saya besarkan hingga 12px, ternyata Verdana hanya indah pada ukuran 11px. Akhirnya saya memilih font Georgia 12px.

Saya menggunakan Firefox 1.5. IE 5, dan IE 6, untuk testing, dan sejauh ini masih kompatibel di browser itu. Hasil validasi xhtml nya menghasilkan 20 error, itupun karena saya kelupaan untuk memberi penutup " /> " pada sintak img, saya juga sering lupa memberi attribut alt. Namun saya rasa masih lumayan bagi pemula seperti saya.

Beberapa bacaan yang sangat membantu untuk membuat template ini adalah :

1. Stylin' with CSS: A Designer's Guide oleh Charles Wyke-Smith

2. The CSS Anthology 101 Essential Tips, Tricks & Hacks oleh Rachel Andrew

3. CSS Cookbook 2nd Edition oleh Christopher Schmitt

4. CSS: The Missing Manual oleh David Sawyer McFarland

Semua buku itu bisa anda peroleh di ebooks portal.

Saya kira kunci dari belajar desain dengan CSS adalah frekwensi berlatih, dan saya kira saya membutuhkan 4 kali desain lagi agar bisa disebut menguasai CSS, dan mungkin liriknasyid adalah target berikutnya. Sedangkan untuk desain pertama saya ini, mudah-mudahan bisa mempercepat situs ini.