Penerapan sederhana dari Responsive Web Design

Template MMBB 3 kolom Design by ox69xo · mmbbproject.github.io

Penerapan sederhana dari Responsive Web Design

Unknown March 13, 2013 slicing tutor sederhana

responsive web design - blog.tempatbeta.com ox69xo

Pernah dengar Responsive Web Design? jika belum, penjabaran sederhananya begini. Responsive Web yaitu sebuah Website yang bisa fleksibel dalam segala ukuran lebar dan atau alat(iPhone, Tablet, dll) *CMIW. Untuk lebar sendiri, secara umum terdiri dari: 240px, 320px, 480px, 768px dan 1024px. Nah, dari ukuran tersebutlah kita bisa mengatur agar tampilan Web selalu 'sedap' di pandang.
Perlu di ingat, Responsive Web adalah tidak sama dengan Mobile Web. Karena pada content Responsive Web berupa gambar, page dan css-nya sendiri ukurannya tidak di kecilkan.
Adapun biasanya cuma di hidden(diplay:none). Untuk gambar, biasanya hanya mengecilkan tampilan gambar setelah gambar utama(besar/asli) di muat. Beda dengan Mobile Web, pada Web yang di buat khusus untuk versi Mobile, biasanya konten seperti gambar sudah di buat ukuran yang lebih kecil(bukan tampilan yang di kecilkan).

Penerapan sederhana dari Responsive Web yaitu di mulai dengan memberita meta tag(<meta name="viewport" content="width=device-width, initial-scale=1.0"/>).
Lalu sedikit modifikasi width, margin, padding dan element-element lainnya. Modifikasi yang dimaksud disini yaitu mengubah satuan pixel(px) ke prosentase(%).

Perhitungan konversi px ke % yaitu: (x / y * 100). x yaitu lebar kotak kecil (220px), y yaitu lebar kotak (800px). Jadi kalau kita punya kode css awal seperti ini:

.kotakbesar{
  width:800px;
}
.kotakkecil{
  width:220px;
}

Width bisa di ubah menjadi,

.kotakbesar{
  width:78.125%; /* hasil dari: 800 / 1024 * 100 */
}
.kotakkecil{
  width:27.5%; /* hasil dari: 220 / 800 * 100 */
}

Angka 1024 itu di ambil dari lebar layar secara umum. Jadi misal layar monitor itu 320px, maka 78.125% dari 320px itu adalah 250px. Jika halaman web di akses dengan alat/device layarnya berukuran lebar 320px maka halaman web akan mengikuti ukuran tersebut. fleksibel bukan? Jadi tidak lagi scroll kekanan segala macam :D.

Ini ada perbandingan antara style nonresponsive dan responsive
nonresponsive.html

<html>
<head>
<title>Non-Responsive Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style>
.kotakbesar {width:800px;margin:auto;}
.kotakkecil {width:220px;}
.kotakbesar,.kotakkecil{clear:both;border:1px solid #d7d7d7;border-radius:8px;min-height:400px;margin:20px;}

</style>

</head>
<body>

<div class="kotakbesar"><div class="kotakkecil"></div></div>
</body>
</html>

tampilan dari nonresponsive.html

Lihat, masih ada scroll ke kanan, ini membuktikan bahwa lebar dari halaman web tersebut tidak fleksibel.
responsive.html

<html>
<head>
<title>Responsive Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style>
.kotakbesar {width:800px;width:78.125%;margin:auto;}
.kotakkecil {width:220px;width:27.5%;}
.kotakbesar,.kotakkecil{clear:both;border:1px solid #d7d7d7;border-radius:8px;min-height:400px;margin:20px;}
</style>

</head>

<body>
<div class="kotakbesar"><div class="kotakkecil"></div></div>
</body>
</html>

tampilan dari responsive.html

Nah, yang ini baru di sebut fleksibel. Ukuran kotak besar dan kotak kecil mengikuti ukuran lebar browser.
Pembahasan prosentase ox rasa cukup, sekarang kita bahas tentang menyembunyikan element pada kondisi tertentu.

Dikondisikan ada 2 kotak di dalam kotak besar, nama class tambahannya adalah (.kotakdua). Nah, jika halaman web di akses menggunakan resolusi kurang dari 320px, maka .kotakdua tersebut di hidden dan lebar .kotakkecil di perbesar. Dari sini bisa di katakan css3 sudah menggunakan logika pemrograman seperti halnya javascript! Pasti css4 nanti lebih extrim :D

di akses oleh lebar lebih dari 320px

di akses oleh lebar kurang dari 320px

Nah, dari kedua gambar di atas terlihat jelas logika dari "menyembunyikan element pada lebar kurang dari 320px". Indah bukan? :D.

Cukup menambahkan kode berikut:

@media(max-width:320px){
 /* kondisi yang di kehendaki, misal display:none dll */
}

Lengkapnya silahkan download file responsive-hide.html atau lihat kode di bawah:

<html>
<head>
<title>Responsive Design - Hidden</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.kotakbesar {width:800px;width:78.125%;margin:auto;}
.kotakkecil {width:220px;width:27.5%;}

.kotakbesar,.kotakkecil, .kotakdua{clear:both;border:1px solid #d7d7d7;border-radius:8px;min-height:400px;margin:20px;}
.kotakkecil,.kotakdua{float:left;position:absolute;min-height:350px;}
.kotakdua {width:20%;float:right;position:relative;}

@media(max-width:330px){
  .kotakdua{display:none;}
  .kotakkecil{width:60.5%;float:none;}
}
</style>

</head>

<body>
<div class="kotakbesar"><div class="kotakdua"></div><div class="kotakkecil"></div></div>
</body>
</html>

Sip! sederhananya begitu, happy ngoding! ^^