Sejak awal, {i>World Wide Web<i} dirancang untuk agnostik. Tidak masalah perangkat keras apa yang Anda miliki. Tidak masalah sistem operasi apa yang dijalankan perangkat Anda. Selama Anda dapat terhubung ke internet, World Wide Web dapat diakses oleh Anda.
Pada masa awal web, sebagian besar orang menggunakan komputer desktop. Saat ini, web tersedia di desktop, laptop, tablet, ponsel foldable, lemari es, dan mobil. Orang-orang berharap bahwa situs akan terlihat bagus apa pun perangkat yang mereka gunakan. Desain responsif memungkinkan hal ini.
Desain responsif bukanlah pendekatan pertama dalam mendesain {i>website<i}. Pada tahun-tahun sebelum desain responsif, desainer dan pengembang web mencoba berbagai teknik yang berbeda.
Desain lebar tetap
Pada awal 1990-an, saat web pertama kali menjadi populer, sebagian besar monitor memiliki dimensi layar 640x480 piksel. Yang dulunya tabung sinar katoda cembung, tidak seperti tampilan kristal cair datar yang kita miliki sekarang.
Pada masa awal desain web, merancang laman web dengan lebar 640 {i>pixel<i} adalah pilihan yang aman. Namun, meski teknologi lain seperti ponsel dan kamera makin miniatur, layarnya juga makin besar (dan akhirnya, makin datar). Tak lama kemudian, sebagian besar layar memiliki dimensi 800x600 piksel. Desain web pun berubah. Desainer dan pengembang mulai berasumsi bahwa 800 {i>pixel<i} adalah {i>default<i} yang aman.
Kemudian layarnya menjadi lebih besar. 1024 x 768 menjadi default. Rasanya seperti perlombaan senjata antara desainer web dan produsen perangkat keras.
640, 800, atau 1024 piksel, memilih satu lebar spesifik untuk didesain disebut desain lebar tetap.
Jika Anda menentukan lebar tetap untuk tata letak, tata letak Anda hanya akan terlihat bagus pada lebar tertentu tersebut. Jika pengunjung situs Anda memiliki layar yang lebih lebar daripada lebar yang Anda pilih, ruang pada layar akan terbuang. Anda dapat memusatkan konten halaman untuk mendistribusikan ruang tersebut secara lebih merata (bukannya memiliki ruang kosong di satu sisi), tetapi Anda tetap tidak akan memanfaatkan ruang yang tersedia secara maksimal.
Demikian pula, jika pengunjung tiba dengan layar yang lebih sempit dari yang Anda pilih, konten Anda tidak akan pas secara horizontal. Browser menghasilkan crawlbar—yang setara dengan scrollbar horizontal—dan pengguna harus memindahkan seluruh halaman ke kiri dan ke kanan untuk melihat semua konten.
Tata letak Liquid
Meskipun mayoritas desainer menggunakan tata letak dengan lebar tetap, beberapa desainer memilih untuk membuat tata letak mereka fleksibel. Alih-alih menggunakan lebar tetap untuk tata letak, Anda bisa membuat tata letak fleksibel menggunakan persentase untuk lebar kolom. Desain ini berfungsi di lebih banyak situasi daripada tata letak dengan lebar tetap yang hanya terlihat tepat pada satu ukuran tertentu.
Ini disebut {i>liquid layout<i}. Namun, meskipun tata letak cair akan terlihat bagus di berbagai lebar, tata letak akan mulai memburuk pada bagian yang ekstrem. Pada layar yang lebar, tata letak terlihat direntangkan. Pada layar yang sempit, tata letaknya terlihat gepeng. Kedua skenario tersebut tidak ideal.
Anda dapat mengurangi masalah ini dengan menggunakan min-width dan max-width untuk tata letak.
Namun, pada ukuran apa pun di bawah lebar minimum atau di atas lebar maksimum, Anda mendapat masalah yang sama seperti tata letak lebar tetap.
Pada layar yang lebar, akan ada ruang
yang tidak terpakai yang terbuang.
Pada layar yang sempit, pengguna harus menggerakkan seluruh halaman ke kiri dan ke kanan untuk melihat semuanya.
Kata cair hanyalah salah satu dari istilah yang digunakan untuk mendeskripsikan jenis tata letak ini. Jenis desain ini juga disebut {i>layout<i} yang lancar atau {i>layout<i} yang fleksibel. Terminologinya sama mudahnya dengan tekniknya.
Layar kecil
Pada abad ke-21, web terus menjadi semakin besar dan semakin besar. Begitu juga dengan monitor. Namun, hadirlah layar baru yang lebih kecil daripada perangkat desktop mana pun. Dengan kedatangan ponsel dengan {i>browser<i} berfitur lengkap, para desainer dihadapkan pada dilema. Bagaimana dia bisa memastikan desain mereka akan terlihat bagus di komputer desktop dan ponsel? Mereka membutuhkan cara untuk menata gaya konten untuk layar selebar 240 piksel dan lebar ribuan piksel.
Situs terpisah
Salah satu opsinya adalah membuat subdomain terpisah untuk pengunjung seluler. Namun, Anda harus mengelola dua codebase dan desain terpisah. Dan untuk mengalihkan pengunjung di perangkat seluler, Anda harus melakukan sniffing agen pengguna, yang mungkin tidak dapat diandalkan dan mudah dipalsukan. Chrome akan menghentikan penggunaan string agen penggunanya karena alasan privasi. Selain itu, tidak ada batasan yang jelas antara seluler dan bukan seluler. Ke situs mana Anda mengirim perangkat tablet?
Tata letak adaptif
Daripada memiliki situs terpisah di subdomain yang berbeda, Anda dapat memiliki satu situs dengan dua atau tiga tata letak berlebar tetap.
Ketika kueri media pertama kali tiba di CSS, kueri media membuka jalan untuk membuat tata letak lebih fleksibel. Namun, banyak developer masih merasa paling nyaman membuat tata letak dengan lebar tetap. Salah satu tekniknya melibatkan peralihan di antara beberapa tata letak berlebar tetap pada lebar yang ditentukan. Beberapa orang menyebutnya sebagai desain adaptif.
Desain adaptif memungkinkan desainer menyediakan tata letak yang terlihat bagus dalam beberapa ukuran berbeda, tetapi desainnya tidak pernah tampak benar jika dilihat di antara ukuran tersebut. Masalah kelebihan ruang tetap ada meskipun tidak seburuk di tata letak dengan lebar tetap.
Dengan menggunakan kueri media CSS, Anda dapat memberi orang tata letak yang paling dekat dengan lebar browser mereka. Namun, mengingat variasi ukuran perangkat, kemungkinan tata letak akan terlihat kurang sempurna bagi sebagian besar orang.
Desain web yang responsif
Jika tata letak adaptif merupakan mashup kueri media dan tata letak lebar tetap, desain web responsif merupakan gabungan dari kueri media dan tata letak cair.
Istilah ini diciptakan oleh Ethan Marcotte dalam sebuah artikel di A List Apart pada tahun 2010.
Ethan mendefinisikan tiga kriteria untuk desain responsif:
- Petak yang dapat disesuaikan
- Media yang dapat menyesuaikan
- Kueri media
Tata letak dan gambar situs responsif akan terlihat bagus di perangkat apa pun. Tapi ada satu masalah.
Elemen meta untuk viewport
Browser pada ponsel harus berurusan dengan {i>website<i} yang dirancang dengan tata letak lebar tetap untuk layar yang lebih lebar. Secara {i>default<i}, browser seluler berasumsi bahwa 980 {i>pixel<i} adalah lebar yang digunakan orang dalam desain (dan itu tidak salah). Jadi, meskipun Anda menggunakan tata letak cair, browser akan menerapkan lebar 980 piksel, lalu menskalakan halaman web yang dirender ke lebar 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 tanda koma.
Yang pertama adalah width=device-width.
Cara ini akan memberi tahu browser untuk menganggap lebar situs sama dengan lebar perangkat
(bukan menganggap lebar situs adalah 980 piksel).
Nilai kedua adalah initial-scale=1.
Ini memberi tahu browser seberapa 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 untuk memberikan respons.
Desain responsif modern
Saat ini, kami memiliki kemampuan untuk membuat situs web responsif dengan cara yang jauh melampaui ukuran area pandang.
Fitur media memberi developer akses ke preferensi pengguna dan memungkinkan pengalaman yang disesuaikan.
Kueri penampung memungkinkan komponen memiliki informasi responsifnya sendiri.
Elemen picture memberdayakan desainer untuk membuat keputusan arah seni berdasarkan rasio layar.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang desain web responsif
Di tahun 2021, apakah sebaiknya mendesain halaman web dengan lebar tetap?
Tata letak cair umumnya kesulitan pada ukuran layar seperti apa?
Tiga kriteria asli untuk desain responsif adalah?
Desain responsif adalah dunia kemungkinan yang menarik dan terus berkembang. Pada sisa materi ini, Anda akan belajar tentang teknologi ini dan cara menggunakannya untuk membuat {i>website<i} yang menarik dan responsif bagi semua orang.