Membuat Desain Website Menjadi Responsive
Update 1 April 2013
Setelah kemarin hampir 2 jam modifikasi tampilan blog saya agar responsive akhirnya selesai juga dan hasilnya cukup memuaskan ketika di buka dengan berbagai resolusi layar..
Setelah kemarin hampir 2 jam modifikasi tampilan blog saya agar responsive akhirnya selesai juga dan hasilnya cukup memuaskan ketika di buka dengan berbagai resolusi layar..
Untuk pembahasan kali ini saya akan share bagaimana caranya agar tampilan blog/website kita menjadi responsive. Seperti yang sudah saya jelaskan dalam posting waktu lalu tentang "Website responsive testing" mengenai arti responsive. Responsive pada website adalah menyesuaikan tampilan website atau blog terhadapa gadget yang kita gunakan, misalnya Laptop, Tablet, Smart Phone dengan resolusi layar yang berbeda-beda. Disini kita hanya menambahkan kode @media only screen and (max-width:800px) { yang artinya ukuran tampilan website/blog tidak boleh lebih dari 800 pixel
contoh:@media only screen and (max-width:800px) {dengan contoh diatas maka tampilan website menjadi satu colom, yaa karena ga mungkin untuk tampilan 800 pixel website dengan 2 colom saya rasa kurang bagus.
#outer-wrapper {width:750px; margin:0 auto;} //ukuran tampilan website
#main-wrapper {width:750px;} //ukuran page atau isi
#sidebar-wrapper {width:750px;} //ukuran sidebar
#footer {width:750px;} //ukuran footer
}
Berikut cara untuk membuat tampilan website/blog menjadi responsive:
1. Copy code berikut ini dan letakkan dibawah kode <head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>2. Kemudian Copy code berikut ini dan letakkan dibawah kode ]]></b:skin>
<style>
@media only screen and (min-width:768px) and (max-width:989px) {
#outer-wrapper {width:730px; margin:0 auto }
Kode CSS lainya
}
@media only screen and (max-width:767px) {
#outer-wrapper {width:540px; margin:0 auto }
Kode CSS lainya
}
@media only screen and (max-width: 580px) {
#outer-wrapper { width: 500px }
Kode CSS lainya
}
@media only screen and (max-width: 490px) {
#outer-wrapper { width: 430px }
Kode CSS lainya
}
@media only screen and (max-width: 479px) {
#outer-wrapper { width: 280px }
Kode CSS lainya
}
@media screen and (max-width: 260px) {
#outer-wrapper { width: 210px }
Kode CSS lainya
}
</style>
Code tersebut yang saya gunakan untuk membuat tampilan blog ini menjadi responsive
Untuk kode CSS-nya kalian bisa liat ID setiap elemen seperti Sidebar, main-wrapper, outer-wrapper, footer dan lain-lain karena pada setiap template ID setiap elemen bisa saja berbeda, seperti blog saya ini yang biasanya menggunakan #main-wrapper kalau punya saya #content_left.
Untuk melihat hasilnya bisa lihat disini Smart Responsive Tester for Web Designers klik tombol Lauch the tool. kemudian masukan alamat website atau blog anda lalu klik Test
Atau anda juga bisa lihat tampilan responsive blog ini tinggal masukan saja alamat blog ini http://mdf-blog.blogspot.com.
Semoga bermanfaat.
Posting Komentar
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>
Link aktif akan dimatikan secara otomatis.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.