Tutorial responsive web design part 1 : CSS3 Media Inquries

Design   responsive website bcscoder 03 Sep 2014 at 1:01 pm

---

Semua designer dan developer berbicara tentang responsive web design sekarang, tapi apa sih sebenernya itu? Simplenya responsive web design bukan tentang membuat website untuk perangkat mobile, tapi membuat sebuah design yang menyesuaikan dengan ukuran layout device yang digunakan. Salah satu caranya adalah dengan menggunakan CSS3 media queries, dimana si media queries ini nanti yang bertugas mengatur layout website yang kamu buat.

Step 1: Intro

Oke, sebelum lanjut ke tutorial ada beberapa hal yang akan kita siapkan dulu ya:

1. Knowledge : basic HTML & CSS (wajib)
2. Text Editor: Bebas (Sublime recomended) 
3. Waktu dan niat

Kalau sudah siap dengan bahan-bahan diatas, kita lanjut ke step selanjutnya yaitu project structure. Tidak ada patokan khusus mengenai web structure, tapi biasakan untuk membuat web structure yang mudah untuk dimengerti oleh kamu ataupun orang lain nantinya. Dibawah ini adalah project structure yang akan kita gunakan:

/
 index.html
 assets
    - css   //folder dimana semua file css kita berada
	- style.css
	- resposive.css
    - js      //folder dimana semua file javascript kita berada
 images    //folder untuk gambar-gambar yang dibutuhkan

Step 2: Planing

Karena kita mau pakai media queries maka kita perlu tahu dong gimana cara pakainya di css nanti. Dibawah ini ada beberapa media queries yang umumnya dipakai berdasarkan ukuran layout device yang dipakai:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}

Selain itu kita juga bisa pakai media queries yang dipakai oleh salah satu css framework bootstrap seperti dibawah ini:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Jadi maksud dari code-code diatas adalah style-style css kamu nanti akan menyesuaikan dengan ukuran device yang dipakai sesuai dengan media inquiriesnya. Untuk info mengenai media inquiries kamu bisa check di link ini.

Step 3: Lets Code

Anggap saja kalian sudah paham dengan pemakaian media inquiries, maka selanjutnya adalah kita langsung coba saja praktekan. Masih ingat dengan project structure sebelumnya? sekarang kita akan buat sebuah file index.html dan style.css.

index.html

Di file ini kita akan punya sebuah div #container yang membungkus 'header', 'content', 'sidebar', dan footer.

<!DOCTYPE html>
<html>
<head>
	<title>Web Responsive</title>
	<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
	<div id="pagewrap">
		<header id="header">
			<hgroup>
				<h1 id="site-logo" class="text-center">Demo</h1>
				<h2 id="site-description" class="text-center">Site Description</h2>
			</hgroup>
		</header>
		
		<div id="content">
			<article class="post">
				<h2>blog post</h2>
			</article>
		</div>
		<div id="sidebar">
			<section class="widget">
				<h2>Sidebar</h2>
			</section>
		</div>
		<footer id="footer">
			<h2 class="text-center">footer</h2>
		</footer>
		
	</div>
</body>
</html>

style.css

file ini berisi style general yang akan di pakai di halaman website kita. Saya ga akan terlalu detail menjelaskannya, kalian bisa lihat default width untuk #pagewrap adalah 980px dengan #content width 600px dan #sidebar 280px.

body{
	font-family: verdana;
}
#pagewrap {
	width: 980px;
	margin: 0 auto;
}
#header {
	height: 160px;
	background: #bbeeff;
	margin: 10px 0;
}
#content {
	width: 600px;
	min-height: 300px;
	float: left;
	background: #88dddd;
	margin: 10px 0;
}
#sidebar {
	width: 280px;
	min-height: 300px;
	float: right;
	background: #44bbcc;
	margin: 10px 0;
}
#footer {
	clear: both;
	min-height: 100px;
	background: #225533;
}
.text-center{
	text-align: center; 
}

Kalian akan punya tampilan website seperti dibawah ini, ingat kita belum masuk ke bagian responsivenya, jadi jika kalian mengganti ukuran browser maka tampilan websitenya akan tetap dengan width sebesar 980px.

Sekarang kita buat sebuah file css lagi dengan nama resposive.css yang berisi media inquiries yang kita butuhkan tadi dan tambahkan di index.html.

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

responsive.css

kita akan coba untuk merubah design kita untuk tablet atau ukuran device yang lebih kecil.

Jadi untuk Viewport/ ukuran device yg lebih kecil dari 992px (berdasarkan view port dari twitter bootsrap) maka rules cssnya  akan menjadi:

• pagewrap = reset width ke 95%
• content = reset width ke 60%
• sidebar = reset width ke 30%

TIPS: kita pakai percentage (%) untuk ukuran width ssehingga membuat  containers nya menjadi fluid.

/* Small devices (tablets, smartphone) */
@media screen and (max-width: 992px) {
	#pagewrap {
		width: 95%;
	}
	#content {
		width: 60%;
		padding: 3% 4%;
	}
	#sidebar {
		width: 30%;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}
}

Nah kalau sudah sekarang coba buka lagi website yang kita buat tadi dan coba untuk merubah ukuran browser menjadi lebih kecil. Jika berhasil kalian akan mendapatkan tampilan yang fluid mengikuti ukuran device seperti dibawah.

Bagaimana jika kita ingin pada saat website kita diakses dari smartphone/small device tampilan untuk content menjadi full dan sidebar menjadi berada di bawah content?

Kita kembali lagi ke file reponsive.css dan membuat media inquiries baru untuk rules yang kita inginkan. Jadi rulesnya adalah jika max-width:768px 

•  #content width => 92%
• #sidebar => 100%

/* extra Small devices */
@media screen and (max-width: 768px) {
	#pagewrap {
		width: 95%;
	}
	#content {
		width: 92%;
		padding: 3% 4%;
		float: none;
	}
	#sidebar {
		width: 100%;
		float: none;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}
}

Silakan kalian coba reload ulang halaman wesite tadi dan coba resize browser kalian maka saat viewport berukuran lebih kecil dari 768px maka secara otomatis sidebar akan turun ke bawah content dan ukurannnya menjadi 100%.

Step 4: Conclusion

Jadi kesimpulannya apa? Pada part 1 ini kita baru berkenalan dengan CSS3 Media Inquiries yang bisa kita gunakan untuk membedakan style css yang kita pakai berdasarkan ukuran viewport dari device yg mengakses website kita. Dan yang terakhir tentu saja terus mencoba dan bereksperimen dengan bermacam-macam viewport/ukuran device sehingga kalian menjadi lebih mahir lagi. 

Ada ide untuk part 2 tentang responsive design? silakan tinggalkan komen dan keep ngide!!

---

Share via: