Seperti yang telah kita ketahui bahwa penggunaan tablet dan beberapa perangkat mobile lainnya yang membuat penting bahwa bagaimana anda harus memperhatikan hal tersebut, oleh karena itu website anda harus siap dengan perubahan tersebut. Mungkin sekarang ini berbeda dengan zaman dulu. Masih inget jaman dimana kita mengakses halaman web dengan ponsel, ketika kita mengakses halaman tersebut maka tampilannya berantakan atau kita akan dialihkan ke halaman WAP nya :D. Betapa berantakannya halaman website itu hahaha :)

Dengan perkembangan teknologi saat ini dimana smartphone dan tablet semakin maraknya, disinilah desain website yang responsive sangat dibutuhkan. Salah satu keuntungan yang diberikan ketika kita membangun website dengan desain yang responsive adalah bahwa website kita dapat memberikan rasa yang berbeda kepada pengunjung website kita yang menggunakan beberapa perangkat yang berbeda (dalam hal ini ukuran layarnya ya :D).

Langkah Pertama

Buatlah sebuah file index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Belajar Responsive</title>

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

	<body>

		<div id="pagewrap">

			<header id="header">

				<hgroup>
					<h1 id="site-logo"><a href="#">Hitamcoklat</a></h1>
					<h2 id="site-description">Blogging</h2>
				</hgroup>

				<nav>
					<ul id="main-nav" class="clearfix">
						<li><a href="#">Home</a></li>
						<li><a href="#">Profil</a></li>
						<li><a href="#">Contact</a></li>
						<li><a href="#">Portfolio</a></li>
					</ul>
					<!-- akhir main nav -->
				</nav>

				<form id="searchform">
					<input type="search" id="s" placeholder="Search" />
				</form>
			</header>
			<!-- akhir bagian header -->

			<div id="content">

				<article class="post clearfix">

					<header>
						<h1 class="post-title">
							<a href="#">Judul Postingan</a>
						</h1>
					</header>
					<figure class="post-image">
						<img src="images/snoopy.jpg" />
					</figure>

					<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 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>
				</article>
				<!-- akhir postingan -->
			</div>
			<!-- akhir content -->

			<aside id="sidebar">

				<section class="widget">
					<h4 class="widgettitle">Sidebar</h4>
					<ul>
						<li><a href="#">Wordpress</a></li>
						<li><a href="#">Design</a></li>
						<li><a href="#">Design</a></li>
					</ul>
				</section>
				<!-- akhir bagian section widget -->

			</aside>
			<!-- akhir sidebar aside -->

			<footer id="footer">

				<p>Tutorial by, <a href="#">Hitamcoklat</a></p>
			</footer>
			<!-- akhir footer -->
		</div>
		<!-- akhir page wrap -->
	</body>

</html>

Pada file diatas berisi sintaks HTML biasa yang digunakan dalam membangun sebuah halaman website. Selanjutnya kita akan membuat file CSS agar halaman tersebut terlihat enak dilihat heheh. Berikut adalah sintaks CSS nya

Langkah 2 [CSS]

Silahkan anda ketikan sintaks CSS berikut

/************************************************************************************
RESET
*************************************************************************************/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;
}

img, fieldset {
	border: 0;
}

/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

/* STYLE GENERAL */
body {
	background-color: #EAEAEA;
	font: .81em/150% Arial, Helvetica, sans-serif;
	color: #666;
}
a {
	color: #026acb;
	text-decoration: none;
	outline: none;
}
a:hover {
	text-decoration: underline;
}
p {
	margin: 0 0 1.2em;
	padding: 0;
}

/* AKHIR STYLE GENERAL */

/* list */
ul, ol {
	margin: 1em 0 1.4em 24px;
	padding: 0;
	line-height: 140%;
}
li {
	margin: 0 0 .5em 0;
	padding: 0;
}

/* heading */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.4em;
	margin: 20px 0 .4em;
	color: #000;
}
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.6em;
}
h3 {
	font-size: 1.4em;
}
h4 {
	font-size: 1.2em;
}
h5 {
	font-size: 1.1em;
}
h6 {
	font-size: 1em;
}

/* reset webkit input search */
input[type=search] {
	-webkit-appearance: none;
	outline: none;
}
input[type="search"] :: -webkit-search-decoration,
input[type="search"] :: -webkit-search-cancel-button {
	display: none;
}

/* struktur halaman */
#pagewrap {
	width: 980px;
	margin: 0 auto;
}

/* header */
#header {
	position: relative;
	height: 160px;
}

/* site logo */
#site-logo {
	position: absolute;
	top: 10px;
}
#site-logo a {
	font: bold 30px/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}

/* site deskripsi */
#site-decription {
	font: italic 100%/130% "Times New Roman", Times, serif;
	color: #fff;
	position: absolute;
	top: 55px;
}

/* search form */
#searchform {
	position: absolute;
	right: 10px;
	bottom: 6px;
	z-index: 100;
	width: 160px;
}
#searchform #s {
	width: 140px;
	float: right;
	background: #fff;
	border: none;
	padding: 6px 10px;
	/* transition */
	-webkit-transition: width .7s;
	-moz-transition: width .7s;
	transition: width .7s;
}
/* BAGIAN NAVIGASI */
#main-nav {
	width: 100%;
	background: #ccc;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 100;
}
#main-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	position: relative;
}
#main-nav li:first-child {
	margin-left: 10px;
}
#main-nav a {
	line-height: 100%;
	font-weight: bold;
	color: #000;
	display: block;
	padding: 14px 15px;
	text-decoration: none;
}
#main-nav a:hover {
	color: #fff;
	background: #474747;
}
/* BAGIAN KONTEN */
#content {
	background: #fff;
	margin: 30px 0 30px;
	padding: 20px 35px;
	width: 600px;
	float: left;
}

/* post */
.post {
	margin-bottom: 40px;
}
.post-title {
	margin: 0 0 5px;
	padding: 0;
	font: bold 26px/120% Arial, Helvetica, sans-serif;
}
.post-title a {
	text-decoration: none;
	color: #000;
}
.post-meta {
	margin: 0 0 10px;
	font-size: 90%;
}
.post-image {
	margin: 0 0 15px;
}

/* SIDEBAR */
#sidebar {
	width: 280px;
	float: right;
	margin: 30px 0 30px;
}
.widget {
	background: #fff;
	margin: 0 0 30px;
	padding: 10px 20px;
}
.widgettitle {
	margin: 0 0 5px;
	padding: 0;
}
.widget ul {
	margin: 0;
	padding: 0;
}
.widget li {
	margin: 0;
	padding: 6px 0;
	list-style: none;
	clear: both;
	border-top: solid 1px #eee;
}

/* FOOTER */
#footer {
	clear: both;
	color: #ccc;
	font-size: 85%;
}
#footer a {
	color: #fff;
}
/************************************************************************************
CLEARFIX
*************************************************************************************/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }

Baiklah jika selesai maka silahkan coba jalankan file index.html tersebut, maka akan tampil sebuah halaman website. Setelah itu coba kamu resize window kita maka akan tampil sebagai berikut…

respon1

Ya bisa dilihat bahwa halaman yang kita buat tadi masih belum responsive, lalu bagaimana kita membuat halaman yang responsive? Baiklah sekarang masuk ke tahap selanjutnya.. Silahkan ketikan sintaks berikut

Langkah 3 [responsive.css]

Langkah selanjutnya adalah menambah sintaks CSS yang tadi telah kita buat dengan menambahkan fungsi responsive web kepada CSS website kita seperti dibawah ini. Buatlah file baru bernama responsive.css

/* UNTUK UKURAN LEBIH KECIL DARI 980 PIXEL */
@media screen and (max-width: 980px) {

	/* pagewrap */
	#pagewrap {
		width: 95%;
	}

	/* content */
	#content {
		width: 60%;
		padding: 3% 4%;
	}

	/* sidebar */
	#sidebar {
		width: 30%;
	}

	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}

	/* embedded videos */
	.video embed,
	.video object,
	.video iframe {
		width: 100%;
		height: auto;
		min-height: 300px;
	}

}

/* UNTUK UKURAN LEBIH KECIL DARI 650 PIXEL */
@media screen and (max-width: 650px) {

	/* header */
	#header {
		height: auto;
	}

	/* searchform */
	#searchform {
		position: absolute;
		top: 5px;
		right: 0;
		z-index: 100;
		height: 40px;
	}

	#searchform #s {
		width: 70px;
	}
	#searchform #s:focus {
		width: 150px;
	}

	/* main nav */
	#main-nav {
		position: static;
	}

	/* site logo */
	#site-logo {
		margin: 15px 100px 5px 0;
		position: static;
	}

	/* site description */
	#site-description {
		margin: 0 0 15px;
		position: static;
	}

	/* content */
	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

	/* sidebar */
	#sidebar {
		width: 100%;
		margin: 0;
		float: none;
	}
	#sidebar .widget {
		padding: 3% 4%;
		margin: 0 0 10px;
	}
	/* embedded videos */
	.video embed,
	.video object,
	.video iframe {
		min-height: 250px;
	}
}

/* UNTUK UKURAN KURANG DARI 480 PIXEL */
@media screen and (max-width: 480px) {

	/* disable webkit text size adjust for iPhone */
	html {
		-webkit-text-size-adjust: none;
	}

	/* main nav */
	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}

}

Baiklah sekarang sudah selesai membuat halaman website dengan desain yang responsive. Jika anda sudah selesai coba jalankan file index.html tadi dengan menambahkan file CSS responsive tadi.. yap benar dengan menambahkan pada head html yang telah kita buat tadi dengan sintaks

<link rel=”stylesheet” href=”responsive.css” type=”text/css” />

Jika kita jalankan filenya maka akan tampil seperti dibawah ini

respon2

Bagaimana? ya.. semoga dengan tutorial yang sederhana ini dapat bermanfaat bagi yang sedang belajar web responsive ini seperti saya :D

Salam Blogger! ⤧  Next post Mengecek Username Ajax – Simple ⤧  Previous post Membuat OAuth Login Facebook PHP dan MySQL