Membuat Responsive Website

Setelah menulis tentang berkenalan dengan responsive website sekarang mari kita masuk ke bagian yang lebih serius yakni bagian implementasi pembuatan responsive website. Sebenarnya dalam pembuatan responsive website ini konsepnya sangatlah sederhana. Anda bisa menggunakan salah satu CSS handling yaitu “media-query”.

Dengan menggunakan media query memungkinkan untuk kita memberikan aturan untuk lebar layar tertentu. Untuk lebih jelasnya lihat pada gambar dibawah ini.

responsive-desktop-vs-mobile

Pada gambar diatas ada terdapat 4 komponen utama yakni header, content, sidebar dan footer. Yang membuatnya berbeda adalah jika disebelah kiri merupakan implementasi css pada browser dengan layar desktop (lebih besar dari 1024 pixel) dan sebelah kanan merupakan implementasi css pada browser mobile (lebar browser kurang dari atau sama dengan 1024 pixel).

Dengan menggunakan media query kita bisa mengatur jika browser lebih kurang atau sama dengan 1024 maka buat sebuah aturan yang baru.

Proses Pembuatan Responsive Website

Buatlah sebuah satu buah halaman yang menampilan header, content, sidebar dan footer kemudian berikan nama “index.php”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Responsive Example By belajarngoding.com</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
	<meta name="viewport" content="width=device-width" />

	<!-- Stylesheet -->
	<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>

<div class="header">
	<h1>Responsive Example</h1>
	<p>by <a href="http://belajarngoding.com/?ref=responsive-example">belajarngoding.com</a></p>
</div>

<div class="container clearfix">
	<div class="content">
		<div class="item">
			<p><strong>This is content area</strong></p>
			<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>
		</div>
	</div>
	<div class="sidebar">
		<div class="item">
			<p><strong>Sidebar</strong></p>
			<p>This is sidebar area, you can fill it with widget or simple information like about me or other content.</p>
		</div>
	</div>
</div>

<div class="footer">
	<p>Respect the author - <a href="http://belajarngoding.com/?ref=responsive-example">belajarngoding.com</a></p>
</div>

</body>
</html>

Kemudian buatlah sebuah file “style.css” yang mengimplementasikan standar web design style dan responsive design

.header, .content, .sidebar, .footer{
	background: #cccccc;
	margin-bottom: 10px;
}
.header, .container, .footer{
	width: 960px;
	margin: 0 auto;
}
.header h1, .header p{
	padding: 10px;
}

.container{
	margin-bottom: 10px;
}
	.content{
		width: 640px;
		float: left;
		margin-right: 20px;
	}
	.content .item{
		padding: 10px;
	}
	.sidebar{
		width: 300px;
		float: left;
	}
	.sidebar .item{
		padding: 10px;
	}

.footer p{
	text-align: center;
	padding: 10px;
}

/* handling responsive */
@media only screen and (min-width: 320px) and (max-width: 1024px){
	.header, .container, .footer, .content, .sidebar{
		width: 100%;
	}
}

Bagian yang kita sebut sebagai media query adalah bagian ini

@media only screen and (min-width: 320px) and (max-width: 1024px)

Yang terjadi sebenarnya adalah jika anda membuka halaman dengan mobile browser maka halaman tersebut akan mengimplementasi fluid style (style yang menggunakan persen “%” sebagai satuan width pada CSSnya).

Untuk melihat hasil dari kedua file diatas, saya telah menggabungkannya dengan basic style css agar terlihat lebih menarik. Silahkan lihat pada halaman demo responsive website. Untuk mengeceknya silahkan buka halaman demo menggunakan browser pada komputer anda dan pada smartphone anda.