Responsive Web

Start small Start small, mendesain dari viewport terkecil, lalu ke ukuran menengah, terakhir ke ukuran besar. Pendekatan ini dapat menghindari konten penting yang terbuang. Bila kita desain dari viewport besar, lalu turun ke kecil, ada kemungkinan kita membuang konten penting. Selain itu, secara performance akan lebih baik, karena saat mendesain untuk viewport kecil (ponsel), kita … Read more

Strategi ketiga, yang paling mudah adalah membuat table dapat discroll secara horizontal. Caranya cukup mudah, dengan menyimpan table didalam element div yang dapat discroll. Tidak perlu menggunakan media query, cukup mendefinisikan width dan overflow-x dari div saja. Ingin mencoba live? Silakan click di scrolling-table@codepen.io

Strategi kedua adalah dengan mengubah column table menjadi row. Jadi tidak ada lagi table. Keunggulannya pada viewport kecil, semua isi table bisa dilihat. Namun perlu perhatian lebih dari visitor saat melihat isi table (karena semua kolom dari table telah diconvert menjadi row). Perhatikan format table, pada td digunakan atribut data-th untuk header dari table yang … Read more

Pendekatan responsive pada table ada beberapa strategi. Yang pertama adalah dengan menyembunyikan column table yang dianggap kurang penting. Kelemahannya, pada viewport kecil, tidak ada cara untuk melihat isi column tersebut. Tricknya cukup sederhana, definisikan class dari element td yang akan disembunyikan, lalu ubah display menjadi none pada viewport kecil. Ingin coba live? Silakan click di … Read more