Perkembangan tekhnologi saat ini membuat desain web yang
responsif menjadi suatu tekhnik desain web yang harus mulai anda lakukan saat
ini. Tentunya website anda ingin tampil dan terbaca baik di berbagai device
dengan ukuran layar yang berbeda-beda seperti notebook,tab , smart phone dan
device lainnya.
Responsive Design merupkan suatu teknik dengan baik
diberbagai browser dengan ukuran layar yang berbeda, jika anda baru mendengar
kata desain responsif, berikut ini merupakan beberapa contoh websit yang
menerapakannya : Head London, Food Sense, Bitfoundry, Ethan Marcotter, CSS
Tricks
Untuk Pemula, desain responsif mungkin terdengar agak rumit,
tetapi sebenarnya sangat sederhana. Untuk membantu anda dengan cepat memulai
desain responsif, disini saya akan menjelaskan tentang logika dasar desain
responsif dengan 3 langkah desain, tentunya dengan asumsi bahwa anda memiliki
pengetahuan dasar CSS yang baik.
Langkah 1. Mendefinisikan Meta Tag Desain Responsif
Kebanyakan
mobile browser mengatur skala halaman html selebar viewport, sehingga dapat
tampil pas dilayar mobile. Anda dapat menggunakan tag meta viewport untuk
me-reset ini. Tag view port digunakan untuk memberitahu browser untuk
menggunakan lebar perangkat sebagai lebar viewport dan menoaktifkan skala awal.
Sertakan meta tag ini dibagian <head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script
src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js
“></script>
<![endif]-->
Langkah 2. Menentukan Struktur HTML.
Pada langkah ke-2 ini saya membuat struktur html dengan header, content, sidebar dan footer. Untuk header saya meberikan tinggi 200pixel, untuk content saya memberikan lebar 660 pixer dan untuk sidebar saya memberika lebar 300pixer sehingga lebar keseluruhan adalah 960pixel.
CSS3 adalah trik untuk membuat desain
web yang responsif. Dalam CSS3 untuk membuat trik ini sama halnya seperti di
dalam pemrograman dengan membuat suatu kondisi (if), dimana CSS3 memberikan
kondisi bagaimana browser harus merender halaman untuk viewport yang telah di
set lebarnya.
Contoh trik CSS3 dibawah adalah untuk lebar viewport khusus
berukuran 980 pixel atau dibawahnya. Pada dasarnya untuk trik ini kita membuat
semua lebar container html seperti header, content dan yang lainnya kedalam
nilai prosentase, sehingga halaman html flexible mengikuti layar browser.
/* Jika berukuran 980px atau kurang*/
@media screen and (max-width:980px) {
#pagewarp {
width:96%
}
#content{
width:66%
}
#sidebar{
width:30%
}
}
@media screen and (max-width:980px) {
#pagewarp {
width:96%
}
#content{
width:66%
}
#sidebar{
width:30%
}
}
Untuk viewport berukuran 700 pixel atau kurang, tentukan ukuran content dan sidebar keukuran auto width dan disable float sehingga akan tampil sejajar kebawah menikuti lebar layar.
/* Jika berukuran 700px atau kurang*/
@media screen and (max-width:700px) {
#content{
width:auto;
float:none;
}
#sidebar{
width:auto;
float:none;
}
}
@media screen and (max-width:700px) {
#content{
width:auto;
float:none;
}
#sidebar{
width:auto;
float:none;
}
}
Untuk viewport berukuran 480 pixel atau kurang seperti ukuran-ukuran perangkat handphone, sembunyikan sidebar dan set ukuran tinggi header menjadi auto.
/* Jika berukuran 400px atau kurang*/
@media screen and (max-width:700px) {
#header{
height:auto;
}
#sidebar{
display:none;
}
}
@media screen and (max-width:700px) {
#header{
height:auto;
}
#sidebar{
display:none;
}
}
Contoh diatas hanyalah dasar dari responsive desain yang bertujuan untuk memberikan tampilan yang berbeda untuk setiap ukuran viewport, anda bisa saja menambahkan query seperlunya sesuka anda pada desain responsive anda.
Selamat berkreasi Semoga Bermanfaat,
Sumber
http://w3function.com/blog/index.php?p=det&idn=69
