Layout Responsif

Layout

Pengantar

Tujuan membuat layar lebih responsif sangat penting. Alasannya, karena setiap device memiliki rasio layar serta ukuran piksel yang berbeda, sehingga kita web kita harus bisa menyesuaikan ukuran nya secara otomatis dengan device yang user gunakan. Layout yang tidak responsif terhadap setiap device dapat menyebabkan perubahan tata letak yang menjadi tidak seharusnya.

View Port

• Merupakan area yang dapat dilihat oleh pengguna pada halaman web
• viewport bervariasi antara device
• dan viewport Secara garis besar, tag tersebut akan mengatur layout lintas-perangkat untuk anda dengan sendirinya.

Grid View

• banyak halaman web dirancang berdasarkan tampilan grid.
• tampilan grid membagi halaman menjadi berbagai kolom
• grid-view responsif sering terdiri dari 12 kolom dari total 100%
• komponen utama yang dapat menampilkan dan menampung data dalam jumlah yang banyak dalam bentuk grid (baris dan kolom). Biasanya implementasinya adalah menampilkan katalog barang pada mobile commerce, gallery Image dsb.

SUMBER : https://www.slideshare.net/cdiqsanz/layout-listview-gridview-and-adapter

Media Query

Media query terdiri dari jenis media (media type) dan dapat, sesuai dengan spesifikasi CSS3, mengandung satu atau lebih ekspresi, diekspresikan sebagai fitur media, baik benar (true) atau salah (false). Hasil query adalah benar jika jenis media yang disebutkan dalam media query cocok dengan jenis alat yang digunakan untuk menampilkan dokumen dan semua ekspresi di dalam media query adalah benar.
SUMBER : https://developer.mozilla.org/id/docs/Web/Guide/CSS/Media_queries

Mobile First Design

Desain mobile-first mirip dengan merancang aplikasi seluler dan kemudian mengadaptasi tata letak yang dapat dilihat dengan rapi di perangkat tablet dan desktop tanpa terlalu banyak modifikasi. Seluruh desain dan tata letak Anda didasarkan pada penyediaan pengalaman pengguna seluler yang luar biasa: kecepatan unduh yang cepat, konten media yang kaya untuk membuat audiens target Anda tetap tertarik, navigasi layar sentuh yang mudah, dan sebagainya.

Tahapan membuat layout responsif

1. Definisikan meta yang digunakan
   
2. Ketikan Kode berikut pada tag style di bagian head (untuk tampilan dekstop)
   
3. Ketikan juga untuk tampilan Tablet
   
4. Selanjutnya untuk mobile phone
   
5. Jangan lupa menggunakan box sizing untuk setiap tag agar kamu bisa mengetahui tata letaknya (jika sudah benar kalian bisa menghapus box-sizing)
   
6. Pada Tag body ketikan kode seperti berikut
   
7. Hasil
   

Perlu diingat property float adalah hal yang sangat penting dalam layout responsif. Cobalah dengan tanpa menggunakan float pada koding yang sudah dibuat tadi.

Contoh untuk Layout Responsif:

See the Pen Contoh Layout responsif by David Steven (@davidst19) on CodePen.

Gambar Responsif

Membuat Gambar Responsif Denagan elemen img

Gambar Latar Belakang

Untuk Contoh lanjutan Layout Responsif bisa di download di sini