Responsive Webdesign, Apa dan Bagaimana ?

Saat ini, internet sudah dapat diakses oleh berbagai macam perangkat, mulai dari Komputer sampai dengan Smartphone. Dan yang menjadi permasalahan adalah semua perangkat tersebut memiliki layar dengan resolusi yang berbeda-beda, sehingga jika situs yang kita buat dibuka di dalam handphone dengan layar yang kecil, maka konten yang ditampilkanpun menjadi rusak, atau jika bisa ditampilkan secara penuh atau mungkin akan direpotkan dengan aktifitas zoom-in dan zoom-out untuk membaca kontent.

Disinilah Responsive webdesign berperan. Webdesign yang responsive akan langsung beradaptasi dengan ukuran layar device, sehingga konten yang ditampilkan tidak rusak atau tidak perlu lagi zoom-in dan zoom-out. Dan pada tutorial inilah saya akan membahas bagaimana cara membuat responsive web design tersebut dengan menggunakan metode CSS media queries.

Jika masih bingung apa yang sedang saya bicarakan, silahkan tengok demonstrasi berikut, lalu resize browser anda secara horizontal. Perhatikan bahwa konten juga ikut beradaptasi sesuai dengan ukuran browser.
Demonstrasi

Ketika browser diresize dengan ukuran lebar 768px, Sidebar berpindah lokasi menjadi di bawah. selanjutnya ketika browser diresize kembali ke ukuran 600px, List menu berubah menjadi Combo Menu. Menarik bukan jika desain web seperti itu ?.

HTML

Pertama-tama kita buat markup untuk demonstrasi tutorial ini, markup adalah layout web standar yakni header, navigation, content, sidebar dan footer.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<title>Responsive Demonstration</title>
</head>
<body>
	<div id="wrapper">
		<div id="header">
			<h1><a href="http://www.ariona.net" title="">Responsive Webdesign Demonstration</a></h1>
		</div>
		<div id="navigation">
			<ul class="menu">
				<li><a href="">Home</a></li>
				<li><a href="">Blog</a></li>
				<li><a href="">Arsip</a></li>
				<li><a href="">About</a></li>
				<li><a href="">Contact</a></li>
			</ul>
			<select>
				<option value="Home">Home</option>
				<option value="Blog">Blog</option>
				<option value="Arsip">Arsip</option>
				<option value="About">About</option>
				<option value="Contact">Contact</option>
			</select>
		</div>
		<div id="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		<div id="sidebar">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				quis nostrud exercitation ullamco laboris nisi ut tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
		</div>
		<div class="clear"></div>
		<div id="footer">
			<p>
				copyright © 2011 by <a href="http://www.ariona.net" rel="dofollow">ariona.net</a>
			</p>
		</div>
	</div>
	<div class="clear"></div>
</body>
</html>

Perhatikan bahwa pada navigation, selain saya menuliskan Unordered list untuk menu, saya juga menyiapkan combobox untuk menu.

CSS

Selanjutnya kita beri style pada markup yang telah kita buat, untuk style berikut saya yakin anda sudah pada jago.

*{
	margin:0;padding:0;
}
body{
	background:#F9F4EB;
	font-family: georgia;
}
p{padding:20px;line-height:30px;}
a{color:black;text-decoration:none}
#wrapper{
	width:960px;
	margin:auto;
	background: white;
}
.clear{clear:both;}
#header{
	background:#9acf11;
	padding:20px;
}

#navigation ul{list-style:none;background:#62830a;overflow:hidden;}
#navigation ul li{float:left;padding:10px;border-right:1px solid #384b06;}
#navigation select{
	padding:10px;width:100%;
	display:none;
	background:#62830a
}
#content {
	float:left;
	width:600px;
}

#sidebar{float:left;width:360px;}

#footer{
	background:#62830a;
}

Untuk menu yang menggunakan combobox, saya hide terlebih dahulu, karena kita akan memunculkannya pada resolusi 600px kebawah sebagai pengganti menu list.

Let’s Make it Responsive

Tahap yang paling utama dari tutorial ini adalah membuat layout yang kita buat menjadi responsive. Seperti yang saya katakan tadi, bahwa kita akan menggunakan CSS media queries untuk membuat layout kita menjadi responsive. Contoh penggunaannya seperti berikut

@media screen and (max-width:768px){
	/* Masukkan style yang akan dirubah */
}

Jika saya translate ke bahasa Indonesia :), kira-kira menjadi seperti berikut :

“Jika website dibuka dengan perangkat layar dan ukuran maksimal layar adalah 768px maka gunakan style berikut”
Maksud screen adalah website yang dibuka menggunakan layar baik itu monitor atau layar handphone, kita juga bisa membuat style untuk printer, jadi medianya print.

Cukup penjelasan singkatnya, kita lanjutkan ke praktek. Seperti yang saya demonstrasikan pertama kita buat style untuk ukuran layar 768px ke bawah. Jadi dalam file CSS tambahkan kode berikut :

@media screen and (max-width:768px){
	
}

yang akan kita rubah adalah ukuran #wrapper, #content dan #sidebar, jadi tambahkan kode berikut di dalam Media Queries yang kita buat barusan.

@media screen and (max-width:768px){
	#wrapper{
		width:90%;
	}
	#content{
		width:100%;
		float:none;
	}
	#sidebar{
		width:100%;
		float:none;
		border-top:1px solid #384b06;
	}
}

Jika kita menggunakan persentasi untuk ukuran, maka layout akan otomatis berubah mengikuti ukuran layar. Selanjutnya kita override float:left pada #content dan #sidebar menjadi none, dan kita tambahkan border atas pada #sidebar, sebagai pemisah antara #content dan #sidebar.

Selanjutnya kita tambahkan media querie baru untuk ukuran layar 600px ke bawah. Dalam query ini kita akan menyembunyikan Menu List dan menampilkan menu combo.

@media screen and (max-width:600px){
	#navigation ul{display:none;}	                          
	#navigation select{display:block;}
}

Yep, projek selesai, silahkan save dan buka pada browser. Coba untuk meresize browser secara horizontal. Sebagai contoh kasus lainnya Saya juga membuat web ini responsive, namun hanya untuk ukuran 800px.

Kesimpulan

Pada dasarnya kita bisa menggunakan persentasi untuk membuat web menjadi responsive, namun cara ini sangat sulit karena kita harus menentukan setiap ukuran element dalam persentasi. Untuk itu cara Media Query lah yang termudah untuk membuat website menjadi responsive dan Jangan Lupa untuk meninggalkan komentar :).

Sumber Referensi

Sebagai sumber referensi lainnya anda dapat membuka situs-situs berikut. disana dibahas bagaimana membuat video, gambar, table menjadi responsive.

Update

Tambahkan tag berikut di dalam header supaya bisa berjalan dengan baik di perangkat Android atau iOS. Karena jika tidak kedua device tersebut biasanya menampilkan versi desktop bukan versi mobile.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >

32 thoughts on “Responsive Webdesign, Apa dan Bagaimana ?”

  1. Ya, belakangan ini memang responsivitas sedang ramai dibicarakan.

    Kalo menurut saya mas, responsive lebih powerful jika menggunakan konsep fluid (%), bukan fixed (px). Jadi akan pas diliat dari layar kecil. :)

    1. Kalo nentuin ukurannya sih, nggak beda jauh sama fixed (px) mas. Cuma masalah yang sering muncul itu masalah padding-nya. Layout fluid diberi padding pakai px, biasanya ukuranya jadi nggak sesuai harapan.
      Jadi mesti nambahin satu elemen lagi di dalamnya dan diset marginnya untuk mendapatkan efek padding. :D

  2. mmmm cuma mau mengomentari demonstrasinya aja.. setau gue kalo inti dari responsive itu :
    1. Fluid Grid / Flexible Grid Layout
    2. Flexible image
    3. Media queries
    Kalo liat Demonya, trus width dari browser di kurangi sedikit2, sepertinya masih kurang sempurna. Tapi untuk max-width:768px dan max-width:600px, works perfectly. Untuk Media queries, That how to using media queries in css 3, well done.

    CMIIW

  3. Sebelumnya, salam kenal dulu buat admin blog ini. Saya datang dari google :) Cuma mau sedikit ngasih kritikan. Seharusnya, sebelum memposting/menulis masalah desain web yang responsif, maka blog atau setidaknya halaman posting ini sudah responsif dulu. Sekian saja. Maaf sebelumnya.

    1. Web ini memang sengaja tidak dibuat responsif karena berdasarkan statistik, rata-rata pengujung menggunakan resolusi yang sama. Sebagai penggantinya juga sudah disertakan link Demonstrasi. Jadi untuk melihat contohnya silahkan buka demonstrasinya :).

  4. kalau soal website dan internet saya memang baru pemula tapi setidaknya saya mau belajar dan berambisi untuk menjadi web master,walaupun saya sekarang masih berstatus pelajar SMK tapi itu bukan penghalang bagi saya.
    inilah yang saya cari bagaimana caranya mengatur resolusi web design agar automatis mengikuti resolusi layar monitor yang ada?saya telah browsing selama satu minggu dan baru ketemu solusinya terimakasih banyak para web master !
    hormat saya!

    1. Banyak kok pelajar SMK yang udah mulai merintis di bidang IT.. :) , you’re not alone.

      Terima kasih jika artikelnya membantu anda. jangan lupa share linknya ke teman anda, siapa tahu ada yang lagi nyari juga. :)

    1. yup, Foundation itu framework yang bagus buat responsive. Namun disini saya hanya ingin menjelaskan Apa dan bagaimana Responsive Web Design :) Siapa tau mau buat framework sendiri, kan udah baca dasar-dasarnya disini. :D

  5. mas klo halamannya ada gambarnya gimana?misalkan saya set klo widthnya 600px gambarnya display:none gambarnya sih memang ga munncul tapi dia tetap didownload (abisin bandwith).gimana caranya biar gambarnya ga di tampilkan buak di hide ?

  6. Saya memang baru-baru ini saja serius mempelajari bagaimana responsive theme bekerja, dengan sedikit pemahaman tentang css yang saya pelajari ternyata membuat design responsive tidaklah terlalu sulit. Menggunakan media screen dengan max-width untuk mengontrol ukuran tampil disetiap layar yang berbeda.

    Ini menarik sekali, karena sebelumnya saya justru berkonsentrasi untuk membuat double theme untuk setiap website yang saya buat, sehingga punya 2 wajah antara desktop dan mobile dan tentu masih bisa explore habis2an untuk versi desktop dengan mendesain yang cantik background image.

    Sementara untuk membuat desain responsive saya harus meninggalkan background image dan bermain full dengan trick css dan html.

    Saat ini saya sedang berusaha untuk berkreasi antara responsive dan bagaimana tetap bertahan pada background gambar. Butuh lebih banyak tenaga memang dibanding hanya memilih salah satu siantaranya.
    Tapi seperti admin blog ini mas Ari yang suka tantangan, begitu juga saya…

Tinggalkan Komentar Anda

Artikel lain yang mungkin anda sukai

copyright © 2014 by ariona.net | proudly powered by Wordpress