Responsive web design adalah istilah desain web yang mengakomodasi berbagai lebar resolusi dan jenis media yang digunakan user. Umumnya mendesain website dalam fixed width (misalnya lebar 960px), namun ukuran ini tidak ideal pada saat user menggunakan layar ukuran dari 1024px karena akan ada bagian yang terpotong. Dengan adanya responsive web desain maka kekurangan tersebut akan diatasi. Contoh Responsive web desain sebagai berikut :

Simon Collison

Web Designer Wall

Media Queri.es

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 zaman dulu (sebelum populernya fixed width). Pada artikel ini, Jeffrey Zeldman menulis: “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.

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

<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" />

Xtended Manipulation Language  (XML) sbb :

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

Pada Cascade StyleSheet  (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.

CSS Grid


CSS Grid 12 kolom yang di develop 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.

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). Berikut beberapa artikel yang rekomendasikan untuk belajar responsive web design lebih lanjut :

Responsive Web Design Ethan Marcotte

CSS3 Media Queries & Wall Redesigned Nick La

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *