Membuat dasar Desain web Responsive - Siapa sih diantara kalian yang ga tau Website ? Pasti kalian tau dong apa itu Website.
Di postingan kali ini mimin ga bahas Tentang Website , melainkan Cara membuatnya dengan Desain yang Responsive. Membuat Website yang Responsive itu susah-susah gampang looh sobat, akan lebih mudah jika kita mengetahui apa hal utama yang harus di perhatikan ketika ingin membuat Website Resonsive.
Desain responsive merupakan sebuah teknik desain yang membuat website bisa tampil dengan baik jika dibuka di berbagai browser dengan ukuran layar yang berbeda-beda.
Simak dengan baik ya sobat
Step 1. Mendefinisikan Meta tag untuk desain Responsive
Mobile browser biasanya akan mengatur skala halaman html sesuai lebar Viewport, yang akhirnya website dapat tampil pada layar Mobile. Kalian bisa menggunakan Meta tag Viewport untuk me-reset ulang. Tag Viewport sendiri digunakan untuk memberitahukan kepada browser untuk menggunakan lebar pada sebuah perangkat sebagai acuan lebar viewport serta menonaktifkan skala awal. Kalian bisa menyertakan meta tag berikut ini dibagian <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dan biasanya pada browser Internet Explorer versi 8 atau lebih rendah , biasanya tidak bisa support seperti tag diatas. Kalian bisa menggunakan meta tag yang berbeda seperti dibawah ini
<!--[if lt IE 9]>Step 2. Menentukan Struktur HTML
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Pada step kedua ini yaitu Menentukan Struktur HTML website, website yang biasanya terdiri dari Header,Content,Sidebar, dan Footer. Untuk bagian Header biasanya dibuat lebar-nya Full dan tinggi dan disesuaikan dengan kebutuhan.
Sedangkan content bisa ditentukan misalnya labar 660px dan sidebar 300px, sehingga lebar keseluruhan adalah 960px.
Step 3. Media Query
Pada langkah yang terakhir ini adalah langkah yang akan membuat website kalian bisa Responsive. Kemampuan CSS3 disini sudah sangat canggih, seolah-olah kita bisa menggunakan kondisi (IF) layaknya Pemrograman PHP dan Javascript. Namun di CSS3 ini hanya memberikan kondisi bagaimana browser harus melakukan Rendering halaman untuk viewport yang terlah di atur lebarnya dengan CSS3 seperti dibawah ini.
CSS dibawah ini akan menyuruh browser, ketika lebar layar berukuran 960px atau kurang, maka jalankan script, atur lebar sesuai script.
Disini lebar wrapper diatur menjadi 96% dari lebar layarnya. Sedangkan Content diatur agar lebarnya 65% dari lebar laya, dan di bagian sidebar lebarnya diatur menjadi 30%
/* Jika layar berukuran 980px atau kurang */
@media screen and (max-width:980px) {
#wrapper{
width: 96%;
}
#maincontent{
width: 65%;
}
#sidebar{
width: 30%;
}
}
Namun jika ukuran layar hanya 680px atau kurang, maka jalankan script lain, seperti dibawah ini. Dimana lebar diatur menjadi auto (otomatis) mengikuti lebar layar, begitu juga dengan sidebarnya, dibuat auto juga agar lebarnya mengikuti lebar layar, sedangkan float-nya di atur none agar div elementnya tersusun kebawah/* Jika ukuran layar 680px atau kurang dari itu */
@media screen and (max-width:680px){
#maincontent{
width: auto;
float: none;
}
#sidebar{
width: auto;
float: none;
}
}
Jika layar berukuran 480px atau kurang, maka kalian bisa sembunyikan bagian sidebar dan atur agar tinggi header menjadi auto. Semua kondisi bisa kalian tentukan sendiri bedasarkan kebutuhan./* Jika ukuran layar 480px atau kurang */
@media screen and (max-width: 480px) {
#header{
height: auto;
}
#sidebar{
display: none;
}
}
Itulah tahap penting untuk bisa membuat website menjadi responsive,jadi yang perlu diperhatikan adalah bagi meta tag dan media query di css agar website bisa tampil proporsional.Semoga artikel singkat ini bisa membantu kalian dalam memahami serta mempraktikan langkah dasar pembuatan Web Responsive.
Apabila ada hal-hal yang ingin ditanyakan, silahkan hubungi saya di :
- Facebook : Iqbal Fasri
- Twitter : @iqbalfasri48
- E-Mail : iqbalfasr48@gmail.com
0 komentar