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:  Animasi Scroll to Top dengan Jquery

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.

grain storage steel silo grain bins