Saatnya Blog zam.web.id Ganti Tampilan

Lama-lama saya merasa malu juga kalau sering mengaku sebagai webdesigner tapi weblog pribadi saja pakai wordpress themes gratisan. Coba sebut saja nama semua teman-teman yang berprofesi di bidang web desain, sepertinya tidak ada yang menggunakan theme gratisan untuk blognya, mungkin cuma saya :D.

Tapi sebenarnya theme ini bukan buatan saya loh :) kok bisa? Tampilan baru blog ini tidak mengintegrasi WordPress dari nol tapi menggunakan WordPress Frameworks, Nama theme dasarnya Hybird buatan Justin Tadlock. Jadi saya cuma membuat child themes dengan menambahkan kode CSS di file style.css dan modifikasi XHTML / PHP secukupnya di file lainnya. tentu saja semua ini mengacu pada draft Mockup PNG/PSD yang sudah saya siapkan.

theme zam.web.id baru

theme zam.web.id baru

Konsep dasar theme ini adalah satu sidebar, ukurannya cukup lebar (300px) karena saya ingin menampilkan widget dari facebook page, sayangnya widget ini ternyata tidak valid XHTML di W3C :(. header tanpa grafis hanya text besar (140 karakter) mengambil dari update status twitter. logo standart typo Serifa, menu di kanan atas agar terasa lebih usable, rich footer seperti trend blog masa kini, lebar area konten tidak terlalu lebar (460 px) sebuah trik agar postingan sedikit bisa terlihat banyak :D.

Poin utamanya adalah status twitter dan facebook page yang menempati area utama. sengaja saya buat begitu supaya web ini terkesan update terus meskipun seandainya nanti jarang update blog :)

Mengenai pemakaian background itu hanya karena untuk mengisi space kosong yg cukup banyak karena area blog ini tidak lebih dari 820px (biasanya pakai standart 960px), meski awalnya bingung cari-cari background yang cocok, dan rencananya nanti background itu akan saya ganti-ganti jika sudah bosan, hehe seperti di twitter :D

oh iya mohon masukan, kritik dan saran yah dari teman-teman, thanks

Read More

Posted in project & portfolio | Tagged , , , , | 27 Comments

Rekap Pertanyaan 1-10 Tanya Jawab XHTML/CSS Web Design Usability Lewat Twitter

Acara “Tanya jawab XHTML/CSS web design usability lewat twitter” sesi pertama sudah berjalan, tak kurang dari 10 pertanyaan pertama sudah masuk dan syukurlah ternyata saya masih bisa menjawab :) meski tidak bisa terjawab secara langsung dan cepat, lewat postingan sebelumnya sudah saya sebutkan bahwa acara ini tidak dibatasi oleh waktu karena itu kita tidak perlu tergesa-gesa, selain karena berbagi waktu dengan pekerjaan juga karena saya harus browsing, googling sana-sini untuk memberikan jawaban. Disinilah poin pentingnya, bahwa akhirnya saya terpaksa belajar lewat pertanyaan yang masuk, setiap pertanyaan menjadi selayaknya tugas belajar di sekolah, dan siapapun yang bertanya ibarat guru bagi saya. Jawaban akhirnya juga bisa menjadi bahan untuk berbagi dan belajar bersama.

by trovster @flickr

by trovster @flickr

Berikut rekap pertanyaan 1-10 (sesi 1) beserta jawabannya:

Pertanyaan 1 #zam gmn ya caranya bikin layout yg kolomnya sama tinggi pake css? @rizkysyazuli

  • cara1 buat <div> sbg wrap dan <div> dalam <ul><li> sbg col. wrap display:table <ul> display:table-row <li> display:table-cell @rizkysyazuli
  • keuntungan cara1 cukup sederhana tapi kekurangannya tidak bisa berjalan di IE7 apalagi IE versi dibawahnya @rizkysyazuli
  • cara 2 mengakali tinggi kolom <div> menggunakan background image di wrap background-repeat: repeat-y; (repeat vertical) @rizkysyazuli
  • keuntungan cara 2 cukup mudah kekurangan hanya bisa untuk kolom yg dibedakan warna oleh image dan tidak berlaku di fluid width @rizkysyazuli
  • cara3 buat container <div> bertumpuk sebanyak jumlah kolom <div> masing2 kolom beda background dan tiap container meneruskan @rizkysyazuli
  • cara3 semua <div> baik container maupun kolom float:left untuk container diberi jarak right: sesuai lebar kolom masing2 @rizkysyazuli
  • keuntungan cara 3 bisa berjalan di semua browser kekurangannya agak ribet @rizkysyazuli
  • cara 4 menggunakan jQuery dimana setiap <div> dalam container dibuat otomatis sama tingginya @rizkysyazuli
  • keuntungan cara4 ok di semua browser kekurangan sulit mengatur <div> dlm <div> maupun <div> untuk clear:both ganti dgn <span> @rizkysyazuli

Read More

Posted in sharing | Tagged , , , , , | 12 Comments