Monday, February 4, 2013

Membuat Desain Website Menjadi Responsive

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) {
#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
}

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.

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) {

    Kode CSS disini

    }
    @media only screen and (max-width:800px) {

    Kode CSS disini

    }
    @media only screen and (max-width:767px) {

    Kode CSS disini

    }
    @media only screen and (max-width:580px) {

    Kode CSS disin

    }
    @media only screen and (max-width:560px) {

    Kode CSS disini

    }
    @media only screen and (max-width:490px) {

    Kode CSS disini

    }
    @media only screen and (max-width:479px) {

    Kode CSS disini

    }
    </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.

Judul: Membuat Desain Website Menjadi Responsive; Ditulis oleh Unknown; Rating Blog: 5 dari 5