Responsive Design (uji coba)

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”

John Allsopp, “A Dao of Web Design”

Kutipan John Allsoop diatas dikutip ulang dari tulisan Ethan Marcotte di A List Apart, tentang Reponsive Web Design. Sebuah tulisan lawas tentang dasar-dasar pembuatan laman web yang responsive. Dalam bahasa sederhananya, responsive web adalah Laman web yang bisa dicetak, melakukan penyesuaian otomatis terhadap layar perangkat kecil seperti sabak atau telepon genggam.

Berangkat dari rasa penasaran dan keingin tahuan tentang responsive web design, akhirnya diputuskan untuk membuat laman blog ini menjadi laman yang responsive. Walaupun belum sempurna, setidaknya sudah tidak tergantung lagi dengan pengaya MobilePress yang selama ini digunakan.

Untuk mendapatkan gambaran nyata penerapan responsive desain, khususnya di template wordpress, digunakan beberapa tema gratis yang sudah menerapkan desain ini, diantaranya Theme Scherzo buatan Leon Paternoster dan Bonpress buatan WPZOOM. Dari kedua theme ini yang dipelajari hanya strukturnya saja.

Untuk membuat theme ini menjadi responsive, dipilih menggunakan metode Media Queries.
Yang pertama dilakukan menyisipkan Meta Tag pada header template.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Langkah selanjutnya, menentukan besaran layar yang disupport oleh tema dengan membuat file CSS-nya.
Untuk Layar dengan dimensi minimal 640px dan maksimal 1024px :

@media only screen and (min-width: 640px) and (max-width: 1024px)
body {color:#4b4b4b;}
.wrapper { width: 100%;}	
.headmenu {display:none;}
#container { width:90%;padding:0 5%;}

Untuk layar dengan dimensi minimal 320px dan maksimal 640px :

@media only screen and (min-width: 320px) and (max-width: 640px)
body {color:#333;}
a, a:link ,a:hover, a:link:hover, #bottom h2 {text-shadow:none;}
.wrapper { width: 96%; margin:0 auto;}
.headmenu {display:none;}
.logo h1{font-size:150%;}
.logo p{font-size:100%;}
#container { width:90%;padding:0 5%;}
.post-content img.alignnone,
.post-content img.alignleft,
.post-content img.alignright,
.post-content img.aligncenter{max-width:95%;}	
.post-title {font-size:130%;}
.post-meta-bottom-single {display:none;}
.wp-pagenavi {display:none;}

Kedua CSS diatas hanya contoh, silahkan berkreasi sendiri, sesuaikan dengan template yang digunakan. Terutama memahami struktur HTML yang digunakan pada template.

Sedangkan untuk tampilan pada layar dimensi yang lebih besar, tampilannya dibuat normal seperti yang sendang anda buka saat ini.

Pengetesan dimensi tersebut dilakukan pada Matt Kerssley. Selain alamat ini pengetesan dapat dilakukan pada beberapa tempat lain seperti : Mobile Phone Emulator, Operas Mini, Ipad Peek, ResponsivePx dan lain-lainnya.

Aldy M. Aripin

Seorang suami dari seorang istri, Ayah dari dua orang putri dan eyang dari dua orang putu. Saat ini bekerja sebagai profesional pada sebuah perusahaan swasta nasional yang bergerak dibidang pengusahaan hutan.

Mungkin Anda Tertarik

36 Tanggapan

  1. applausr says:

    tips nya menarik ya… mau dicoba coba ya…

  2. choirul says:

    berarti kayak versi mobile gitu ya

  3. Pak, asyiknya bisa belajar dari sini :)

  4. lozz akbar says:

    Om saya mampir ngombe kopi aja disini ya.. gak paham nih saya dengan rumus fisika di atas hehe

  5. m-amin says:

    Kayaknya para blogger juga harus ngikut jejaknya mas supaya blog semakin dapat cepat tersebar dan meluas, apalagi sekarang ini hp juga sudah dapat sipergunakan untuk aktivitas online semisal ngeblog, dll.

    • Aldy says:

      Sebenarnya bisa menggunakan pengaya Mobile Press dan sejenisnya, ini dalam rangka ekperimen saja mas.

  6. amdhas says:

    Saya selalu membahas ini om, di blogazinist dot com, magazinist dot tk, stun7 dot tk.

    Bahkan dengan less css, memang penting responsive ini. Sampai saya berdebat tentang image adaptive mat wilcox di forum web desain uk. Yang perlu di perhatikan jika Image, video klo image saya masih menggunakan aplication cache ai-cache dari mat wilcox.

    Nah masalahnya jika kita memberikan background position dan pseudo element, ini di media query musti di buat 0. Kalu tidak dia akan bergeser, itupun jika overflow:hidden.

    Nah, klo terlajur di reset lebih baik heading seluruhnya sampai h6 di berikan word-wrap:break-word.
    CMIIW

    • Aldy says:

      Terima kasih inputnya mas Hendro, saya memang menghadapi kendala di image. Akan saya kunjungi blog-blog tersebut untuk mencari tahu lebih lanjut.

  7. Jumiansyah says:

    Belum bisa bikin kayak gini mas.. Ngedit themes aja males banget.. Tapi boleh juga dicoba kayaknya

  8. TuSuda says:

    senang sekali dg inovasinya, kayak themes blognya tusuda sudah didesain khusus sama pakarnya.. Makasi ya Mas. :)

  9. nique says:

    lama2 saya gak ada jalan buat ke sini
    bahasannya gak satupun saya mengerti
    apa saya perlu brainwash dulu ya 😀

  10. Cahya says:

    Saya dulu pakai tema yang responsif, tapi ada yang kurang rasanya, sehingga sekarang kembali menggunakan tema klasik, yang pokoknya segitu saja :D.

    • Aldy says:

      Inipun hanya ujicoba kok, masih banyak kekurangannya. Lagian kalau mau kembali ke theme asal tinggal hapus meta tag dan CSS-nya. Selesai.

  11. Ijal Fauzi says:

    Terlihat sederhana tapi ini penting ya om, perlu ketelitian tinggi dan memperhatikan dengan detail tampilan diberbagai macam ukuran layar. Sampe sekarang saya belum bisa nerapin responsive sepenuhnya, baru belajar aja. hehe

  12. tokoku says:

    terima kasih tipsnya salam kenal

  13. Faisal says:

    Sepertinya memang penting untuk buat blog kita jadi reponsive saat di akses di berbagai media karena sekarang memang sudah banyak pengakses website maupun blog dengan menggunakan berbagai gadget. Manfaatnya memang untuk memanjakan para pengujung blog kita.

    Bahasan yang menarik pak Aldy. Terima kasih. Mau saya coba dulu.

    • Aldy says:

      Setidaknya untuk sementara bisa meniadakan pengaya MobilePress. Inipun masih uji coba mas, masih jauh dari sempurna, khususnya pengecilan gambar pada perangkat kecil. Masih cari referansi yang baik.

  14. Citro Mduro says:

    Hayoo terus berkreasi, saya nanti tinggal ngintip om

  15. dhenycahyoe says:

    Hemm.. bahas resposive ya, sebenarnya resposive sebuat tempalate itu sangat diperlukan sekali, tapi media query itu biasanya saya cukup menambahkan

    @media screen and (max-width: 720px){
    }
    itu sudah mencakup keseluruan pada resolusi dibawahnya karena memberikan ukuran maksimal 720px, jadi tidak membekakkan ukuran file CSS pada blog, CMIIW

    • Aldy says:

      Iya mas, cuma ada masalah pada image yang pengecilannya tidak sempurna, selain itu saya mencoba tidak menampilkan beberapa bagian yang saya anggap tidak terlalu penting pada layar kecil.

      • dhenycahyoe says:

        kalau untuk image sih sebenarnya tinggal menambahkan pada CSS utama-nya
        img{border:none;vertical-align:middle;max-width:98%;height:auto;width:auto\9; /* IE8 */}

        sedangkan untuk media query juga ditambahkan ini,

        img.alignleft , a img.alignleft, img.alignright, a img.alignright, img.aligncenter,
        a img.aligncenter{float:none;display: block; margin-left: auto; margin-right: auto; text-align:center;}

        agar image berada ditengah semua, ini insya allah sudah cukup responsive kok pak aldy, kalau untuk tidak menampilkan beberpa elemen pada layar tertntu ya pasti nya harus menambah media query lagi

        • Aldy says:

          Wah terima kasih mas Dheny masukannya, saya malah nggak kepikiran untuk menggunakan trik ini, karena pada beberapa image yang agak besar saya mendapatinya lonjong kebawah.