20 Indikator ini berfokus pada kemampuan mobile device yang terbatas,
tidak seperti dekstop PC maupun laptop. Faktor-faktor seperti ukuran layar yang lebih kecil, fokus pada content dan tugas-tugas penting,
optimalisasi performa, bisa menjadi acuan untuk membuat responsive web design yang lebih baik.
2. Design for Progressive Enhancement
Merupakan sebuah pendekatan pada pengembangan web yang bertujuan untuk memberikan pengalaman terbaik kepada khalayak
seluas mungkin.
3. Optimize Content Rather Than Support
Fokus dari indikator ini adalah untuk mengutamakan konten dari pada elemen-elemen lain yang mendukung dan pelengkap halaman web.
Terdapat tiga elemen utama dalam teknologi responsive web design yaitu:
1. Tata letak Fleksibel Berbasis Grid
2. Gambar dan media fleksibel
3. Media queries
2.6.1 Tata Letak Fleksibel Berbasis Grid
Tata letak berbasis grid merupakan salah satu pilar penting dalam designresponsive. Tata letak responsive adalah menggunakan CSS untuk posisi
dan untuk meletakkan margin dan spasi untuk menerapkan berbagai jenis tata letak web dengan cara baru.Tata letak dan ukuran teks biasanya dinyatakan dalam
pixel, tata letak berbasis presentase dan ukuran berbasis “em” . Dengan mendasarkan ukuran pada teks, lebar, dan margin presentase atau
“em” dengan unit pengukuran berdasarkan ukuran titik font, ukuran yang dirubah adalah ukuran tetap menjadi ukuran relatif untuk mencapai grid yang fleksibel dan
sistem ukuran teks, dengan rumus perhitungan “em”
Universitas Sumatera Utara
21 Marcotte, 2011, 20
2.6.2 Gambar dan Media Fleksibel
Menurut Ethan Marcotte dalam bukunya responsivewebdesign salah satu masalah terbesar yang dapat dijawab oleh responsivewebdesign adalah
penggunaan gambar dalam website. Ada beberapa teknik yang dapat digunakan dalam mengatur ukuran gambar secara proporsional. Salah satu yang paling
populer yang ditulis Ethan Marcotte dalam artikelnya tentang fluid image adalah penggunaan “max-width” dalam CSS,teknik ini pertama kali diuji coba oleh
Richard Rutter. Saat aturan tentang ukuran gambar ini belum ada, pada umumnya setiap
gambar akan memuat dalam ukuran aslinya, kecuali area tampilan menjadi lebih sempit dari lebar asli gambar itu. Lebar maksimum gambar diatur ke 100 dari
lebar layar atau browser, sehingga ketika 100 menjadi lebih sempit maka ukuran gambar tidak akan berubah. Gagasan dibalik fluid image adalah bahwa
dalam memberikan gambar pada ukuran maksimum yang akan digunakan, browser mengubah ukuran gambar yang diperlukan saat menggunakan CSS untuk
membimbing ukuran size secara efektif Knight, 2012, 13.
2.6.3 Media Queries
Media query adalah mekanisme untuk mengindentifikasi jenis media, karakteristik fisik perangkat, dan browser yang digunakan Marcotte, 2011, 74.
Target + Konteks = Hasil
Universitas Sumatera Utara
22 Perangkat yang sudah mendukung CSS3 akan mendukung fitur media query
dalam mendeteksi target ukuran perangkat. Fitur baru pada CSS3 juga mencakup orientasi Potrait dan Landscape,
dengan mendeteksi ukuran resolusi layar sehingga dapat membuat beberapa style sheet serta perubahan tata letak dasar di definisikan sesuai dengan rentang lebar
bahkan untuk orientasi landscape dan potrait.
2.7 Situs Web Perpustakaan
