Pengertian Web Responsive

Assalamualaikum Wr. Wb.

Semangat pagi, kali ini share tentang web responsive. Apa sih web responsive itu?.

Pengertian:

Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya.

Latar Belakang:

Sekarang banyak orang melakukan aktivitas online melalui device SmartPhone, seperti update status, upload gambar, dan tidak terkecuali mengakses sebuah website. Dengan keadaan yang seperti ini, mau tidak mau kita sebagai pemilik website harus memiliki website yang bisa diakses melalui device SmartPhone tersebut. Bagi yang menggunakan CMS seperti WordPress mungkin sudah tersedia pluginnya.

Alat dan Bahan:

Komputer / Laptop.
Sublime Text.

Maksud dan Tujuan:

Agar bisa membuat tampilan blog atau website kita sempurna dalam segala tampilan bila di akses melalui berbagi macam perangkat.

Langkah - langkah Desain Web Responsive:

kita buat dahulu kerangkanya dengan html, berbentuk seperti ini:

2. Selanjutnya membuat CSS:

*{ margin:0;padding:0; }
body{font-size:12px;font-family:verdana;}
#wrapper { 
 margin:auto; background: #fff; padding: 10px 0;width:1000px;
}
#header{
 width:100%;background:#EEE;
}
#content{
 float:left;background:#FFF;padding:10px;height:300px;width:600px;
}
#rightside{
 float:left;background:#ccc;padding:10px;height:300px;width:360px
}
#footer{
 clear:both;
 width:980px;
 background:#5F6354;
 color:#FFF;
 padding:10px
}

3. setelah membuat css, kita membuat resolusinya. Yang membuat web dapat beresolusi di tablet ataupun android. Berikut kodenya menggunakan @medi screen:

@media screen and (max-width: 768px)  {
 #rightside { width: 98%;border-top:1px solid #2D2E2C; float:none; }
 #content { width:98%; float:none; }
 #wrapper{ width:98%; }
 #footer{ width:98%; }
}
img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* ie8 */
}