Membuat Desain Web Responsive Part 1

Desain website responsif lebih disukai karena kemampuannya dalam beradaptasi dengan banyak jenis device. Hal ini semakin penting, mengingat jumlah pengguna perangkat mobile semakin meningkat pesat. Jika anda memiliki website, namun belum memiliki desain responsif, anda harus mempertimbangkan untuk membuat desain responsif baru anda.
Ada beberapa hal yang perlu diketahui untuk membuat design website anda responsif. Berikut, kita bahas poin-poinnya. Dan di akhir, kita akan praktekkan dan melihat hasilnya dengan sebuah sampel contoh.

1. Jangan Gunakan <table> Untuk Layout
Ubah desain anda yang bermula dari layout berbasis <table>, dengan layout <div>.

<div class='content'>
    <div class='content-header'>
        header
    </div>
    <div class='content-left'>
        kiri
    </div>
    <div class='content-right'>
        kanan
    </div>
    <div style='clear:both' />
    <div class='content-footer'>
        footer
    </div>
</div>

2. Gunakan ukuran % untuk mengatur lebar layout.
Belum cukup dengan poin sebelumnya, kita juga harus mengatur layoout di atas dengan CSS. Untuk membuat desain website anda responsif, penentuan ukuran sebaiknya tidak dilakukan secara absolut, namun relatif terhadap persentase ukuran browser ataupun ukuran parent element. Khususnya ketika menetukan ukuran width tiap elemen.

3. Secara opsional gunakan unit ukuran relatif untuk teks
Bukan cuma box yang harus diperhatikan, font juga. Agar teks dapat bersesuaian dengan ukuran element parent-nya, ukuran font sebaiknya ditentukan dengan ukuran relatif juga. Untuk ini, kita bisa menggunakan unit relatif %, atau em untuk menyesuaikan dengan pengaturan ukuran font default web browser. Perlu diketahui, 1em = ukuran font standar yang sedang digunakan. Jika kita ingin melihat ukuran font sedikit lebih besar, coba gunakan 1.2em, atau 2em untuk melihat ukuran 2 kali ukuran normal.
font-size: ...

4. Buat layout benar-benar responsif dengan tambahan rule CSS ini
float
Yang agak membingungkan, ketika memulai desain web responsif adalah membuat 2 elemen berdiri beradampingan. Ini dapat dicapai dengan rule float dalam CSS. Kita dapat mengatur yang bagian kiri dengan float:left, dan bagian kanan dengan float:right. Atau, sama-sama float:left juga tidak masalah.

box-sizing
Masalah berikutnya timbul, ketika kita mencoba resize web-browser. Awalnya elemen yang berdampingan tadi menyesuaikan dengan baik; tapi saat ukuran terlalu kecil, salah satu elemen pindah ke bawah. Ini bisa diatasi dengan memberikan rule box-sizing:box-border. Secara default, semua element memiliki properti box-sizing:content-box. Dengan mengganti rule ini, batasan elemen ditentukan oleh bagian tepian/border elemen, bukan dari content yang ada di dalamnya.

clear
Terkadang, elemen lain yang seharusnya berada di bawah tiba-tiba naik ke atas. Meng-overlap di atas elemen yang menggunakan rule float. Untuk menghindari ini, kita buat sebuah element <div> baru dibawahnya dengan menerapkan rule clear:both.

    <div class='content-left'>
        ...
    </div>
    <div class='content-right'>
        ...
    </div>
    <div style='clear:both' />
    ...

 Overall, seperti ini contoh CSS untuk desain responsif HTML pada poin pertama.

<style>
.content{
	max-width:80%;
	margin: 0 auto;
	border:1px solid #999;
}
.content-header, .content-footer{
	background:#DFF;
	width:100%;
}
.content-left{
	height:200px;
	background:#DDD;

	width:50%;
	float:left;
	box-sizing:border-box;
}
.content-right{
	height:200px;
	background:#AAA;

	width:50%;
	float:left;
	box-sizing:border-box;
}
</style>

4. Terapkan rule @media dalam CSS.
Jika ada properti yang ingin dibuat spesial hanya pada ukuran browser tertentu, rule @media bisa digunakan. Sebagai contoh, rule ini akan membuat ukuran .content 100% dari lebar browser saat lebar browser berukuran di bawah atau sama dengan 500px.

@media screen and (max-width: 500px) {
	.content{
		max-width:100%;
	}
}
@media screen and (min-width: 501px) {
	.content{
		max-width:80%;
	}
}
.content{
	margin: 0 auto;
	border:1px solid #999;
}
...

Seluruh kode
Kita gabungkan semuanya jadi satu...

<head>
	<style>
	@media screen and (max-width: 500px) {
		.content{
			max-width:100%;
		}
	}
	@media screen and (min-width: 501px) {
		.content{
			max-width:80%;
		}
	}
	.content{
		margin: 0 auto;
		border:1px solid #999;
	}
	.content-header, .content-footer{
		background:#DFF;
		width:100%;
	}
	.content-left{
		height:200px;
		background:#DDD;
		width:50%;
		float:left;
		box-sizing:border-box;
	}
	.content-right{
		height:200px;
		background:#AAA;
		width:50%;
		float:left;
		box-sizing:border-box;
	}
	</style>
</head>
<div class='content'>
	<div class='content-header'>
		header
	</div>
	<div class='content-left'>
		kiri
	</div>
	<div class='content-right'>
		kanan
	</div>
	<div style='clear:both' />
	<div class='content-footer'>
		footer
	</div>
</div>

Wow, keren bukan?
Sekarang, setelah mengetahui dasar-dasarnya; anda bisa mulai mengembangkan template responsif pertama anda. Atau, modifikasi template terdahulu yang masih anda sukai.
Semoga bermanfaat...