Responsive Web

Off canvas adalah strategi menyembunyikan less important element pada viewport kecil. Contoh menyembunyikan navigasi/menu dalam hamburger icon. Jika viewport cukup besar, baru menu ditampilkan. Pada viewport kecil, gambar sebelah kiri, menu disembunyikan. Pada gambar sebelah kanan, menu ditampilkan setelah OPEN MENU diclick. Pada viewport besar, menu ditampilkan, dan element OPEN MENU disembunyikan.

Sama seperti column drop, pada viewport kecil, element akan disusun kebawah. Bila ada ruang pada viewport, maka beberapa elemen akan disusun dalam 1 row. Perbedaannya, pada layout shifter adalah, berpindahnya urutan element. Perhatikan elemen biru dan kuning. Pada viewport kecil, elemen biru ada pada urutan pertama, dan kuning pada urutan ke-4. Pada viewport besar, urutan … Read more

Pendahuluan Ada beberapa strategi umum yang digunakan, yaitu: Column drop, layout shifter dan off canvas. Pada prakteknya umum untuk menerapkan beberapa strategi, misalnya column drop dan off canvas. Idenya adalah, pada viewport kecil, semua elemen akan dibuat menumpuk kebawah menjadi 1 column. Sementara, jika ada ruang pada viewport, maka elemen akan disusun sesuai kebutuhan desain. … Read more

Pendekatan responsive yang popular adalah grid system. Sudah banyak css framework yang bisa digunakan agar website menjadi responsive. Contoh: Bootstrap, Materialize dan lainnya. Pada saat tutorial ini dibuat, framework tersebut contoh Bootstrap 3, masih menggunakan sistem grid, sementara Bootstrap 4 sudah mensupport flexbox. TIPS Jika website yang akan dibangun cukup kompleks dan waktu development sangat … Read more