Upload
sapatati
View
178
Download
1
Embed Size (px)
Citation preview
1412511667 SRI HARTATIK 1
1412511667 SRI HARTATIK 2
* Pengertian Responsive Web Design *Responsive Web Design atau yang sering disebut juga dengan Desain Web Responsive merupakan suatu tehnik desain yang membuat website dapat tampil dengan baik di berbagai browser dengan ukuran layar ( ukuran pixel ) yang berbeda beda.
Istilah Responsive Web Design dicetuskan oleh Ethan Marcotte dalam sebuah artikelnya di ListApart.
1412511667 SRI HARTATIK 3
Dalam artikel tersebut Ethan Marcotte mengulas 3 tehnik yang telah ada yaitu :-Flexible Grid Layout-Flexible Images-Media and Media Queries
Ketiga tehnik tersebut di masukan ke dalam satu pendekatan dan dinamakan dengan Responsive Design.
1412511667 SRI HARTATIK 4
* 3 Langkah dasar Pembuatan RWD *
Biasanya Tag Viewport digunakan untuk memberitahu browser untuk menggunakan lebar perangkat sebagai viewport dan menonaktifkan skala awal. Meta Tag ini di bagian <head><meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
o Mendefinisikan Meta Tag Desain Responsif
Biasanya struktur umum adalah menentukan header, content, sidebar dan footer.
o Menentukan Struktur HTML
o Membuat Media Query
1412511667 SRI HARTATIK 5
Contoh Website yang berkarakter Responsive Web Design
o Pikiran Rakyat : http://www.pikiran-rakyat.com/ o Trivago : http://www.trivago.co.ido Bitfoundry : http://bitfoundry.ca/o Ethan Marcotte : http://ethanmarcotte.com/o CSS Tricks : http://css-tricks.com/
1412511667 SRI HARTATIK 6
1412511667 SRI HARTATIK 7
Situs yang dapat memeriksa Sebuah Web Responsive atau tidak
oHalgatewood Responsif http://halgatewood.com/responsive/oMatt Kersleyhttp://mattkersley.com/responsive/oScreenQueries http://screenqueri.es/oResponsive.is http://responsive.is/oStudioPress http://www.studiopress.com/responsive/oiPad Peek http://ipadpeek.com/oUji responsif http://responsivetest.net/
1412511667 SRI HARTATIK 8
Bootstrap Foundation Waktu Pembuatan yang lebih cepat
Grid Sistem yang Baik
Template pada Bootstrap lebih rapi dan ringan
Template pada Foundation lebih berat
Dokumentasi lengkap ( Lebih dikenal)
Dokumentasi Terbatas ( tidak terlalu dikenal )
Minim Fasilitas Gambar Terdapat fungsi class untuk memaksimalkan penggunaan Gambar
Komponen dan Fitur terbatas Komponen Dan Fitur lebih banyak
Responsive dan Not Responsive dapat dipilih sesuai keinginan