Proses Kerja CSS Design

Setelah memahami ruang lingkup pekerjaan CSS Design, maka kali ini kita akan menelusuri proses development sebuah website yang dimulai dari Menslicing dan Optimalisasi image, Menginspeksi Struktur Layout dan Snippets, Membuat Style untuk Layout dan Struktur Konten, Spesifik Styling, Usability Testing, SEO, Cross Browsing hingga Templating.

Slicing dan Optimalisasi Image

Desain mockup dari sang Desainer Grafis akan kita potong-potong sesuai kebutuhan dan mengkompresinya menjadi 72-85 dpi dengan format (png, jpg atau gif) disesuaikan dengan kebutuhan. Apabila memungkinkan diterapkan Image Sprite maka penentuan ukuran serta positioning menjadi satu buah image diperlukan sehingga memudahkan pengaturan posisi melalui CSS.

Struktur Layout dan Snippets

Dalam membuat struktur layout kita dapat dibantu dengan Wireframe yang sebelumnya dibuat oleh sang Desainer Grafis dalam pembuatan mockup desain. Melalui wireframe ini kita dapat menentukan layout yang akan kita buat dan menentukan elemen-elemen apa saja yang memiliki kesamaan bentuk di setiap halaman yang kemudian akan kita jadikan Snippet.

Styling Layout dan Konten

Layout merupakan struktur yang membungkus konten. Dalam menstyling struktur layout sangat disarankan untuk tidak mempengaruhi styling konten sehingga tidak terjadi overiding style. Dengan demikian styling konten hanya mempengaruhi formatting konten dan tidak mempengaruhi styling layout, begitu juga sebaliknya.

Spesifik Styling

Di sini kita akan mengatur styling Snippet dan menambahkan styling sesuai penempatannya dalam layout. Sehingga ketika terjadi perubahan posisi snippet maka penambahan styling menjadi lebih minimal.

Usability Testing

Sebuah website dapat diakses melalui browser, handphone, PSP,  TV dan media lainnya sehingga dibutuhkan sebuah fitur yang dapat mempermudah akses ke website yang kita buat.

SEO

Untuk dapat mudah terindex oleh mesin pencari seperti Google, Yahoo, Bing dan mesin pencari lainnya maka dibutuhkan trik Search Engine Optimization sehingga website yang telah kita buat dapat dicari dengan mudah.

Crossbrowsing

Istilah Cross Browser sebenarnya tidak diperlukan karena adanya perbedaan layout engine di tiap browser bahkan sistem operasi sehingga istilah yang lebih tepat adalah Multi-Browser. Seperti yang kita pahami bersama, dalam fase ini kita akan memastikan tampilan website yang telah kita buat memiliki kesamaan tampilan. Dengan memahami kekurangan yang dimiliki browser-browser versi lama maka kita paham browser tersebut akan mengalami degradasi fitur. Sehingga pada awal styling kita harus menerapkan styling yang mensupport browser lama terlebih dulu baru kemudian menambahkan fitur yang didukung oleh browser terbaru, maka user tidak harus mengupgrade browsernya terlebih dulu untuk dapat melihat website kita.

Templating

Dengan menguasai fase-fase sebelumnya maka kita akan dengan mudah menerapkan sistem templating yang didukung oleh berbagai macam CMS yang ada seperti WordPress, Joomla, FrogCMS, WHMCS, bahkan PHP Framework seperti Code Igniter, CakePHP, Smarty, Zend Framework, dll.

Dalam lain kesempatan, Rio akan membahas masing-masing bagian di atas secara lebih detail. Buat teman-teman yang belum paham dengan istilah-istilah yang terdapat dalam tulisan ini bisa bertanya langsung.