Rabu, 10 April 2013

Belajar Melayout Blog Menjadi Responsif

Responsif, istilah yang sepertinya sudah tidak asing lagi di dunia web design yang akhir-akhir populer di ranah blogger Indonesia. Sudah lama konsep ini diterapkan di dunia web design, namun saya sendiri baru menerapkan responsif ini sekitar 3-4 bulan yang lalu.

Me-responsifkan suatu layout sebenarnya cukup mudah asalkan Anda sudah paham dengan CSS minimal mengatur lebar, tinggi, spasi (padding, margin) dan sebagainya. Jika itu semua sudah Anda penuhi, tinggal menerapkannya saja sekaligus untuk belajar. Me-layout responsif dibutuhkan kemahiran mengatur elemen dan memposisikannya agar tetap rapi dan nyaman dipandang ketika berada dalam resolusi yang lebih kecil.

Langkah-Langkah Membuat Layout Responsif

Membuat layout responsif seperti ini sangatlah mudah. Anda cukup menggunakan CSS untuk menimpa layout yang sudah ada.

Beginilah CSS-nya:
@media screen and (max-width:767px) {

/* CSS */

}
Nominal yang diberi warna merah menunjukkan lebar maksimal untuk memulai kapan layout Anda akan dirubah dengan CSS responsif ini.

CSS yang harus diisikan adalah untuk menyesuaikan lebar, tata elemen (float, margin, dsb). Cara termudah untuk ini adalah memosisikan lebar menjadi 100% atau auto, menghilangkan float, dan lainnya.

Contoh penerapan CSS:
@media screen and (max-width:767px) {
#outer-wrapper, #sidebar-wrapper {
width:98%;
float:none;
margin:0 auto;
}
/* Dan seterusnya */
}
Contoh Ujicoba Responsif: Coba kecilkan jendela browser Anda. Lihatlah ketika elemen-elemen blog di sini menyesuaikan semua sesuai layar yang tersedia.
Anda tidak akan kerepotan jika Anda sudah memenuhi apa yang sudah saya sampaikan di atas. Selamat mencoba!

2 komentar:

  1. Di tunggu kelanjutannya bro ,.. sudah tak sabar lagi :D hehe

    BalasHapus
  2. Hanya segitu doank penjelasannya?

    BalasHapus
Berkomentarlah dengan baik. Komentar anonim tidak akan dijawab.