Tutorial Web Responsif – part 2

Tutorial Web Responsif – part 2
May 7, 2014 mirzailhami

Sebelum membuat web responsif, perlu dipertimbangkan terlebih dahulu berapa ukuran-ukuran layar yang nantinya akan digunakan. Biasanya, para pengembang terlebih dahulu melakukan riset sederhana untuk mempelajari ukuran layar yang paling banyak digunakan oleh pengguna.

BACA: Tutorial Web Responsif – part 1 terlebih dahulu sebelum melanjutkan tutorial ini.

Ukuran yang paling sering digunakan biasanya dari 320 piksel (iPhone) hingga 2560 piksel (desktop). Tutorial ini nantinya memungkinkan Anda untuk membuat web responsif di semua ukuran layar, termasuk tablet.

Demo Responsif

Sebelum mulai, silahkan terlebih dahulu cek http://mirzailhami.com/mobile. Resize browser Anda untuk melihat bagaimana layout dari web tersebut secara otomatis menyesuaikan lebarnya terhadap layar browser.

Pada tutorial ini saya akan menggunakan layout untuk empat layar, yaitu 320px, 640px, 780px dan 980px.

Overview

Tutorial Web Responsif

Tampilan di iPhone dan iPad.

Dengan memanfaatkan CSS3, Anda dapat mengatur layar dengan ukuran berapapun. Manfaatkan min-width atau max-width untuk mengatur ukuran layar sesuai dengan yang diinginkan.

  • min-width — Ukuran lebar layar dari min-width sampai seterusnya
  • max-width — Ukuran lebar layar dari 0 sampai dengan max-width

Trik: Jika ingin membuat layout dari layar paling kecil, maka Anda bisa memanfaatkan min-width. Sebaliknya, jika ingin membuat layout dimulai dari layar terbesar (mis: desktop), maka gunakan max-width.

Kode HTML

Sekali lagi, saya tidak menjelaskan detil dari kode HTML berikut ini.

Terbaru

CSS & Media Query

Terdiri dari 2 file CSS, yaitu style.css dan media-query.css. File style digunakan untuk mengatur struktur utama dari layout, terdiri dari pengatur gambar responsif, padding, margin, warna dan tag-tag dasar untuk HTML.

File media-query digunakan untuk mengatur kesesuaian lebar layout, yaitu terdiri dari 320px, 640px, 780px dan 980px.

Banyaknya jumlah lebar layout tidak terbatas, Anda dapat menambahkannya sesuai dengan kebutuhan.

Berikut ini adalah file media-query.css

@media (min-width: 480px){
	.article-excerpt{
		display: block;
	}	
}
/*	min screen 640px */
@media (min-width: 640px){
	.article-excerpt{
		display: block;
	}
	.article-category{
		display: block;
	}
	.list-content{
		padding: 30px 0 30px 30px;
	}
	.cnt-container{
		width: auto;
		padding: 15px;
	}
	.list-content .item{
			margin-right: 30px;
			min-height: 320px;
			box-shadow: 1px 1px 2px 0 #d0d0d0;
			-webkit-box-shadow:1px 1px 2px 0 #d0d0d0;
			border-color: #e4e4e4 #bebebd #bebebd #e4e4e4;
			background-color: white;
			border:1px solid #ccc;
	}
	article{
		float: left;
		width: 50%;
		margin: 0 0 30px 0;
		padding: 0;
		-webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;
		-o-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		transition: all 500ms ease;
	}
}
/*	min screen 780px */
@media (min-width: 780px){
	article {
		width: 33.3333%;
		padding: 0;
	}
	.list-content article:nth-child(n) .item {
		margin-right: 30px;
	}
}
/*	min screen 980px */
@media (min-width: 980px){
	article {
		width: 25%;
		padding: 0;
	}
	.list-content article:nth-child(n) .item {
		margin-right: 30px;
	}
}

Kesimpulan

Secara default, web responsif dapat menyesuaikan ukuran layar, konten dan gambar sesuai dengan perangkat yang mengaksesnya. Saya juga memanfaatkan web responsif untuk membuat aplikasi mobile di Android.

Sekarang ini, membuat web responsif tidaklah rumit. Karena Anda dapat dengan mudah memanfaatkan CSS3, tanpa harus menggunakan pemrograman. Semoga bermanfaat.

Ditunggu pertanyaan dan masukannya di kolom komentar di bawah, terima kasih.

Download Lengkap: Tutorial Web Responsif