Membuat Responsive Layout

Pada Tips dan Trik kali ini kita akan mencoba membuat layout website sederhana yang responsive. Ini akan membantu mempercantik tampilan web ketika kita membukanya pada berbagai ukuran layar yang berbeda-beda. Tampilan layout yang responsive akan menyesuaikan pada ukuran gadget yang digunakan.

Kita akan mencoba membuat layout web responsive yang cukup sederhana untuk memudahkan kita memahami konsep dasar responsive layout.

HTML
Langkah pertama kita akan mulai dengan membuat struktur HTML-nya, dan karena kita akan membuat 2 kolom ditambah 3 kolom column, maka pada class .main akan kita bagi menjadi 5 class yaitu .left, .right, dan .col (3 column) setiap class nantinya akan diberi ukuran tertentu dan diberi properti float agar membentuk kolom. masing-masing terdiri dati class header, class main ( terdiri dari class “.left”, “.right”, “.col”, dan class footer. Berikut kurang lebih kerangka HTML nya.

<div class="container">
	<div class="header">Untuk bagian header </div>
	<div class="main">
		<div class="left">Untuk kolom bagian Kiri </div>
		<div class="middle">Untuk kolom bagian Kanan </div>
		<div class="col-1">Untuk kolom column 1</div>
		<div class="col-2">Untuk kolom column 2</div>
		<div class="col-3">Untuk kolom column 3</div>
	</div>
	<div class="footer">Untuk bagian footer </div>
</div>

Untuk bagian head dari HTML kita beri tag meta viewport seperti berikut:

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

CSS
Struktur HTML telah selesai kita buat, tugas kita sekarang membentuk layoutnya dengan menambahkan kode CSS agar membentuk layout yang diinginkan, berikut kode CSSnya:

.container{
	max-width: 1080px;
	margin: 20px auto;
	background: #fff;
	overflow: hidden;
	padding: 10px;
}


.header{
	border: 1px solid #dedede;
	padding: 10px;
	margin: 10px;
}

/* Main */
	.left{
		width: 760px;
		border: 1px solid #dedede;
		padding: 10px;
		margin: 10px;
		float: left;
	}
		.left img{
			max-width: 100%;			
			height: auto;
		}

		.left a{
			font-weight: bold;
		}

	.right{
		width: 260px;
		border: 1px solid #dedede;
		padding: 10px;
		margin: 10px;
		float: left;
	}


	.right ul{
		list-style-type: none;
	}
	.right ul li{
		display: block;
	}
	.right ul li a{
		display: block;
		border-bottom: 1px solid #dedede;
		margin-bottom: 10px;
		padding: 10px 5px;
	}

/*  Column  */
	.col_1 {
		width: 333px;
		border: 1px solid #dedede;
		padding: 10px;
		margin: 10px;
		float: left;
	}
	.col_2 {
		width: 333px;
		border: 1px solid #dedede;
		padding: 10px;
		margin: 10px;
		float: left;
	}
	.col_2 ul{
		list-style-type: none;
	}
	.col_2 ul li{
		display: block;
	}
	.col_2 ul li a{
		display: block;
		border-bottom: 1px solid #dedede;
		margin-bottom: 10px;
		padding: 10px 5px;
	}

	.col_3 {
		width: 333px;
		border: 1px solid #dedede;
		padding: 10px;
		margin: 10px;
		float: left;
	}

.footer{
	clear: both;
	border: 1px solid #dedede;
	padding: 10px;
	margin: 10px;
	text-align: center;
}

Menjadi dua Kolom Ketika di Tablet (contoh kasus ukuran layar 1000px)
Pada kasus yang sedang kita buat, layout akan berubah ketika ukuran layar 1000px, ukuran 1000px ini bisa diganti sesuai dengan kebutuhan, misalnya saja 1080px, atau 950px, tergantung keinginan. Akan lebih baik lagi jika disesuaikan dengan ukuran perangkat-perangkat yang banyak dipakai seperti iPad, Galaxy Tab, dll. Kode untuk merubah layout menjadi 2 kolom adalah menggunakan bantuan media query @media screen and (max-width: 1000px) yang artinya ukuran layout maksimal 1000px. Berikut kode CSS nya.

@media screen and (max-width: 1000px) {
	
	.container {
		width: 100%;
	}
    
	.left {
		width: 60%;
	}
	
	.right {
		width: 33%;
		float: right;
	}
	
	.col_1 { 
		clear: both;
		width: auto; 
		float: none;
	}
	.col_2 { 
		width: auto; 
		float: none;
	}
	.col_3 { 
		width: auto; 
		float: none;
	}
}

Sebenarnya kode CSS bisa digunakan bukan hanya untuk mengatur jumlah kolom, namun juga bisa melakukan perubahan-perubahan lain seperti merubah kolom menjadi berwarna, merubah ukuran font, warna font, dll.

Menjadi Satu Kolom Ketika di Ponsel (contoh kasus ukuran layar 700px)
Kode CSS yang kita gunakan diatas tidak bisa kita gunakan untuk ukuran layar yang lebih kecil, maka kita buat lagi CSS nya, masih tetap dengan media query namun kita rubah menjadi satu kolom pada ukuran 700px kebawah. Berikut kode CSS nya:

@media screen and (max-width: 700px) {
	
	.header, 
	.footer{
		text-align: center;
	}
		
	.left {
		width: auto;
		float: none;
	}
	
	.right {
		width: auto;
		float: none;
	}	
	.col_1 { 
		width: auto; 
		float: none;
	}
	.col_2 { 
		width: auto; 
		float: none;
	}
	.col_3 { 
		width: auto; 
		float: none;
	}
}

Pada kode CSS diatas tidak ditentukan lagi lebar kolomnya, semua div dibuat width: auto yang artinya dibuat memenuhi lebar layar, akhirnya terbentuklah layout yang hanya satu kolom.

Dengan contoh sederhana diatas diharapkan dapat menjelaskan konsep dasar responsive layout agar mudah dimengerti. Untuk project sesungguhnya Anda bisa mengembangkan lagi dengan menambahkan elemen-elemen yang lain.

Sekian Tips dan Trik kali ini, semoga bermanfaat.

Berikut link demo dan source code lengkapnya yang bisa di download.
DEMO | DOWNLOAD

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *