Dokumen tersebut membahas tentang responsive web design, yaitu teknik desain yang membuat website dapat tampil dengan baik di berbagai perangkat dengan ukuran layar yang berbeda-beda. Ia menjelaskan 3 langkah dasar pembuatan responsive web design yakni mendefinisikan viewport, menentukan struktur HTML, dan membuat media query. Diberikan pula contoh website yang bersifat responsive dan situs untuk menguji responsivitas sebuah website.
2. 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.
3. 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.
4. 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
5. 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.id
o Bitfoundry : http://bitfoundry.ca/
o Ethan Marcotte : http://ethanmarcotte.com/
o CSS Tricks : http://css-tricks.com/
7. 1412511667 SRI HARTATIK 7
Situs yang dapat memeriksa Sebuah Web
Responsive atau tidak
oHalgatewood Responsif http://halgatewood.com/responsive/
oMatt Kersley http://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/
8. 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