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.