Antara Layout dengan satuan pixel dan persen

Sumber : Layout, Gavin Amborse & Paul Harris, London 2005

Layout adalah penyusunan dari elemen-elemen desain yang berhubungan kedalam sebuah bidang sehingga membentuk susunan artistik. Hal ini bisa juga disebut manajemen bentuk dan bidang. Tujuan utama layout adalah menampilkan elemen gambar dan teks agar menjadi komunikatif dalam sebuah cara yang dapat memudahkan pembaca menerima informasi yang disajikan.

di design web ada dua satuan yang umum di gunakan dalam membuat sebuah layout web adalah, satuan pixel dan satuan persen (menyesuaikan dengan lebar dan tinggi pixel komputer).

oke... sekarang kita liat contoh2 web yang mengunakan pixel dan persen:

SATUAN PERSEN

GAMBAR 1. Resolusi Monitor 1024x768 pixel




GAMBAR 2. Resolusi Monitor 800x600 pixel


dua gambar di atas adalah contoh yang layout nya menggunakan satuan persen,

tampilan tampak baik bila pada resolusi monitor 1024x768 pixel, karena size dari setiap elemen form (input text, listbox, tombol, dll) di asumsikan pada resolusi 1024x768.

Tetapi ketika resolusinya di turunkan ke 800x600 maka akan menjadi seperti GAMBAR 2, itu terjadi karena lebar layout di set 100% lebar monitor (800px) sedangkan lebar dari elemen form (input text, listbox, tombol, ) melebih 800pixel, hasilnya bablas melewati batas lebar monitor.

hal ini tentunya sangat mengurangi kenyamanan dalam menggunakan aplikasi dan tidak sesuai dengan estetika design web.



SEKARANG KITA BANDINGKAN DENGAN YANG MENGGUNAKAN SATUAN PIXEL

GAMBAR 1. Resolusi Monitor 1280x720 pixel

GAMBAR 2. Resolusi Monitor 1024x768 pixel

di kedua gambar di atas berisikan sebuah form yang lebarnya tidak terpengaruh oleh resolusi monitor, karna lebar layout nya di fix-kan (misalkan 800px).
dengan cara ini susunan dan posisi dari elemen-elemen form tidak akan berubah posisinya dan membuat kesan yang konsisten.



selanjutnya bisa dilihat perbedaan antara pixel dan persen dari kedua gambar di bawah ini :
GAMBAR 1. SATUAN PERSEN




GAMBAR 2. SATUAN PIXEL

gambar 1 menggunakan satuan persen, ketika ukuran window browser di resize maka hasil-nya berantakan.

gambar 2 menggunakan satuan pixel, ketika ukuran window browser di resize maka hasil-nya design akan terpotong tetapi tidak merubah susunan dan posisi elemen yang berada dalam halaman web.


oke... semoga ini bisa menjadi pertimbangan satuan (pixel/persen) apa yang paling tepat untuk aplikasi dan web yang akan di develop.