Responsive Blog Design On FaceLeakz

Mari Kita Membuat Halaman Blogazine Responsive
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;
}

Ini adalah kelas untuk Beast - Jika menggunakan satuan width pada #main-wrapper dalam pixel (px), maka Pak-kepala-geng, Berkolom, beast dan george melihat lebar #main-wrapper sebesar 850px yang harus dibagi. Tapi dengan persentasi bukan berarti Pak-kepala-geng, Berkolom, beast dan george melihat #main-wrapper selebar 85% yang harus dibagi (masing-masing dapat kuota 42.5% tanpa padding dan margin pada untuk beast dan george misalnya).

Kembali ke -- Mari Kita Membuat Halaman Blogazine Responsive
Ini adalah kelas untuk George - Karena mereka sekarang hidup di dunia lain (dunia persentase), maka Pak-kepala-geng, Berkolom, Beast dan George seperti katak di dalam tempurung yang melihat #main-wrapper sebagai milik mereka sepenuhnya dengan width:100%; yang harus dibagi sesuai dengan posisi mereka masing-masing, bukan 85%. Hal yang sama jika beast dan george di kemudian hari punya anak (class), maka anak-anak mereka juga akan melihat width:47% sama dengan 100%. Jika bingung, perhatikan lagi 4 class ilegal di atas.

0 Comments On :

Responsive Blog Design On FaceLeakz

@ Thursday, July 07, 2011

Labels:
Here's A face Box To Share Your Thoughts