Mengenal Responsive Webdesign

Beberapa dari kita mungkin sudah familier dengan responsive web design. Ya, istilah untuk desain web yang mengakomodasi berbagai lebar resolusi dan jenis media yang digunakan user. Umumnya kita mendesain website dalam fixed width (misalnya lebar 960px), sayang sekali desain web ini akan tampak kurang bagus pada lebar resolusi kurang dari 1024px (misalnya 800px atau kurang), karena ada beberapa bagian website yang terpotong.


Contoh tampilan situs Belajar Web Design pada resolusi 800 x 600px.

Nah, responsive web desain mengakomodasi ‘kekurangan’ tersebut. Pada responsive web desain, beberapa elemen pada halaman web akan menyesuaikan baik dari sisi ukuran maupun posisi. Oke, lebih jelasnya berikut beberapa showcase responsive web (resize browser untuk melihat perbedaannya)

Simon Collison

Web Designer Wall

Media Queri.es (juga merupakan galeri CSS3 Media Query)

Pada contoh di atas, ukuran dan letak elemen website, baik block, text maupun gambar tampak menyesuaikan dengan lebar resolusi media/browser.

Tren responsive web design ini dipicu perkembangan CSS3 yang mengakomodasi media query. Beberapa desainer melakukan eksperimen dengan CSS3 Media query untuk mendesain responsive web design. Kelebihan CSS3 media query adalah kemudahannya melakukan kontrol terhadap target media atau resolusi dengan satu file CSS.

Responsive web desain ini mungkin mengingatkan kita pada desain web liquid jaman dulu (sebelum populernya fixed width). Pada artikel ini, Jeffrey Zeldman menulis: It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck. (Beberapa diantara kita menuju penggunaan liquid webdesign, kembali sebagaimana tahun 1990an, hanya saja tidak lagi jelek). Ya, responsive web desain memang bukan liquid desain, tetapi lebih tepat liquid with style :D.

Dengan teknik responsive seorang desainer dapat berkreasi dalam layout dan memikirkan agar desain tetap tampil bagus dan tetap terkontrol pada media berbeda.

Beberapa Teknik responsive Web Desain

Berikut beberapa contoh teknik penggunaan media queries untuk responsive web desain, berdasarkan rule pada W3C.

Pada HTML

<link rel="stylesheet" media="screen” rel="stylesheet" href="style.css" />
<link rel="stylesheet" media="screen and (max-device-width : 800px)” rel="stylesheet" href="small.css" />
<link rel="stylesheet" media="print” rel="stylesheet" href="print.css" />
<link rel="stylesheet" media="handled” rel="stylesheet" href="handled.css" />

XML (Jika markup kita berbasis XML)

<?xml-stylesheet media="screen and (max-device-width: 800px)" rel="stylesheet" href="small.css" ?>

Pada CSS dengan @import

@import url(small.css) screen and (max-device-width : 800px);

Pada CSS dengan @media

@media screen and (max-device-width : 800px) {
/* style untuk small */
}

Responsive framework

Berikut ini tiga framework responsive web design yang saya rekomendasikan jika Anda ingin membuat desain web yang responsif dengan cepat dan praktis.

Baca Juga:  350 Free Icons Material Design Style

Less Framework

Less Framework yang dikembangkan oleh Joni Korpi memiliki target responsive terhadap 4 layout yakni Desktop, Tablet, Wide Mobile dan Mobile. Less Framwork juga didukung beberapa desainer dan developer yang lain dengan menyediakan template untuk Photoshop, Illustrator dan Fireworks dan beberapa javacript untuk dukungan cross browser.

Download Less Framework

1140 CSS Grid

CSS Grid 12 kolom yang didevelop Andy Taylor ini ditargetkan untuk resolusi 1280px dan responsive untuk semua ukuran dibawahnya. CSS Framework ini juga bundled dengan PSD template dan javacript untuk support semuat browser.

Download 1140 CSS Grid

Columnal

Columnal CSS grid adalah hasil modifikasi dan penggabungan dua CSS framework lain. Elastisitas grid menggunakan metode yang sama dengan 1140 CSS Grid dengan tambhan ide kolom dalam kolom sebagaimana ada di framework 960.gs. Framework ini dikembangkan oleh Nick Gorsline (Pulp and Pixels).

Download Columnal

Catatan:

Penggunaan responsive web desain bukan untuk optimasi performance, tetapi sekerdar optimasi layout. Karena dengan teknik ini tidak ada kompresi image dan browser/device akan tetap meload CSS file secara keseluruhan.

Berikut beberapa artikel yang saya rekomendasikan untuk belajar responsive web design lebih lanjut 😀

  1. Responsive Web Design — Ethan Marcotte
  2. CSS3 Media Queries & Wall Redesigned — Nick La
  3. Update: Redesign Dini — Artikel saya 😀

Tertarik membuat design yang responsive terhadap perbedaan dimensi screen dan device?

Komentar

comments

Edy Pang

Think, feel, design and code for front-end development. Love apple, apples & apple juice.

19 Responses

  1. ardianzzz says:

    Sampai sejauh ini memang cuma optimasi layout saja. Kalau memaksakan mobileweb dengan metode responsive design, blunder namanya. 😀

    • Edy Pang says:

      Untuk beberapa device handled yang telah disupport prosesor lumayan, responsive akan tetap dapat diterapkan. Akan tetapi saat ini mostly perangkat mobile hanya memiliki prosesor yang terbatas, sehingga proses loading dan rendering website akan… lama 😀

    • hari says:

      gw kurang ngerti blundernya dimana? bisa dijelasin lebih detil? soalnya gw pake metode ini buat versi mobile projek web gw…

      • Edy Pang says:

        Mmm, bukan sepenuhnya blunder juga sih menurut saya, cuman karena dengan teknik responsive ini tidak ada kompresi gambar maupun file CSS, tampilan mobile akan memiliki ukuran (load size) yang tetap besar sebagaimana web keseluruhan. Untuk mobile dengan kapasitas terbatas, bisa jadi proses loading akan lama. Tetapi hal ini tidak akan bermasalah juga bagi mobile dengan kemampuan lumayan.

        Hal ini juga tegantung sih dengan konten yang ada di website kita, jika kita memiliki website galeri dengan image yang banyak dan berat, maka sebaiknya memang dibuat secara khusus versi mobilenya.

        Karena sebagaimana saya katakan di atas responsive web memang hanya untuk tujuan optimasi layout. Semoga menjawab 😀

      • ardianzzz says:

        Simpel, salah satu contoh: kalau di layar XGA kita berani menampilkan gambar berukuran besar, hingga lebih dari 600px. Nah, kalau di layar smartfon, gambar tersebut disusutkan dimensinya. Masalahnya, yang susut cuma panjang & lebarnya, ukuran file-nya tetep aja gede.

        • Mac Hary says:

          Betul, ukuran file akan tetep gede. Tapi kalo kita liat di pasaran, perkembangan teknologi gadget, makin murah makin canggih. Provider seluler jg pada banting harga, BW 1GB hanya 50rb, speed kenceng. spertinya ukuran file-nya tetep aja gede tidak akan menjadi masalah.

          gw pikir, solusi responsive web design ini lebih efisien.

  2. Haqqi says:

    Iya, optimasi layout penting juga. Gak enak banget lagi browsing di hape kok mesti geser-geser juga. Tapi mending optimasi layout seperti itu, atau membuat versi mobile dari aplikasi ya?

  3. yahya says:

    Nice share 🙂

    Jadi pengen tau, dari pembaca2 blog ini sudah adakah yang mengimplementasikan responsive webdesign ini di project nya ?

    Saya, se7 dg pendapat bhw ini bukan final & optimal solution buat mobileweb, palingan dg resp. webdesign ini kita cmn bisa menarget tablet & smartphone. Buat yg targetting mobile web mgkin perlu solusi yg lebih advance ( considering koneksi & scrensize nya ).

    Juga mesti dipikirin user behaviour perdevice itu beda, misalnya : do you really want to browse portfolio/gallery via common handphone ? baca2 juga pasti yg pendek2 kan ? 🙂

    • Edy Pang says:

      Setuju soal user behavior di common handphone, desain yang user friendly memang bukan sekedar “fit to screen” :D. Tapi responsive web desain ini mempermudah designer dan front-end developer untuk menargetkan banyak device dalam sekali proses desain saja.

      Dan dengan inovasi baru ini saya rasa cukup potensial untuk menampung kreativitas para desainer. Dan btw, saya lihat portfolionya Mas Yahya sudah mengimplementasikan responsive web, looks nice.

      • yahya says:

        Maksudnya nambahin task list item buat para designer ? semoga saja dg nambahnya kerjaan bisa naikin rate juga 😛

        haha, thx for noticing, meski banyak yg harus dipatchup sana sini 😛

  4. fgaeg says:

    responsive web design, menurut saya ini hanya trend terkait pengembangan teknologi yg sudah memasuki area mobile device (tidak hanya smartphone, tp jg area tablet dan mobile computing lainnya). setuju jika responsive web design ini dikembangkan dan diimplementasi untuk area tablet pc, tp tidak untuk smartphone krn seperti yg ud dijelasin sm @ardianzzz diatas, implementasi sebuah situs (desktop version) kdlm mobile web merupakan blunder.

    kompresi gambar dan script lainnya yg ngk dibutuhin akan tetep di-load, begitu jg dgn scripting yg related dgn manipulasi halaman web, apakah akan tetep jalan? sbg contoh, penggunaan slider? O_o”

    namun jika tujuanny hanya optimasi mobile layout, ini sah saja untuk dilakukan. selain menambah kredibilitas dr segi readability bagi para pengunjung situs, dan jg tentuny gengsi situs tersebut akan ikut naik (biasanya, krn user tidak perlu scroll kanan/kiri lg krn halamanny terlalu besar, it’s more comfort)

    lain halny jika tujuanny dibuat responsive krn tidak ada budget untuk mobile site tp ingin capability support seperti mobile site yg efisien, cepat dan mudah diakses, mending pecat aj klien kalian..

    • ardianzzz says:

      Alternatif solusinya adalah metode “mobile first”. Jadi kita memikirkan desain untuk mobile device dahulu, kemudian melakukan “progressive enhancement” — apaan tuh? — agar optimal pada desktop/tablet.

      BTW, kalau buat smartfon yang dilengkapi browser yang standard compliant plus akses internet 3G sepertinya tidak menjadikan banyak masalah. Blundernya ya itu tadi, ketika kita merasa bahwa responsive web dapat mengakomodasi semua pengguna mobile device secara keseluruhan.

    • Mac Hary says:

      Salam,

      Kaleum bro fgaeg, ladang untuk mobile app masih terbuka lebar kok, jangan takut hehe. Kita harus melihat kebutuhan dari sebuah situs, kan tidak semuanya harus punya mobile version, kalo yg simple semacam blog ya ijinkanlah mreka pake media query.

      Mobile app dan Web itu bukan Versus kok, tapi saling mengisi kekurangan

  5. temon says:

    weleh2, diskusi nya menghangant… sepertinya saya setuju dengan mas @fgaeg.. 🙂 responsive web design ini sah saja tapi mobile version tetep harus ada 🙂

  6. misteruban says:

    Walau saya masih buta tentang hal ini tapi menurut saya benar apa yang dikatakan mas Edy Pang pada komentarnya yang kedua, yaitu tergantung dengan konten serta web itu sendiri.. maaf kalau salah,hee.. nice info..

  1. July 6, 2011

    […] Responsive Webdesign, yang memungkinkan dapat menyesuaikan bebarapa lebar resolusi layar monitor dan media yang digunakan (PC, Tablet, Phone). […]

  2. August 20, 2011

    […] postingan Edy Pang tentang Mengenal Responsive Webdesign saya ingin berbagi cara yang cukup sederhana untuk membuat website kita responsive hanya dengan […]

  3. November 11, 2011

    […] Cara, Membuat, Responsive, Sederhana Melanjutkan postingan Edy Pang tentang Mengenal Responsive Webdesign saya ingin berbagi cara yang cukup sederhana untuk membuat website kita responsive hanya dengan […]

Leave a Reply

Your email address will not be published. Required fields are marked *

grain storage steel silo grain bins