Responsive Blog Design On FaceLeakz

INI ADALAH CLASS BERKOLOM - Bicara tentang desain blog yang responsif, sebenarnya saya sepenuhnya menerapkan apa yang pernah dibahas oleh mas Hendro di blognya yaitu responsive web design part 1 dan part 2, tapi sebelumnya blog saya memang satuan lebarnya sudah dalam persentasi. Saya terinspirasi oleh situs wikipedia yang ternyata tampilannya menyesuaikan dengan layar monitor.

Pertama-tama yang saya lakukan adalah mengkonversi hampir semua satuan pixel tampilan dasar blog saya ke dalam satuan persen (%). Karena saya mendasain blog ini di laptop yang memiliki resolusi lebar 1024px, maka lebar monitor saya itu jika di-implementasikan pada template FaceLeakz setara dengan outer-wrapper yang saya beri width:100%; -- #outer-wrapper {width:100%;}-- karena hampir semua class dan id berada di dalam outer-wrapper, kecuali bagian paling bawah yang biasanya diisi dengan copyright yang berada di luar outer-wrapper.

Tunggu dulu, meski lebar monitor 1024px tapi jika postingan panjang ke bawah maka di samping kanan browser akan ada scroll bar vertikal, saya perkirakan lebar scroll bar tersebut 24px, jadi 1024-24=1000px = outer-wrapper=100% (waduh... apa bedanya?).

Ok boys, maksudku teman-teman sekalian, kita ambil kasus aja. Misalkan pada id main-wrapper (#main-wrapper) blog saya sebelumnya dalam satuan px seperti berikut (yang diterapkan pada postingan ini):

#main-wrapper {
width:850px;
padding-left:75px;
padding-right:75px;
margin-left:0;
margin-right:0;
}

Lalu saya mengkonversi id main-wrapper di atas menjadi seperti berikut:

#main-wrapper {
width:85%;
padding-left:7.5%;
padding-right:7.5%;
margin-left:0;
margin-right:0;
}

--faceleakz--

INI MASIH CLASS BERKOLOM - Nilai persentase yang saya berikan jika akumulasikan akan menjadi 100% karena saya tidak memberikan border pada #main-wrapper yang biasanya dalam satuan pixel (px).

Jika saya memberikan border pada sisi kiri dan kanan masing-masing sebesar 1px misalnya, maka harus diberikan ruang untuk tebal border tersebut dengan melakukan pengurangan nilai persentase pada width atau padding untuk kasus di atas. Misalnya mengurangi width sebesar 1% menjadi width:84% (kuota untuk 2px sebesar 1% di monitor 1024px ke atas mungkin berlebihan, tapi kemungkinan aman untuk resolusi 1024px ke bawah).

Lalu saya membuat 4 class baru untuk postingan ini bernama Pak-kepala-geng, Berkolom, Beast dan George. Keempat penyusup yang tidak valid ini ingin berbagi kamar di dalam #main-wrapper. Pak-kepala-geng mengambil posisi paling atas dengan lebar 100%, tuan tanah berkolom juga sama lebarnya tapi ia lebih suka membelah diri, sementara itu George menyukai warna hitam, sedangkan Beast menyakai warna abu-abu. Meski George dan Beast hidup terpisah tapi mereka adalah tetangga dekat dan lapak mereka hanya berjarak 2% saja. Ini dia kuota mereka masing-masing:

.pak-kepala-geng {
width:100%;
font-size:40px;
font-family: "old english text mt"
color:#000;
padding-bottom:10px;
border-bottom:3px solid #ddd;
}

.berkolom {
clear:both;
width:98%;
margin-top:20px;
-moz-column-count:2;
-webkit-column-count:2;
-moz-column-gap:2%;
-webkit-colum-gap:2%;
font-size:16px;
font-family:"times new roman";
}

.beast {
clear:both;
width:47%;
float:left;
background:#eee;
color:#333;
}

.george {
width:47%;
float:right;
background:#333;
color:#eee;}

.beast, .george {
padding:10px 1% 10px 1%;
margin: 10px 0 10px 0;
}