Tata letak halaman web mengikuti salah satu dari dua pendekatan yang berbeda:
- Tata Letak Lebar Tetap: Ini adalah tata letak di mana lebar seluruh halaman diatur dengan nilai numerik tertentu.
- Tata Letak Cair: Ini adalah tata letak di mana lebar seluruh halaman fleksibel tergantung pada seberapa lebar browser pemirsa.
Ada alasan bagus untuk menggunakan kedua metode tata letak, tetapi tanpa memahami keduanya relatif manfaat dan kekurangan masing-masing metode, Anda tidak dapat membuat keputusan yang baik tentang mana yang akan digunakan untuk web Anda halaman.
Tata Letak Lebar Tetap
Tata letak tetap adalah tata letak yang dimulai dengan ukuran tertentu seperti yang ditetapkan oleh desainer web. Mereka tetap selebar itu, terlepas dari ukuran jendela browser yang melihat halaman. Tata letak dengan lebar tetap memungkinkan desainer lebih mengontrol secara langsung bagaimana halaman akan terlihat di sebagian besar situasi. Mereka sering disukai oleh desainer dengan latar belakang cetak, karena memungkinkan desainer untuk membuat penyesuaian kecil pada tata letak dan membuatnya tetap konsisten di seluruh browser dan komputer.
Tata Letak Cair
Tata letak cair adalah tata letak yang didasarkan pada persentase ukuran jendela browser saat ini. Mereka fleksibel dengan ukuran jendela, bahkan jika pemirsa saat ini mengubah ukuran browsernya saat dia melihat situs. Tata letak lebar cair memungkinkan penggunaan ruang yang disediakan oleh jendela browser tertentu secara efisien atau resolusi layar. Mereka sering disukai oleh desainer yang memiliki banyak informasi n untuk disampaikan dalam ruang sesedikit mungkin, karena mereka tetap konsisten dalam ukuran dan bobot halaman relatif terlepas dari siapa yang melihat halaman.
Apa yang dipertaruhkan?
Anda desain situs web mempengaruhi Anda daya tanggap dan adaptif situs. Bergantung pada yang Anda pilih, kemampuan pembaca Anda untuk memindai teks Anda, menemukan apa yang mereka cari atau kadang-kadang bahkan menggunakan situs Anda mungkin terbantu atau terhalang. Identitas merek situs Anda secara keseluruhan mungkin juga berisiko, terutama jika standar merek Anda mengikuti model logika print-first.
Manfaat Tata Letak Lebar Tetap
Tata letak lebar tetap sangat membantu dalam beberapa keadaan.
- Tata letak lebar tetap memungkinkan perancang untuk membuat halaman yang akan terlihat identik tidak peduli siapa yang melihatnya.
- Elemen dengan lebar tetap seperti gambar tidak akan mengalahkan teks pada monitor yang lebih kecil karena lebar seluruh halaman akan menyertakan elemen tersebut.
- Panjang pindaian tidak akan terpengaruh oleh segmen teks yang besar, tidak peduli seberapa lebar browser.
Manfaat Tata Letak Cair
Tata letak cair bekerja paling baik dalam keadaan lain.
- Tata letak lebar cairan mengembang dan menyusut untuk mengisi ruang yang tersedia.
- Semua real estat yang tersedia digunakan, memungkinkan perancang untuk menampilkan lebih banyak konten pada monitor yang lebih besar, tetapi masih tetap layak pada tampilan yang lebih kecil.
- Tata letak cair memberikan konsistensi dalam lebar relatif, memungkinkan halaman untuk merespons secara lebih dinamis terhadap batasan yang diberlakukan pelanggan seperti ukuran font yang lebih besar.
Kelemahan Tata Letak Lebar Tetap
Namun, format tetap bukan tanpa biaya.
- Tata letak lebar tetap memaksa pengguliran horizontal di jendela browser yang lebih kecil. Kebanyakan orang tidak suka menggulir secara horizontal.
- Mereka meninggalkan ruang putih yang luas di monitor yang lebih besar, menghasilkan banyak ruang yang tidak digunakan dan lebih banyak pengguliran secara vertikal daripada yang mungkin diperlukan.
- Tata letak lebar tetap tidak menangani perubahan pelanggan pada ukuran font dengan baik. Untuk peningkatan kecil dalam ukuran font, itu bisa baik-baik saja, tetapi untuk peningkatan yang lebih besar, tata letak dapat terganggu.
Kerugian dari Tata Letak Cair
Tata letak cair juga bukan tanpa kerugian.
- Tata letak cair memungkinkan kontrol presisi yang sangat sedikit atas lebar berbagai elemen halaman.
- Mereka dapat menghasilkan kolom teks yang terlalu lebar untuk dipindai dengan nyaman, atau pada browser yang lebih kecil terlalu kecil untuk kata-kata muncul dengan jelas.
- Kesalahan tata letak cair saat elemen lebar tetap, seperti gambar, ditempatkan di dalam kolom cair. Jika kolom dirender tanpa cukup ruang untuk gambar, beberapa browser akan menambah lebar kolom, mengabaikan instruksi perancang, sementara browser lain memaksa tumpang tindih dalam teks dan gambar untuk mencapai yang benar persentase.
Preferensi Tata Letak dan Pendekatan Campuran
Beberapa desainer lebih suka memadukan konsep-konsep ini. Mereka tidak suka menggunakan tata letak cair untuk blok teks besar, karena struktur itu membuat teks tidak dapat dibaca pada monitor kecil atau tidak dapat dipindai pada monitor besar. Jadi mereka cenderung membuat kolom utama halaman dengan lebar tetap, tetapi membuat header, footer, dan sisi kolom lebih fleksibel untuk mengambil sisa real estate dan tidak kehilangan kapasitas yang lebih besar browser.
Beberapa situs menggunakan skrip untuk menentukan ukuran jendela browser Anda dan kemudian mengubah elemen tampilan yang sesuai. Misalnya, jika Anda membuka situs semacam itu di jendela yang sangat lebar, Anda mungkin mendapatkan kolom tautan tambahan di sisi kiri yang mungkin tidak dilihat oleh pengunjung dengan monitor yang lebih kecil. Selain itu, pembungkusan teks di sekitar iklan bergantung pada seberapa lebar jendela browser Anda. Jika cukup lebar, situs akan membungkus teks di sekitarnya, jika tidak, akan menampilkan teks artikel di bawah iklan. Meskipun sebagian besar situs tidak memerlukan tingkat kerumitan ini, ini menunjukkan cara untuk memanfaatkan layar yang lebih besar tanpa memengaruhi tampilan di layar yang lebih kecil.