Kamis, 18 Januari 2007

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.

11 komentar:

  1. lebih cepat loadingnya, lebih fresh diabnding yang lama.

    putih bersih gini emang lagi trend ya mas.

    cuma masukan, kalau di browser ie &friefox, rata kirinya kurang ke kanan mas (halah,susah bahasanya). kurang ke kanan gitu kayaknya. comment saya ini hilang di kiri soalnya mas.

    BalasHapus
  2. siip cak! kueenceeng poool! :) sekalian ditaruh di sini :)

    BalasHapus
  3. Keren mas. tinggal komen sedikit di STYLE ;) biar tambah mantap

    sama BORDER pada img ada yang kurang pas... contohnya pada SMILEY ini :D

    BalasHapus
  4. Bagooossss!!!
    kuenceng pol dan ngomentarin sekarang ndak ngos2an gara2 pake ajax segala :)
    setelah liriknasyid, berarti agrregator IMB, ok?

    BalasHapus
  5. #1 Makasih mas, nggak tahu dimana errornya dari sini sih baik2 aja. Tapi mungkin perlu tambahan margin-left:20px

    #2 Sebenarnya mau saya taruh "disini", tapi belum PD :)

    #3 wah, sempat ngintip di style nya juga tokh, jadi malu. Insyaallah nanti akan saya kasih comment2, demikian juga ttg masalah di smilenya. makasih masukannya.

    #4 Sebenarnya sih mau bilang begitu, cuman malu kalau nggak jadi2 :). tapi emmang lagi bersemangat mainan CSS :)

    #3

    BalasHapus
  6. lumayan bagus sih, rapi. Tapi kurang berseni..hehehe.. Apalagi tata letaknya masih standart banget. Dan kayaknya nggak mengikuti jenis layar monitor pengunjung ya? Soalnya di warnet kadang resolusinya dibuat 800x600 yang saya pake ini malah 600x400 :(

    BalasHapus
  7. Wih desain baru... Tak buka via portable Opera lancar - lancar saja...

    BalasHapus
  8. Ini yang disebut template minimalis :) Gooddd.. Eh iya mas, ana email mas nanya ttg IMB, bales ya, syukron :)

    BalasHapus
  9. Dari t4 ku koq tetap lambat ya ...
    Apa koneksi interent ku ya :((

    BalasHapus

Artikel mungkin sudah tidak up to date, karena perkembangan jaman. Lihat tanggal posting sebelum berkomentar. Komentar pada artikel yg usianya diatas satu tahun tidak kami tanggapi lagi. Terimakasih :)