Tips 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 akan lebih memperhatikan masalah ukuran gambar, rendering css dan lainnya.

Tap Target

Tap target adalah area dimana user men-tap, seperti link atau button. Disarankan ukuran tap cukup besar, 30-40 px, ukuran kurang lebih sama dengan ukuran ibu jari.

Bila ukuran tersebut tidak memungkinkan, minimal space antara tap target berkisar 20-30px, untuk mencegah user mentap didua area.

Relative Width

Usahakan untuk menggunakan relative width, contoh : max-width: 100%

Hal ini dapat mencegah element terpotong pada viewport kecil, atau tertarik (stretch) pada viewport besar.

Sharing is caring: