• Custom field di Textpattern
• 10 fonts gratis terbaik untuk @font-face
• 1 baris CSS framework

Semoga beliau bisa share banyak hal seputar web development terutama yang berhubungan dengan TextPattern.

Bukan begitu, mas Kus? :d

Related Posts

• November di displayinline.net

Instalasi Safari di Windows berjalan normal. Browsing juga tidak ada masalah. Sampai waktunya saya ingin memberikan komentar di salah satu blog dan harus mengisi nama. Safari crash ketika saya mengetik huruf pertama di input text, begitu juga ketika saya mencoba mem-paste nama saya ke input text.

Beberapa percobaan mengisi input text juga membuat crash Safari. Hanya mengisi input text di Google Analytics yang tidak membuat Safari crash. Iya, ini masih versi Beta.

Mudah-mudahan layout yang dihasilkan oleh browser Safari untuk Windows ini persis sama dengan Safari untuk Mac, sehingga web designer yang bekerja di lingkungan Windows menjadi lebih mudah untuk melihat apakah layout yang dibuat tampil dengan baik atau tidak di Safari versi Mac tanpa harus memiliki Mac.

Tidak hanya sekedar menambah jumlah browser yang harus dipergunakan pada saat test tampilan web yang baru dibuat – yang berarti menambah kerjaan.

UPDATE (28/06/2007): Dengan Safari v.3.0.2 (522.13.1), saya tidak mengalami masalah lagi pada saat mengisi form.

Related Posts

• displayinline.net
• Mempercantik CODE dengan CSS
• Mempercantik Blockquote dengan CSS
• Bedah denysri.com
• Reboot: denysri.com

OK, enough chit-chat here – let’s get it on.

LATAR BELAKANG

Sebenarnya sudah lama saya ingin membuat sebuah web portfolio di domain name ini, tapi baru terlaksana beberapa waktu yang lalu bersamaan dengan event CSSReboot.

Setelah janjian dengan beberapa teman untuk mengikuti event tersebut, ternyata waktu untuk pengerjaan yang tersisa kurang dari 2 minggu.

PEMILIHAN TEMA

Memilih tema merupakan proses yang penting dalam pembuatan website. Sebuah tema akan menentukan elemen-elemen grafis yang akan digunakan dalam website.

Pemilihan tema museum (lukisan) dengan kesan klasik untuk web portfolio saya tidak melalui proses yang rumit – karena web ini memang dibuat untuk kesenangan saya pribadi. Syukur-syukur bisa memperkenalkan saya ke dunia yang lebih luas dan juga bisa dinikmati oleh orang lain.

Seperti diketahui, sebuah museum merupakan tempat untuk memajang hasil karya para pekerja seni. Karena sangat besar kemungkinannya, hasil karya saya dalam bidang web design tidak akan pernah sampai masuk ke museum, maka saya memilih untuk membuat museum untuk karya saya sendiri – that simple.

MENCARI INSPIRASI

Saya banyak melihat-lihat web portfolio milik orang lain untuk mengetahui cara mereka menampilkan informasi project yang mereka kerjakan.

Diantara sekian banyak web yang bisa dilihat, web portfolio milik Cameron Moll dan Kevin Davis merupakan 2 contoh yang sangat menarik. Design website mereka memiliki sesuatu yang berbeda dari web-web portfolio lainnya – dan itu membuatnya sangat menarik bagi saya.

Untuk mendapatkan kesan ruangan museum lukisan yang saya inginkan, ternyata agak sulit. Melalui mesin pencari, hasil yang didapatkan tidak seperti yang diharapkan. Mungkin juga karena penggunaan kata kunci yang kurang tepat. Dari sekian banyak hasil yang didapat, sangat jarang sekali website museum yang menampilkan photo ruangan yang mereka miliki.

Salah satu website yang memberikan gambaran mengenai ruang pamerannya adalah website museum Van Gogh.

Jadi, modal yang saya punya untuk memulai website ini adalah gambaran ruangan pameran dari museum Van Gogh ditambah sedikit ingatan dari tayangan mengenai museum dari film atau acara TV yang pernah saya tonton.

PROSES PENGERJAAN

Untuk bagian logo, logo sengaja ditaruh di dalam frame yang sejenis dengan frame thumbnail project – untuk memberikan sedikit gambaran bahwa semua yang ditampilkan di dalam frame yang ada di web ini adalah hasil kerja saya.

Untuk frame setiap web yang akan ditampilkan, saya memilih menggunakan image yang dibeli dari salah satu website stock photo, karena frame photo yang coba saya ambil dengan kamera digital tidak bagus hasilnya – selain bentuk frame yang juga kurang saya sukai.

Untuk informasi project, tadinya saya ingin menampilkan detail informasi mengenai project yang telah dikerjakan di setiap item, tapi setelah dicoba sepertinya kurang bagus – tidak seperti tampilan lukisan dengan informasinya seperti yang saya ingat.

Akhirnya dipilih untuk hanya menampilkan nama project di bagian bawah setiap thumbnail dan informasi lengkapnya ditampilkan dengan popup menggunakan bantuan Thickbox.

Untuk bagian kata-kata sebelum footer, saya menambahkan sebuah image lampu dari koleksi photo pribadi. Dengan modifikasi sedikit, saya mendapatkan sinar lampu yang saya inginkan – yang sesuai dengan tema website.

Saya memilih menggunakan format PNG karena saya membutuhkan transparansi yang jauh lebih baik dibandingkan dengan GIF. Paduan background pattern, efek bayangan dan transparansi di bagian frame, kotak nama project, pendaran cahaya dari lampu klasik sepertinya tidak akan memberikan hasil yang maksimal jika menggunakan GIF transparan.

Penggunaan image yang banyak membuat ukuran dokumen menjadi besar. Untuk mengurangi ukuran file, saya menggunakan tool PNGCrush untuk meng-compress image PNG yang saya gunakan. Hasilnya lumayan.

Ketika ukuran dokumen mencapai lebih dari 400KB, setiap byte yang bisa dikurangi akan sangat berarti.

Hasil akhir bisa dilihat di: http://denysri.com/

TAMBAHAN INFORMASI

Windows IE versi 5.5 dan 6.0 tidak mendukung PNG Alpha Transparency dan akan menampilkan image PNG yang transparan dengan background biru muda. Untuk hal ini, biasanya saya menggunakan solusi PNGFix dari Bob Osola.

Untuk web portfolio saya ini, solusi tersebut tidak bisa digunakan karena tidak mendukung penggunaan PNG sebagai background. Setelah mencoba beberapa solusi lainnya yang bertebaran di internet, akhirnya saya menemukan solusi IE PNG Alpha Fix dari Angus Turnbull. Di versi terakhirnya, kita bisa menggunakan PNG transparan sebagai background yang di tile.

Sangat menyenangkan bermain-main dengan transparansi PNG.

Ada yang punya pengalaman dengan transparan PNG? Atau mungkin tahu tool yang lebih baik untuk meng-compress gambar PNG? Atau ingin sekedar berkomentar? Silahkan berbagi – mungkin komentar anda bisa bermanfaat buat teman-teman lainnya.

Bedah web lainnya? Yuuuk.

Related Posts

• displayinline.net
• Mempercantik CODE dengan CSS
• Mempercantik Blockquote dengan CSS
• Safari 3 di Windows
• Reboot: denysri.com

Visit denysri.com – a single page wall fulfilled by a few work on web design. It is not that-good design, but at least I’m happy can produce a better one than my previous under construction page on this CSS Reebot event.

These are my profile on CSSReboot and Standards Reboot.

Vote or not to vote. The decision is yours.

Vote? Yuuuk :D

Related Posts

• displayinline.net
• Mempercantik CODE dengan CSS
• Mempercantik Blockquote dengan CSS
• Safari 3 di Windows
• Bedah denysri.com

Halaman depan yang menghiasi websitenya adalah halaman yang sama ketika website itu dibuat pada tahun 2002. Tampilan sama yang dipergunakan oleh saudara tuanya dari Inggris sejak tahun 1999. No wonder why they feel so 90’s ya? – at least for me.

Even they feel so 90’s for me, websitenya telah memberikan banyak kontribusi untuk usaha yang dilakukan sang pemilik. Itulah mengapa dia memilih untuk melakukan perubahan pada websitenya secara bertahap, dengan harapan bisa melihat statistik halaman yang sudah diubah untuk kemudian melanjutkan ke halaman lainnya jika hasilnya positif. Perubahan tampilan yang diikuti dengan penurunan kontribusi is a big no no.

Sebelumnya, beberapa perubahan sudah dimulai untuk halaman kategori dengan mengubah layout menjadi tableless dan memberikan sedikit sentuhan ke beberapa elemen desain. Kali ini adalah bagian halaman depan.

Permintaan dari klien

Berhubung website yang akan di redesign masih berhubungan erat dengan saudara-saudara lainnya, maka dia menginginkan perubahan yang tidak terlalu drastis.

Sebuah perubahan dengan tidak menghilangkan nuansa tampilan halaman lama, yang tidak akan terlalu mengagetkan bagi loyal visitor dan memberikan kesan menarik untuk pengunjung baru.

Nuansa tampilan halaman lama yang dipertahankan adalah background warna hijau, bagian header dan menu kiri dengan keleluasaan untuk mengganti jenis, ukuran dan warna font. Penempatan data juga tidak akan mengalami perubahan.

Perubahan yang akan dilakukan

Berdasarkan brief singkat yang diterima dari klien, berikut ini beberapa daftar perubahan yang akan dicoba untuk diterapkan:

• Hal pertama yang langsung terlintas di pikiran saya adalah mengganti jenis font untuk content dan daftar kategori dari Verdana menjadi Tahoma dengan ukuran lebih kecil, karena saya lihat web penuh sesak dengan ukuran text yang besar.
• Mengingat website sudah ada sejak tahun 2002, saya pikir mungkin akan menarik jika mengganti photo “3 orang” dengan photo baru yang lebih “fresh” dan menemukan beberapa image yang cocok dari web stock photo.
• Hyperlink di bagian content juga menjadi perhatian karena di layout lama ditampilkan kurang “eye catching” tanpa underline dan dengan warna yang hanya berbeda sedikit dengan content yang bukan hyperlink. Mungkin dengan membuatnya lebih tebal dan menggunakan underline, pengunjung akan lebih mudah untuk melihat hyperlink dan tertarik untuk mengetahui lebih jauh.
• Header untuk masing-masing kategori (star ratings, get the logo, your favorites, etc) juga akan menggunakan image baru yang lebih segar.

Draft yang diajukan ke klien

Setelah mendefinisikan bagian mana saja yang akan diubah dalam langkah sebelumnya, waktunya untuk membuat visualisasi sehingga klien mendapatkan gambaran perubahan yang akan kita buat dengan websitenya.

Beginilah tampilan draft yang saya ajukan ke klien. Dia suka dengan perubahan yang saya buat dengan catatan untuk tidak menggunakan image di bagian header kategori (shopping categories, worldwide, star rating, etc), hanya text biasa di atas background image.

Pada awalnya saya kurang setuju dengan ide dia. Saya sengaja menggunakan image untuk mendapatkan kesan “smooth” yang tidak didapatkan jika menggunakan text biasa. Alasan masuk akal yang kemudian saya setujui adalah supaya saya tidak perlu repot-repot untuk membuat image baru setiap ada penambahan atau perubahan segmen kategori.

Dari draft menjadi website online

Proses pengerjaannya tidak terlalu lama, karena sudah tersedia code XHTML serta CSS dari halaman yang telah dikerjakan sebelumnya, yang bisa digunakan juga di halaman ini. Saya hanya tinggal membuat beberapa class dan id tambahan yang hanya akan digunakan oleh halaman awal.

Hasil akhir tampilan bisa dilihat secara online di http://www.shopsafe.com.au

Tambahan

Dengan banyaknya batasan yang diberikan, sepertinya ini tidak bisa disebut redesign. Mungkin lebih tepat jika disebut realign, karena perubahan yang dilakukan hanya untuk membuat beberapa elemen dalam website menjadi terlihat lebih menarik dari sebelumnya.

Hal yang menarik dari redesign atau realign kali ini adalah bagaimana perubahan desain yang telah dilakukan pada halaman awal bisa membuat bounce rate dari sebuah website shopping directory seperti Shopsafe menjadi lebih kecil daripada sebelumnya.

Ada cerita menarik yang bisa di share soal redesign/realign yang pernah atau akan dilakukan? Pasti bisa jadi masukan bermanfaat untuk saya dan rekan-rekan lainnya.

Bedah web lainnya? Yuuuk.

Related Posts

• displayinline.net
• Mempercantik CODE dengan CSS
• Mempercantik Blockquote dengan CSS
• Safari 3 di Windows
• Bedah denysri.com