Sejak awal, {i>World Wide Web<i} dirancang untuk menjadi agnostik. Tidak masalah perangkat keras apa yang Anda miliki. Tidak masalah sistem operasi apa yang dijalankan di perangkat Anda. Selama Anda dapat terhubung ke internet, {i>World Wide Web<i} dapat diakses oleh Anda.
Pada masa-masa awal web, kebanyakan orang menggunakan komputer {i>desktop<i}. Saat ini web tersedia di desktop, laptop, tablet, ponsel foldable, kulkas, dan mobil. Orang-orang semestinya berharap situs web akan terlihat bagus, apa pun perangkat yang mereka gunakan. Desain responsif memungkinkan hal ini.
Desain responsif bukanlah pendekatan pertama untuk mendesain {i>website<i}. Pada tahun-tahun sebelum desain responsif, desainer dan pengembang web mencoba berbagai teknik.
Desain dengan lebar tetap
Pada awal 1990-an, ketika web pertama kali menjadi populer, sebagian besar monitor memiliki dimensi layar selebar 640 {i>pixel<i} dan tinggi 480 {i>pixel<i}. Ini adalah tabung sinar katode cembung, tidak seperti layar kristal cair datar yang kita miliki sekarang.
Pada masa-masa awal desain web, adalah taruhan yang aman untuk merancang laman web dengan lebar 640 {i>pixel<i}. Namun, sementara teknologi lain seperti ponsel dan kamera semakin kecil, layarnya semakin besar (dan akhirnya, menjadi lebih datar). Sebelumnya, sebagian besar layar memiliki dimensi 800 x 600 piksel. Desain web kemudian berubah. Desainer dan pengembang mulai mengasumsikan bahwa 800 piksel adalah default yang aman.
Kemudian layar menjadi lebih besar lagi. 1024 kali 768 menjadi default. Rasanya seperti perlombaan lengan antara desainer web dan produsen perangkat keras.
Apakah itu 640, 800, atau 1024 piksel, memilih satu lebar tertentu yang menjadi tujuan desain disebut desain lebar tetap.
Jika Anda menentukan lebar tetap untuk tata letak, maka tata letak Anda hanya akan terlihat bagus pada lebar tersebut. Jika pengunjung situs Anda memiliki layar yang lebih lebar dari lebar yang dipilih, akan ada pemborosan ruang di layar. Anda dapat memusatkan konten halaman untuk mendistribusikan ruang tersebut secara lebih merata (alih-alih memiliki ruang kosong di satu sisi), tetapi Anda tetap tidak akan memanfaatkan ruang yang tersedia secara penuh.
Demikian pula, jika pengunjung datang dengan layar yang lebih sempit dari lebar yang Anda pilih, maka konten Anda tidak akan pas secara horizontal. Browser menghasilkan crawlbar—yang setara horizontal dengan scrollbar—dan pengguna harus menggerakkan seluruh halaman ke kiri dan ke kanan untuk melihat semua konten.
Tata letak cair
Meskipun sebagian besar desainer menggunakan tata letak dengan lebar tetap, beberapa memilih untuk membuat tata letak mereka fleksibel. Alih-alih menggunakan lebar tetap untuk tata letak, Anda dapat membuat tata letak yang fleksibel menggunakan persentase untuk lebar kolom. Desain ini berfungsi di lebih banyak situasi dibandingkan tata letak dengan lebar tetap yang hanya terlihat pada satu ukuran tertentu.
Ini disebut tata letak cair. Namun, meskipun tata letak cair akan terlihat bagus di berbagai lebar lebar, tata letak ini akan mulai memburuk secara ekstrem. Pada layar yang lebar, tata letak terlihat melebar. Pada layar yang sempit, tata letaknya terlihat gepeng. Kedua skenario ini tidak ideal.
Anda dapat mengurangi masalah ini dengan menggunakan min-width dan max-width untuk tata letak Anda.
Namun, pada ukuran berapa pun di bawah lebar minimum atau di atas lebar maksimum, Anda akan mengalami masalah yang sama dengan tata letak lebar tetap.
Pada layar yang lebar, akan ada ruang
yang tidak terpakai yang akan terbuang sia-sia.
Pada layar yang sempit, pengguna harus memindahkan seluruh halaman ke kiri dan kanan untuk melihat semuanya.
Kata cair hanyalah salah satu istilah yang digunakan untuk mendeskripsikan tata letak semacam ini. Desain semacam ini juga disebut tata letak yang dinamis atau tata letak yang fleksibel. Terminologinya sama lancarnya dengan tekniknya.
Layar kecil
Pada abad ke-21, web terus menjadi semakin besar. Begitu pula dengan monitor. Tapi muncul layar baru yang ukurannya lebih kecil daripada perangkat {i>desktop<i}. Dengan hadirnya ponsel dengan {i>browser<i} web berfitur lengkap, para desainer menghadapi sebuah dilema. Bagaimana dia bisa memastikan bahwa desainnya akan terlihat bagus di komputer desktop dan ponsel? Mereka membutuhkan cara menata gaya konten untuk layar berukuran kecil 240 piksel dan sebesar ribuan piksel.
Situs terpisah
Salah satu opsi adalah membuat subdomain terpisah untuk pengunjung seluler. Namun, Anda harus mengelola dua codebase dan desain secara terpisah. Dan untuk mengalihkan pengunjung di perangkat seluler, Anda harus melakukan penyadapan agen pengguna, yang tidak dapat diandalkan dan mudah dipalsukan. Chrome akan menghentikan penggunaan string agen penggunanya karena alasan privasi. Selain itu, tidak ada batas yang jelas antara seluler dan bukan seluler. Ke situs mana Anda mengirim perangkat tablet?
Tata letak adaptif
Alih-alih memiliki situs terpisah di subdomain yang berbeda, Anda dapat memiliki satu situs dengan dua atau tiga tata letak lebar tetap.
Saat kueri media pertama kali masuk di CSS, mereka membuka pintu untuk membuat tata letak yang lebih fleksibel. Namun, banyak developer masih merasa paling nyaman untuk membuat tata letak dengan lebar tetap. Salah satu tekniknya melibatkan peralihan di antara beberapa tata letak dengan lebar tetap dengan lebar tertentu. Beberapa orang menyebutnya sebagai desain adaptif.
Desain adaptif memungkinkan desainer untuk menyediakan tata letak yang tampak bagus dalam beberapa ukuran, tetapi desainnya tidak pernah tampak benar-benar tepat ketika dilihat di antara ukuran-ukuran tersebut. Masalah ruang berlebih terus berlanjut meskipun tidak seburuk tata letak dengan lebar tetap.
Dengan menggunakan kueri media CSS, Anda dapat memberikan tata letak yang paling dekat dengan lebar browser orang tersebut. Namun, mengingat berbagai ukuran perangkat, kemungkinan tata letaknya akan terlihat kurang sempurna bagi sebagian besar orang.
Desain web responsif
Jika tata letak adaptif adalah mashup dari kueri media dan tata letak lebar tetap, desain web responsif adalah mashup kueri media dan tata letak cair.
Istilah ini diciptakan oleh Ethan Marcotte pada sebuah artikel di A List Apart pada tahun 2010.
Ethan mendefinisikan tiga kriteria untuk desain responsif:
- Petak fluida
- Media cairan
- Kueri media
Tata letak dan gambar situs responsif akan terlihat bagus di perangkat apa pun. Tapi, ada satu masalah.
Elemen meta untuk viewport
Browser di ponsel harus berurusan dengan {i>website<i} yang dirancang dengan tata letak lebar tetap untuk layar yang lebih lebar. Secara default, browser seluler mengasumsikan bahwa 980 piksel adalah lebar yang dirancang orang (dan mereka tidak salah). Jadi, bahkan jika Anda menggunakan tata letak yang {i>cair<i}, browser akan menerapkan lebar 980 piksel lalu menskalakan laman web yang dirender menjadi selebar layar yang sebenarnya.
Jika menggunakan desain responsif, Anda perlu memberi tahu browser agar tidak melakukan penskalaan tersebut.
Anda dapat melakukannya dengan elemen meta di head halaman web:
<meta name="viewport" content="width=device-width, initial-scale=1">
Ada dua nilai, yang dipisahkan dengan koma.
Yang pertama adalah width=device-width.
Ini memberi tahu browser untuk menganggap lebar {i>website<i} sama dengan lebar perangkat
(alih-alih mengasumsikan lebar situs web adalah 980 piksel).
Nilai kedua adalah initial-scale=1.
Ini memberi tahu browser berapa banyak atau seberapa sedikit penskalaan yang harus dilakukan.
Dengan desain responsif, Anda tidak ingin browser melakukan penskalaan sama sekali.
Dengan elemen meta tersebut, halaman web Anda siap menjadi responsif.
Desain responsif modern
Saat ini, kita memiliki kemampuan untuk membuat situs responsif yang jauh melampaui ukuran area pandang.
Fitur media memberi developer akses ke preferensi pengguna dan memungkinkan pengalaman yang disesuaikan.
Kueri container memungkinkan komponen memiliki informasi responsifnya sendiri.
Elemen picture mendorong desainer untuk membuat keputusan arah seni berdasarkan rasio layar.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang desain web responsif
Pada tahun 2021, apakah desainer dapat mendesain halaman web dengan lebar tetap?
Tata letak cair biasanya kesulitan pada ukuran layar seperti apa?
Tiga kriteria asli untuk desain responsif adalah?
Desain responsif adalah dunia kemungkinan yang menarik dan berkembang. Dalam sisa materi ini, Anda akan belajar tentang teknologi ini dan cara menggunakannya untuk menciptakan, {i>website<i} responsif untuk semua orang.