CSS, Web Design / Posted 4 years ago / 19 Komentar
thumb

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.

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 :D

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

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

Tags

Desain web,contoh web design,contoh desain web,contoh web design sederhana,contoh css,contoh desain web yang bagus,kelebihan css3,contoh website bagus,perbedaan css dan css3,responsive,desain web bagus,contoh desain web yang menarik,jenis-jenis framework,ukuran psd,perbedaan css dengan css3,Responsive Web Design,contoh layout website,contoh tampilan web yang bagus,jenis framework,contoh tampilan web yang menarik Tags: , , ,
cToko Toko Online

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

http://edy.im


16 Comments

  1. Posted May 14, 2011 at 2:20 pm | Permalink

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

    • Posted May 14, 2011 at 11:09 pm | Permalink

      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 :D

    • hari
      Posted May 16, 2011 at 3:30 am | Permalink

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

      • Posted May 16, 2011 at 4:39 am | Permalink

        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 :D

      • ardianzzz
        Posted May 17, 2011 at 4:09 am | Permalink

        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.

        • Posted July 16, 2012 at 12:56 am | Permalink

          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. Posted May 15, 2011 at 9:43 am | Permalink

    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?

    • Posted May 15, 2011 at 3:57 pm | Permalink

      Yap, setidaknya dengan banyaknya variasi resolusi screen yang ada sekarang bisa dipahami dan diatasi dengan teknik media query.

  3. Posted May 16, 2011 at 3:32 pm | Permalink

    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 ? :)

    • Posted May 16, 2011 at 3:58 pm | Permalink

      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.

      • Posted May 17, 2011 at 3:43 pm | Permalink

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

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

  4. Posted June 19, 2011 at 11:43 am | Permalink

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

    • Posted July 20, 2011 at 11:39 pm | Permalink

      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.

    • Posted July 16, 2012 at 1:06 am | Permalink

      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. Posted July 20, 2011 at 3:39 pm | Permalink

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

  6. Posted July 30, 2012 at 5:24 am | Permalink

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

3 Trackbacks

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

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

  3. By Cara Sederhana Membuat Responsive Web | beter on November 11, 2011 at 1:35 pm

    [...] 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 [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

webdesign