tugas 6 rekayasa web 0316

1412511667 SRI HARTATIK 1


* 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.


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.


* 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


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/

http://www.pikiran-rakyat.com/

http://www.headlondon.com/

http://www.trivago.co.id/

http://bitfoundry.ca/

http://ethanmarcotte.com/

http://css-tricks.com/


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/


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

tugas 6 rekayasa web 0316

Education