Home3 Langkah Membuat Desain Web Responsif (Responsive Design)
Senin, 22 September 2014
0
komentar
3 Langkah Membuat Desain Web Responsif (Responsive Design)
Perkembangan tekhnologi saat ini membuat desain web yang responsif menjadi suatu teknik 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 merupakan suatu teknik desain yang membuat website dapat tampil dengan baik di berbagai browser dengan ukuran layar yang berbeda, jika Anda baru mendengar kata desain responsif, berikut ini merupakan beberapa contoh website yang menerapkannya : Head London, Food Sense, Bitfoundry, Ethan Marcotte, 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. 
Jangan Lupa Jempolnya Sob, Makasih Sebelumnya
Perkembangan tekhnologi saat ini membuat desain web yang responsif menjadi suatu teknik 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 merupakan suatu teknik desain yang membuat website dapat tampil dengan baik di berbagai browser dengan ukuran layar yang berbeda, jika Anda baru mendengar kata desain responsif, berikut ini merupakan beberapa contoh website yang menerapkannya : Head London, Food Sense, Bitfoundry, Ethan Marcotte, 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 di layar mobile. Anda dapat menggunakan tag meta viewport untuk me-reset ini. Tag viewport digunakan untuk memberitahu browser untuk menggunakan lebar perangkat sebagai lebar viewport dan menonaktifkan skala awal. Sertakan meta tag ini di bagian<head>. <meta name="viewport" content="width=device-width, initial-scale=1.0">MS Internet explorer versi 8 dan yang lebih rendah tidak support tag di atas, anda bisa menggunakan bantuan media-queries.js atau respond.js di IE dengan tag sebagai berikut:
<!--[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 memberikan tinggi 200 pixel, untuk content saya memberikan lebar 660 pixel dan untuk sidebar saya memberikan lebar 300 pixel sehingga lebar keseluruhan adalah 960 pixel. Langkah 3. Membuat Media Query
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%; } } 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; } } Untuk viewport berukuran 480 pixel atau kurang seperti ukuran-ukuran perangkat handphone, sembunyikan sidebar dan set ukuran tinggi header menjadi auto /* Jika berukuran 480px atau kurang*/ @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. Sumber :Â http://w3function.com/blog/index.php?p=det&idn=69
Jangan Lupa Jempolnya Sob, Makasih Sebelumnya
Anda baru saja membaca artikel yang berkategori dengan judul 3 Langkah Membuat Desain Web Responsif (Responsive Design). Anda bisa bookmark halaman ini dengan URL http://duniabaca22.blogspot.com/2014/09/3-langkah-membuat-desain-web-responsif.html. Terima kasih!
Categories:
