Pengantar

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.

Situs web Microsoft dengan dua kolom teks sederhana ditambah {i>navigationbar<i}.
Situs web Microsoft pada akhir tahun 90-an dirancang dengan lebar 640 piksel. Screenshot dari archive.org

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.

Situs web Microsoft menggunakan desain tiga kolom, sebagian besar berbasis teks.
Situs web Microsoft pada tahun 2000-an yang lalu dirancang untuk lebar 800 piksel. Screenshot dari archive.org

Kemudian layar menjadi lebih besar lagi. 1024 kali 768 menjadi default. Rasanya seperti perlombaan lengan antara desainer web dan produsen perangkat keras.

​​

Situs web Microsoft dengan desain yang lebih kompleks menggunakan gambar serta teks.
Situs web Microsoft pada pertengahan tahun 2000-an yang dirancang untuk lebar 1024 piksel. Screenshot dari archive.org

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.

Sebuah layour sempit dengan banyak ruang putih di sekitarnya.
Situs Yahoo dari awal 2000-an seperti yang dialami dalam browser yang lebih lebar daripada desain situs selebar 800 piksel. Screenshot dari archive.org

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.

Situs web yang muncul terpotong di sebelah kanan karena terlalu lebar untuk area pandang.
Situs Yahoo dari awal tahun 2000-an seperti yang dialami dalam browser yang lebih sempit daripada desain situs selebar 800 piksel. Screenshot dari archive.org

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.

Tata letak yang diciutkan ke dalam jendela sempit.
Tata letak cair Wikipedia dari pertengahan 2000-an seperti yang dialami di jendela browser yang sempit. Screenshot dari archive.org
Tata letak direntangkan secara horizontal dengan panjang garis yang sangat panjang.
Tata letak cair Wikipedia dari pertengahan 2000-an seperti yang dialami di jendela browser yang lebar. Screenshot dari archive.org

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.

Buka contoh tata letak cairan di jendela browser baru untuk melihat bagaimana perubahan ukuran jendela akan meregangkan desain.

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.

Buka contoh tata letak adaptif di jendela browser baru untuk melihat bagaimana perubahan ukuran jendela menyebabkan desain melompat antar-tata letak.

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.

Buka contoh desain responsif di jendela browser baru untuk melihat bagaimana perubahan ukuran jendela menyebabkan desain berubah tata letak dengan lancar.

Istilah ini diciptakan oleh Ethan Marcotte pada sebuah artikel di A List Apart pada tahun 2010.

Ethan mendefinisikan tiga kriteria untuk desain responsif:

  1. Petak fluida
  2. Media cairan
  3. 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.

Gambar dua ponsel berisi teks, yang satu tampak diperkecil karena tidak memiliki tag meta.
Ponsel di sebelah kiri menunjukkan tampilan tata letak sebelum tag meta ditempatkan, jika dibandingkan dengan tata letak di sebelah kanan.

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?

true
Tidak aman untuk bertaruh pada desain lebar tetap pada tahun 2021.
salah
🎉 Benar. Jumlah kemungkinan ukuran layar terlalu besar untuk mengasumsikan bahwa pengunjung akan berasal dari satu ukuran.

Tata letak cair biasanya kesulitan pada ukuran layar seperti apa?

Layar sempit
🎉 Benar. Ukuran ekstrem dari layar yang sempit dapat membuat tata letak yang cair terlihat tertekan.
Layar rata-rata
Coba lagi. Tata letak cair berfungsi dengan baik di layar berukuran rata-rata.
Layar lebar
🎉 Ukuran ekstrem dari layar lebar, atau bahkan ultrawide, dapat membuat tata letak cair tampak membentang hingga panjang pembacaan yang tidak nyaman.
Layar pendek
Coba lagi. Layar pendek umumnya tidak mengalami kesulitan untuk mendukung tata letak yang cair.
Layar tinggi
Coba lagi. Layar tinggi umumnya tidak kesulitan untuk mendukung tata letak cair.
Semua layar
Coba lagi. Tata letak cair adalah pilihan yang tepat untuk berbagai ukuran layar.

Tiga kriteria asli untuk desain responsif adalah?

Tipografi adaptif
Coba lagi. Tipografi yang dapat disesuaikan bukan salah satu kriteria awal.
Petak fluida
🎉 Benar.
Petak adaptif
Coba lagi. Petak adaptif berubah berdasarkan ukuran area pandang yang ditetapkan.
Media cairan
🎉 Benar.
Desain dengan lebar tetap
Coba lagi. Desain lebar tetap mengacu pada desain dengan lebar yang ditetapkan dan tidak responsif.
Kueri Media
🎉 Benar.

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.