Bagaimana Cara Kerja Web Responsif?

Istilah responsive web dikenal dalam pengembangan web. Web Responsif adalah rangkaian teknik desain dan pengembangan yang memungkinkan situs web menekuk, meregangkan, mengecilkan, dan menyesuaikan ukuran layar perangkat yang berbeda secara otomatis.

Web responsif sangat penting karena memastikan bahwa pengguna dapat menikmati

tampilan terbaik terlepas dari ukuran layar perangkat yang mereka gunakan. Penting untuk diketahui bahwa desain web responsif sebenarnya adalah situs web yang nyaman untuk dibuka di versi desktop dan seluler.
Jumlah jenis dan ukuran perangkat

Saat ini tersedia banyak perangkat dengan berbagai jenis dan ukuran layar

. Kita mengenal laptop 14 inch, 13 inch, 11 inch, 10 inch, kemudian kita mengenal desktop PC dengan ukuran layar yang lebih besar yaitu iMac 15 inch hingga 27 inch, lalu ada 10 Inch, 9 inch, 6 tablet -inci, lalu smartphone dengan ukuran layar di kisaran 5″ hingga 6″.

Berbagai jenis perangkat dengan ukuran berbeda ini memengaruhi tampilan situs web saat dibuka di perangkat ini. Pengembang situs web dapat membuat situs web untuk layar PC 14 inci, tetapi membukanya di smartphone dengan layar 6 inci akan menjadi berantakan.

Di sinilah desain web responsif muncul. Dengan desain responsif, pengembang web hanya perlu membuat kode dalam tampilan situs web sehingga dapat dibuka dengan mudah di perangkat dengan ukuran layar yang berbeda dan tanpa tampilan yang berantakan.
Bagaimana cara kerja web responsif?

Untuk pengguna web, mengetahui cara kerja web responsif mungkin tidak terlalu penting. Namun, sangat penting bagi pengembang web untuk mengetahui cara kerja web responsif agar dapat membuat web yang responsif.

Untuk pemahaman yang lebih baik, kami menambahkan gambar dari www.oneupweb.com tentang cara kerja desain web responsif.

Gambar diatas menunjukkan tampilan website pada ukuran laptop/PC biasa

. Tampilan dan nuansa situs web pada dasarnya adalah serangkaian elemen terpisah yang disusun dalam kisi-kisi seperti gambar di atas. Elemen-elemen di situs web diberi nomor dari 1 hingga 7 dan memiliki warna yang berbeda untuk memudahkan penjelasan.

Jika situs web terbuka pada perangkat dengan ukuran layar yang berbeda, item 1 – 7 perlu dipertahankan dan agar pada dasarnya saling menempel. Dalam desain web responsif, pengembang dapat mengurangi atau memperbesar elemen-elemen ini, mengubah warna, mengubah ukuran font, dll.

Bahkan, dengan perangkat yang lebih kecil mungkin juga ada elemen yang tertinggal saat dibuka. Namun, Anda tidak dapat mengubah urutan elemen. Lihat gambar berikut:

Dari gambar di atas dapat dilihat bahwa ukuran dan bentuk balok-balok bernomor elemen dapat berbeda-beda, tetapi tidak dengan urutan balok-balok tersebut.

Dan yang terpenting, sebagai developer Anda harus jujur ​​jika tidak semua konten bisa ditampilkan di layar kecil. Saat Anda mengembangkan situs web di desktop, Anda bisa puas dengan tampilannya yang sempurna dan kontennya ditempatkan dengan baik.

Namun, masalah terjadi saat Anda membukanya di tampilan seluler. Tidak semua konten akan pas di layar yang lebih kecil. Mungkin diperlukan beberapa kali untuk menggulir layar ponsel untuk melihat semua konten situs web.
Prinsip dalam desain web responsif

Setidaknya ada tiga prinsip utama dalam desain web responsif, yaitu:
(1) Sistem Grid Fluida

Sebelum era internet, kita mengenal media cetak. Dalam hal media cetak, ukuran mutlak ditentukan. Ketika internet muncul, tren berlanjut dan situs web ditentukan dalam ukuran piksel.

Namun, dalam desain web responsif, ukuran absolut tidak dapat digunakan. Oleh karena itu, ukuran relatif digunakan sebagai pengganti ukuran absolut.

Untuk menemukan ukuran relatif, gunakan rumus matematika:

Ukuran target / konteks = ukuran relatif

Misalnya, Anda sedang mengerjakan situs web dengan pembungkus yang dirancang untuk menampilkan situs web dengan lebar maksimum 960 piksel sedangkan perangkat menggunakan lebar jendela browser maksimum 1280 piksel.

960 piksel adalah ukuran target dan konteksnya adalah 1280 piksel.

Yang seperti itu:

960/1280 = 75%
(2) Menggunakan Gambar Cairan

Gambar cair adalah gambar yang diskalakan agar sesuai dengan wadahnya. Biasanya, pengembang menggunakan perintah CSS berikut:

img {lebar maks: 100%;}

Perintah CSS kurang lebih menginstruksikan browser untuk menampilkan gambar dengan 100% nilai pikselnya dan harus diskalakan sesuai wadahnya. Hal ini dilakukan untuk mencegah gambar meregang jika wadah lebih besar dari gambar dan untuk memastikan bahwa gambar menyusut di sepanjang wadah (dengan menghapus

Lihat Juga :

https://www.suratkabar.id/
https://www.chip.co.id/
https://www.atursaja.com/
https://vncallcenter.com/
https://jadwalxxi.id/
https://jurubicara.id/
https://psyline.id/
https://liga-indonesia.id/
https://officialjimbreuer.com/
https://rollingstone.co.id/