Pengantar

Sejak awal, World Wide Web dirancang agar tidak bergantung pada pilihan hardware dan sistem operasi Anda. Selama Anda dapat terhubung ke internet, World Wide Web dapat diakses oleh Anda.

Pada awal web, sebagian besar orang menggunakan komputer desktop. Saat ini, web tersedia di desktop, laptop, tablet, ponsel foldable, kulkas, dan mobil. Orang-orang tentu mengharapkan situs terlihat bagus, apa pun perangkat yang mereka gunakan. Desain responsif memungkinkan hal ini.

Desain responsif bukanlah pendekatan pertama untuk mendesain situs. Pada tahun-tahun sebelum desain responsif, desainer dan pengembang web mencoba berbagai teknik.

Pilihan desain awal

Developer membuat situs dengan lebar tetap atau tata letak cair.

Desain dengan lebar tetap

Pada awal 1990-an, ketika web pertama kali menjadi populer, sebagian besar monitor memiliki dimensi layar dengan lebar 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 Microsoft pada akhir tahun 90-an didesain untuk lebar 640 piksel. Screenshot dari archive.org

Pada masa-masa awal desain web, merancang laman web dengan lebar 640 {i>pixel<i} adalah pilihan yang aman. Namun, meskipun teknologi lain seperti ponsel dan kamera menjadi lebih kecil, layar menjadi lebih besar (dan pada akhirnya, lebih tipis). Sebelumnya, sebagian besar layar memiliki dimensi 800 x 600 piksel. Desain web juga berubah. Desainer dan developer mulai berasumsi bahwa 800 piksel adalah ukuran default yang aman.

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

Kemudian, layar menjadi lebih besar lagi. 1024x768 menjadi ukuran default. Rasanya seperti perlombaan senjata antara desainer web dan produsen hardware.

​​

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

Baik 640, 800, atau 1024 piksel, memilih satu lebar tertentu untuk mendesain disebut desain lebar tetap.

Jika Anda menentukan lebar tetap untuk tata letak, tata letak hanya akan terlihat bagus pada lebar tertentu tersebut. Jika pengunjung situs Anda memiliki layar yang lebih lebar dari lebar yang dipilih, maka akan ada pemborosan ruang di layar. Anda dapat memusatkan konten halaman untuk mendistribusikan ruang tersebut secara lebih merata (bukan memiliki ruang kosong di satu sisi), tetapi Anda tetap tidak akan memanfaatkan ruang yang tersedia sepenuhnya.

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

Demikian pula, jika pengunjung membuka situs dengan layar yang lebih sempit daripada lebar yang Anda pilih, konten Anda tidak akan pas secara horizontal. Browser menghasilkan crawlbar—scrollbar yang setara secara horizontal—dan pengguna harus memindahkan seluruh halaman ke kiri dan ke kanan untuk melihat semua konten.

Situs yang tampak 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 dengan lebar 800 piksel. Screenshot dari archive.org

Tata letak fleksibel

Meskipun sebagian besar desainer menggunakan tata letak lebar tetap, beberapa desainer memilih untuk membuat tata letak mereka fleksibel. Daripada menggunakan lebar tetap untuk tata letak, Anda dapat membuat tata letak fleksibel menggunakan persentase untuk lebar kolom. Desain ini berfungsi dalam lebih banyak situasi daripada tata letak lebar tetap yang hanya terlihat tepat pada satu ukuran tertentu.

Ini disebut tata letak fleksibel. Namun, meskipun tata letak fleksibel dapat terlihat bagus di berbagai lebar, tampilannya akan memburuk di ekstrem. Pada layar yang lebar, tata letak terlihat melebar. Pada layar yang sempit, tata letak terlihat terhimpit. Kedua skenario tersebut tidak ideal.

Tata letak yang dipadatkan ke dalam jendela sempit.
Tata letak cair Wikipedia dari pertengahan 2000-an seperti yang dialami di jendela browser yang sempit. enshot dari archive.org
Tata letak yang diregangkan 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 memitigasi masalah ini dengan menggunakan min-width dan max-width untuk tata letak Anda. Namun, pada ukuran apa pun di bawah lebar minimum atau di atas lebar maksimum, Anda akan mengalami masalah yang sama dengan layout lebar tetap. Pada layar lebar, akan ada ruang yang tidak terpakai. Pada layar yang sempit, pengguna harus memindahkan seluruh halaman ke kiri dan ke kanan untuk melihat semuanya.

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

Kata cair hanyalah salah satu istilah yang digunakan untuk mendeskripsikan jenis tata letak ini. Jenis desain ini juga disebut tata letak fleksibel atau tata letak dinamis. Terminologinya sama fleksibelnya dengan tekniknya.

Mem-build untuk berbagai ukuran layar

Pada abad ke-21, web terus berkembang menjadi lebih besar. Begitu juga dengan monitor. Namun, layar baru muncul yang lebih kecil daripada perangkat desktop. Dengan munculnya ponsel yang dilengkapi browser web berfitur lengkap, desainer menghadapi dilema. Bagaimana ia dapat memastikan 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. Selain itu, untuk mengalihkan pengunjung di perangkat seluler, Anda harus melakukan sniffing agen pengguna, yang dapat tidak dapat diandalkan dan di-spoof. Chrome telah mengurangi string agen pengguna untuk mencegah pelacakan sidik jari pasif tersebut. Selain itu, tidak ada batasan yang jelas antara perangkat seluler dan non-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 lebar tetap.

Saat pertama kali muncul di CSS, kueri media membuka peluang untuk membuat tata letak lebih fleksibel. Namun, banyak developer masih merasa paling nyaman membuat tata letak dengan lebar tetap. Salah satu tekniknya adalah beralih di antara beberapa tata letak lebar tetap pada lebar yang ditentukan. Beberapa orang menyebutnya desain adaptif.

Desain adaptif memungkinkan desainer menyediakan tata letak yang terlihat bagus dalam beberapa ukuran berbeda, tetapi desainnya tidak pernah terlihat benar jika dilihat di antara ukuran tersebut. Masalah kelebihan ruang tetap ada meskipun tidak seburuk dalam tata letak lebar tetap.

Dengan menggunakan kueri media CSS, Anda dapat memberi pengguna tata letak yang paling dekat dengan lebar browser mereka. Namun, mengingat berbagai ukuran perangkat, kemungkinan tata letaknya terlihat kurang sempurna bagi kebanyakan orang.

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

Desain web responsif

Jika tata letak adaptif adalah gabungan dari kueri media dan tata letak lebar tetap, desain web responsif adalah gabungan dari kueri media dan tata letak fleksibel.

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 dalam artikel di A List Apart pada tahun 2010.

Ethan menentukan tiga kriteria untuk desain responsif:

  1. Petak fleksibel
  2. Media cairan
  3. Kueri media

Tata letak dan gambar situs responsif akan terlihat bagus di perangkat apa pun. Namun, ada satu masalah.

Elemen meta untuk viewport

Browser di ponsel harus menangani situs yang didesain dengan tata letak lebar tetap untuk layar yang lebih lebar. Secara default, browser seluler mengasumsikan bahwa 980 piksel adalah lebar yang digunakan orang untuk mendesain (dan mereka tidak salah). Jadi, meskipun Anda menggunakan tata letak fleksibel, 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 koma. Yang pertama adalah width=device-width. Hal ini memberi tahu browser untuk mengasumsikan lebar situs sama dengan lebar perangkat (bukan mengasumsikan lebar situs 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 yang berisi teks, salah satunya tampak diperkecil karena tidak memiliki tag meta.
Ponsel di sebelah kiri menunjukkan tampilan tata letak sebelum tag meta diterapkan, jika dibandingkan dengan tata letak di sebelah kanan.

Dengan elemen meta tersebut, halaman web Anda siap menjadi responsif.

Desain responsif modern

Sekarang, kita dapat membuat situs yang 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 mendorong desainer untuk membuat keputusan arah seni berdasarkan rasio layar.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang desain web responsif

Pada tahun 2021, apakah aman untuk mendesain halaman web dengan lebar tetap?

true
false

Tata letak cair biasanya kesulitan pada ukuran layar seperti apa?

Layar rata-rata
Layar pendek
Layar sempit
Layar lebar
Layar tinggi
Semua layar

Tiga kriteria asli untuk desain responsif adalah?

Media fleksibel
Petak adaptif
Petak fleksibel
Desain lebar tetap
Kueri Media
Tipografi fleksibel

Desain responsif adalah dunia yang menarik dan terus berkembang. Di bagian selanjutnya dalam kursus ini, Anda akan mempelajari teknologi ini dan cara menggunakannya untuk membuat situs yang indah dan responsif bagi semua orang.