Anda di halaman 1dari 7

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: Its what some of us were going for with liquid web
design back in the 1990s, only it doesnt 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
1 <link rel="stylesheet" media="screen rel="stylesheet" href="style.css" />
2 <link rel="stylesheet" media="screen and (max-device-width : 800px) rel="stylesheet
3 <link rel="stylesheet" media="print rel="stylesheet" href="print.css" />
4 <link rel="stylesheet" media="handled rel="stylesheet" href="handled.css" />

XML (Jika markup kita berbasis XML)


1 <?xml-stylesheet media="screen and (max-device-width: 800px)" rel="stylesheet" href="sm

Pada CSS dengan @import


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

Pada CSS dengan @media


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

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: Belajar HTML5 : HTML5 Cheat Sheets

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?

Cara Sederhana Membuat Responsive


Web
Melanjutkan postingan Edy Pang tentang Mengenal Responsive Webdesign saya
ingin berbagi cara yang cukup sederhana untuk membuat website kita
responsive hanya dengan menambah elemen @media-query pada CSS.

Tahap pertama yang harus kita pahami dalam membuat responsive web
adalah lebar dari disain blog/situs kita, diantaranya
lebar container, wrapper ataupun main.
Kita kasih contoh pada blog saya rudyazhar.com, apa-apa saja yang saya
sesuaikan untuk membuatnya menjadi responsive. Tapi untuk mengujinya
silahkan anda perkecil tampilan pada browser anda mulai dari yang lebih kecil
hingga yang sangat kecil dan lihat apa yang terjadi.. Blog saya tetap
mengikuti seberapa lebar tampilan browser tersebut, tidak ada scroll sama
sekali kesamping. Itu yang namanya responsive.
Pertama kali kita mencari kode .wrapper yang memiliki lebar 728 pixel, font-
size:1.2em dengan line-height: 1.6;
Tahap selanjutkan kita membuat querynya.
Mulai dari yang paling besar dulu.
1
@media screen and (max-width: 860px) {
2
3 .wrapper {
4 width: 95% ; }
5
6 body {font-size: 1em;
7 line-height: 1.44;}
8
p {font-size: 0.8em;}
9 }
10
Untuk ukuran 860 saya membuat lebar .wrapper menjadi 95% dari lebar
layar, font-size pada body dibuat 1em dengan line-height menjadi 1.44.
Sedangkan font untuk postingan saya buat menjadi 0.8em.
1
@media screen and (max-width:767px) {
2
3 #shapeworksbutton {bottom: 52px;
4 left: 10px;}
5
6 #copyright {
7 padding: 100px 0 0 10px;}
8
9 #primary, #html5logo, #codecanyon {display:none;}
10
#iklan {display:none;}
11
12 }
13
pada ukuran 767 saya hanya menghilangkan beberapa elemen yang saya
anggap mengganggu dan menyesuaikan letak iklan paling bawah.
1 @media only screen and (min-device-width : 320px) and (max-device-width : 480px), scr
2
body {
3 font-size:0.7em;
4 }
5 p {
6 font-size: 0.7em;}
7
8 .wp-pagenavi {display:none;}
9
}
10
11
Nah, ini adalah ukuran terkecil yang saya buat untuk responsibilitas web saya
yaitu min-device-width : 320px, disini saya menghilangkan .wp-pagenavi serta
mengecilkan lagi ukuran font menjadi 0.7em agar tidak tampak kebesaran
saat dibaca melalui layar Handphone.
Dengan tiga tahap diataslah saya membuat blog saya responsive, kemudian
langkah terakhir saya test menggunakan responsive tools, jadi kalau dimana
ada yang kurang bisa kita sesuaikan lagi.
Siapa bilang membuat responsive website itu susah? Kalau anda tahu
caranya dan mau melakukannya semuanya tidak ada yang sulit

cek
Http://mattkersley.com/responsive/