Prinsip Dasar Web Responsive

Responsive web design adalah solusi yang paling baik untuk mengatasi permasalahan halaman web yang tidak bisa dibuka di berbagai jenis layar.Dalam responsive web tidak ada ukuran halaman yang tetap (fixed), tidak ada milimeter atau inci, dan lain sebagainya. Membuat desain dalam piksel untuk keperluan Desktop dan Mobile adalah cara lama, sudah kuno, karena sekarang makin banyak perangkat yang digunakan untuk membuka website, bukan hanya desktop dan smartphone, namun juga tablet PC, dan semua itu ukuran layarnya berbeda-beda. Jadi website harus bisa mengadopsi segala macam ukuran layar dari berbagai perangkat tersebut.

Website Froont yang bergerak didunia web design khusus nya menyediakan service responsive web design menuliskan 9 prinsip web design yang perlu untuk anda pahami, berikut adalah prinsip-prinsip tersebut.

Responsive vs Adaptive

Responsive dan Adaptive ini mungkin tampak sama, namun kenyataannya berbeda. Pendekatan keduanya yaitu saling melengkapi satu sama lain, sehingga tidak ada cara yang benar atau salah untuk melakukannya. Biarkan konten yang memutuskan.

Flow 

Ketika ukuran layar menjadi kecil, konten mulai mengambil lebih banyak ruang vertikal dan apapun yang ada dibawahnya akan terdorong kebawah.

 

Relative Unit vs Static Unit

Kanvas bisa saja sebuah layar komputer desktop, layar ponsel, tablet pc, dll. Kepadatan piksel juga bervariasi, jadi kita perlu satuan unit yang fleksibel dan bekerja di mana-mana. Disitulah unit relatif seperti persen (%) menjadi berguna. Jadi ketika membuat lebar menjadi 50% ini berarti akan selalu mengambil setengah dari layar.

Breakpoints

Breakpoints memungkinkan layout untuk berubah pada titik-titik yang telah ditentukan, yaitu memiliki 3 kolom pada desktop, tapi hanya 1 kolom pada smartphone, sedangkan pada tablet pc bisa saja dibuat 2 kolom. Sebagian besar properti CSS dapat diubah dari satu breakpoint ke breakpoint lain nya

 

Minimum Value vs Maximum Value

Terkadang itu ada baiknya ketika konten mengambil seluruh lebar layar, seperti pada perangkat mobile, tetapi memiliki konten yang sama yang membentang ke seluruh lebar layar TV anda adalah hal yang terkadang kurang masuk akal. Inilah sebabnya mengapa nilai minimum (min) dan maksimum (max) sangat membantu. Sebagai contoh kita memiliki lebar 100% dan lebar maksimum dari 1000px berarti konten yang akan memenuhi layar, tapi jangan melebihi 1000px.

 

Nested Objects

Ingat dengan posisi relatif? Memiliki banyak elemen tergantung pada satu sama lain akan sulit untuk mengontrol, karena itu membungkus elemen dalam sebuah wadah penyimpanan akan membuat nya lebih mudah dimengerti, lebih bersih dan rapih. Disinilah unit statis seperti piksel(px) dapat membantu. Mereka sangat berguna untuk konten yang tidak ingin anda ubah ukuran nya seperti logo dan tombol.

Mobile First or Desktop First

Secara teknis tidak ada banyak perbedaan jika proyek dimulai dari layar yang lebih kecil ke besar (mobile first) atau sebalik nya (desktop first). Namun itu akan menambahkan keterbatasan ekstra dan membantu Anda membuat keputusan jika Anda mulai dengan mobile first. Seringkali orang mulai dari kedua ujung sekaligus. Silahkan pilih yang sesuai dengan yang anda pahami dengan baik.

 WebFonts vs System Fonts

Ingin menggunakan jenis font Futura atau Didot di website anda? Gunakan WebFonts! Meskipun mereka akan terlihat menakjubkan, ingat bahwa masing-masing akan di unduh dan semakin banyak anda menggunakan maka waktu loading website anda akan semakin lama. Sedangkan system font disisi lain tampil secepat kilat, namun jika pengunjung website anda tidak memiliki font tersebut di komputer mereka, itu akan mengembalikan font ke font standar.

Bitmap vs Vector

Apakah icon anda memiliki banyak detil-detil dan menerapkan efek-efek? Jika iya, gunakan Bitmap. Jika tidak maka gunakan gambar vektor. Untuk bitmap menggunakan JPG, PNG atau GIF sedangkan untuk vektor pilihan terbaiknya adalah SVG atau Icon Fonts. Masing-masing memiliki beberapa manfaat dan kekurangan. Namun berfokuslah pada ukuran — tidak ada gambar yang digunakan secara online tanpa optimasi. Vektor disisi lain biasanya lebih kecil ukuran nya, namun beberapa browser belum memberikan support. Selain itu juga, jika memiliki banyak kurva, mungkin akan lebih berat dari pada bitmap, jadi pilihlah dengan bijak.

 

Sekian artikel tentang Prinsip Desain Web Responsive ini, semoga berguna untuk anda,