Mari Kita Belajar Membuat Halaman Blogazine Responsive

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 persentase. 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 mendesain 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%.

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:60px;
font-family: "old english text mt";
color:#000;
padding-bottom:10px;
line-height:1.2em;
text-align:center;
font-weright:bold;
border-bottom:3px solid #ddd;
}

.berkolom {
clear:both;
width:100%;
margin-top:20px;
-webkit-column-count:2;
-moz-column-count:2;
-webkit-column-gap:2%;
-moz-column-gap:2%;
font-size:18px;
line-height:1.4em
}

.beast {
clear:both;
width:47%;
float:left;
background:#ddd;
color:#000;
font-size:18px;
line-height:1.4em
}

.george {
width:47%;
float:right;
background:#333;
color:#eee;
font-size:18px;
line-height:1.4em
}

.beast, .george {wrap-word:break-word;
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).

Semua kode di atas FaceLeakz letakkan di dalam postingan bagian paling atas seperti di sarankan oleh Beast

Ini adalah kelas untuk George - Karena mereka sekarang hidup di dunia lain (dunai 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.

Sebelum lanjut ke tahap berikutnya, silahkan ambil url halaman INI dan simulasikan di http://mattkersley.com/responsive/


INI MASIH CLASS BERKOLOM - Sudahkah anda melihat bagaimana penampakan postingan di atas di monitor dengan resolusi 240px, 320px, 480px, 768px, dan 1024px berdasar hasil simulasi di mattkersley.com?

Jika sudah dan penglihatan kita sama, pada tool tersebut halaman ini hanya aman di resolusi 768px ke atas dan tidak enak di baca atau ada teks yang menentukan takdirnya sendiri pada resolusi 480px ke bawah, sementara resolusi antara 480px sampai 767px tidak jelas nasibnya.

Melalui hasil simulasi tersebut kita dapat menentukan penyusup mana yang ingin kita rubah takdirnya, apakah Pak-kepala-geng, Berkolom, Beast atau George. Tapi tampaknya tidak ada pilihan lain selain memukul rata mereka semua.

Saya asumsikan saja bahwa di atas resolusi 599px tampilan halaman ini aman, sehingga fokus saya hanya pada resolusi 599px ke bawah.

Karena terlalu kecil untuk menampilkan postingan berkolom-kolom pada resolusi 480px, 320px, dan 240px, maka ide saya adalah membuat tampilan halaman ini bersusun dari atas ke bawah: mengecilkan ukuran huruf pada class pak-kepala-geng yang terlalu besar, menjadikan satu kolom class berkolom dan juga gap diset jadi 0, dan menambah width pada class beast dan george seperti berikut:

@media screen and (max-width:599px) {
.pak-kepala-geng {font-size:30px;}
.berkolom {-moz-column-count:1;
-webkit-column-count:1;
-moz-column-gap:0;
-webkit-colum-gap:0;}
.beast,.george {clear:both; width:98%;}
.berkolom,.beast,.george {word-wrap:break-word;
font-size:medium;
font-family:"trebuchet ms"; }}

Sekarang cek halaman ini di mattkersley.com apakah ada perubahan dibandingkan dengan halaman sebelumnya. Jika ada perubahan, mungkin saya dan anda menggunakan browser yang sama.

13 Comments On :

Mari Kita Belajar Membuat Halaman Blogazine Responsive

@ Sunday, August 14, 2011

Labels:
Anonymous Anonymous said...

ok-ok nanti di coba.. tapi bisa gak ya nih kira-2 :)

August 14, 2011 at 6:23 PM
imroee imroee said...

Ok Dhan, selamat berjuang aza semoga sukses.

August 15, 2011 at 2:27 PM
Hendro Prayitno Hendro Prayitno said...

Ini adalah rumus mutlak dari responsive yaitu presentase.

Gua dulu juga begitu sebenarnya gampangnya seperti itu, 10px jadi 1% dan lain sebagainya.

nanti yang lainnya seperti media query tinggal menyusul deh..

August 16, 2011 at 5:39 PM
Rudy Azhar Rudy Azhar said...

Untuk Beast sama George kok font-size dibuat medium ? kenapa tidak dikecilkan saja pixelnya menjadi 14px/16px gitu. Soalnya efeknya kurang terlihat dilayar 480 kebawah.

August 17, 2011 at 5:26 PM
aini sastra aini sastra said...

mantarp, saya juga mau ganti ke persentasi ah..

August 17, 2011 at 9:42 PM
imroee imroee said...

@Rudy:

ralat: font untuk beast dan george kalau di test di http://www.opera.com/mobile/demo/ ternyata kekecilan, tapi kalau fontnya di beri medium akan terlihat lebih besar.

August 17, 2011 at 10:53 PM
Teras Info Teras Info said...

keren nih, Mas halaman blognya, jadi kaya di koran,..

mau ijin belajar deh...heheheh..

August 18, 2011 at 12:53 AM
imroee imroee said...

@Teras-Info:
Kunjungi aja blognya mas Hendro Prayitno di atas, saya banyak belajar di sana. Pokoknya tampilan blognya sadis dan keren.

August 18, 2011 at 3:06 AM
Padly Rahman Padly Rahman said...

Jangan percaya hasil test di screenfly, Mat Kersley ataupun Opera mobile launcher, sebab dia merender css yang ada di komputer kita.

Kalau bisa sih enak test langsung di mobile devicenya. Untuk BB, punyaku sudah aman. :D

August 18, 2011 at 2:44 PM
Raindra Raindra said...

Haduh lier geuning kang,eh maksudnya pusing ga bisa-bisa udah berapa bulan baru ketemu lagi blog kaya gini dulu udah di terangin ama blog rully tapi entah kemana tuh blognya ilang tolong dong saya mau yang kaya gini alamat emailku raindar1979@gmail.com tolongyah ajarin

September 4, 2011 at 12:59 AM
Agung Pramono Agung Pramono said...

simpel tapi gak ada yang punya, pengunjung gampang nyimak tulisan dan nggak ke ganggu sama gambar (juga sebaliknya) - bisa milih fokus sendiri yang di sukai hahaha...
keren, mas - asik lah.

September 15, 2011 at 9:43 PM
imroee imroee said...

Cara saya yang diatas ternyata salah total!

February 17, 2012 at 10:14 PM
Anonymous Anonymous said...

Keren nih tampilan blognya mas.. ^_^
Simple dan rapi enak dipandang..

Saya juga lagi mau belajar buat tampilan Responsive nih..

August 5, 2013 at 8:38 PM
Here's A face Box To Share Your Thoughts