Mengenal Website Responsive
Istilah untuk desain web yang mengakomodasi berbagai lebar resolusi dan jenis media yang digunakan user. Umumnya kita mendesain website dalam fixed width (misalnya lebar 960px), sayang sekali desain web ini akan tampak kurang bagus pada lebar resolusi kurang dari 1024px (misalnya 800px atau kurang), karena ada beberapa bagian website yang terpotong dan tidak bisa menyesuaikan dengan layar. Dengan teknik responsive seorang desainer dapat berkreasi dalam layout dan memikirkan agar desain tetap tampil bagus dan tetap terkontrol pada media berbeda.
Ada beberapa teknik untuk mendesain webite kita agar menjadi Responsive contohnya menggunakan CSS3 yang mengakomodasi media query. Beberapa desainer melakukan eksperimen dengan CSS3 Media query untuk mendesain responsive web design. Kelebihan CSS3 media query adalah kemudahannya melakukan kontrol terhadap target media atau resolusi dengan satu file CSS.
Media queries
Ada 3 cara untuk pemanggilan media queries:
1. Menggunakan @import untuk mengimport aturan Style dari Style Sheet lainnya.
2. Pemanggilan Style Sheet secara langsung dalam koding HTML dan biasanya ini pendekatan paling umum yang paling banyak digunakan pengembang saat ini.
Dalam rancangan media queries
3. Pemanggilan melalui link untuk Style Sheet secara terpisah.
Dari ketiga memanggilan media queries diatas mana yang lebih baik? menurut saya pribadi, saya tentu memilih yang no.2, selain gak ribet biasanya koding dalam Style Sheet juga tidak terlalu banyak dan bisa dikatakan hanya beberapa baris saja.
Menggunakan meta tag viewport
Istilah untuk desain web yang mengakomodasi berbagai lebar resolusi dan jenis media yang digunakan user. Umumnya kita mendesain website dalam fixed width (misalnya lebar 960px), sayang sekali desain web ini akan tampak kurang bagus pada lebar resolusi kurang dari 1024px (misalnya 800px atau kurang), karena ada beberapa bagian website yang terpotong dan tidak bisa menyesuaikan dengan layar. Dengan teknik responsive seorang desainer dapat berkreasi dalam layout dan memikirkan agar desain tetap tampil bagus dan tetap terkontrol pada media berbeda.
Ada beberapa teknik untuk mendesain webite kita agar menjadi Responsive contohnya menggunakan CSS3 yang mengakomodasi media query. Beberapa desainer melakukan eksperimen dengan CSS3 Media query untuk mendesain responsive web design. Kelebihan CSS3 media query adalah kemudahannya melakukan kontrol terhadap target media atau resolusi dengan satu file CSS.
Media queries
Ada 3 cara untuk pemanggilan media queries:
1. Menggunakan @import untuk mengimport aturan Style dari Style Sheet lainnya.
@import url(style768min.css) screen and (min-width: 768px);
2. Pemanggilan Style Sheet secara langsung dalam koding HTML dan biasanya ini pendekatan paling umum yang paling banyak digunakan pengembang saat ini.
@media screen and (max-width:768px){
/* CSS styles */
}
@media screen and (max-width:320px){
/* CSS styles */
}
@media screen and (max-width:240px){
/* CSS styles */
}
Dalam rancangan media queries
max-width sebaiknya
penempatan kode akan lebih baik dari resolusi besar ke resolusi yang
lebih kecil atau kalian bisa juga menggunakan media queries min-width,
dengan catatan menggunakan queries ini urutannya dari resolusi kecil ke
resolusi yang lebih besar. Hal ini disarankan agar kalian lebih mudah
merancang queries berdasarkan urutan resolusi layar.@media screen and (min-width:240px){
/* CSS styles */
}
@media screen and (min-width:320px){
/* CSS styles */
}
@media screen and (min-width:768px){
/* CSS styles */
}
3. Pemanggilan melalui link untuk Style Sheet secara terpisah.
<link rel="stylesheet" type="text/css" media="screen
and (max-device-width: 768px)" href="style768.css" />
Dari ketiga memanggilan media queries diatas mana yang lebih baik? menurut saya pribadi, saya tentu memilih yang no.2, selain gak ribet biasanya koding dalam Style Sheet juga tidak terlalu banyak dan bisa dikatakan hanya beberapa baris saja.
Menggunakan meta tag viewport
<!DOCTYPE html> <HTML> <head> <meta charset='utf-8'/> <meta content='width=device-width, initial-scale=1,
maximum-scale=1' name='viewport'/> <style type='text/css'>
