Sebelum menerapkan layout secara praktis, ada beberapa hal dasar yang perlu dipertimbangkan. Pertama-tama, Anda harus memutuskan jenis layout yang ingin digunakan. Pada dasarnya ada tiga pilihan.
• Tetap
• Fleksibel
• Elastis
CSS memungkinkan pembuatan layout dengan dimensi tetap atau fleksibel. Untuk layout tetap, biasanya menggunakan ukuran dalam piksel. Sebaliknya, layout fleksibel menggunakan nilai dalam persen. Kedua jenis layout ini memiliki kelebihan dan kelemahan masing-masing.
Layout tetap biasanya digunakan saat grafik digunakan sebagai elemen layout. Jika posisi elemen dalam layout harus ditempatkan dengan tepat pada piksel tertentu, biasanya pengaturan posisi yang tetap digunakan. Biasanya, setidaknya lebar layout diatur ke jumlah piksel tertentu. Lebar ini biasanya ditujukan untuk resolusi layar tertentu.
Situasi berbeda terjadi pada layout fleksibel. Di sini, lebar tidak ditentukan. Layout akan menyesuaikan dengan lebar jendela peramban.
Pada layout semacam ini, lebar misalnya dinyatakan dalam persen. Ketika pengguna mengubah ukuran jendela peramban, ukuran layout juga akan berubah.
Berkat fitur CSS modern, ada varian layout lain yang disebut sebagai layout responsif. Di sini, layout berubah sehingga tampilannya pada perangkat seluler akan berbeda dengan pada desktop. Di PSD-Tutorials.de contohnya, kami menggunakan layout semacam ini. Saat pengunjung membuka halaman di desktop dengan ukuran jendela peramban "normal", maka akan tampak seperti ini.
Jika jendela diperkecil, maka susunan elemen pada halaman web akan berubah.
Proses pembuatan layout responsif memerlukan upaya yang cukup besar. Sebab, ukuran layar pengunjung harus diketahui dan layout yang sesuai harus disajikan. Layout yang sesuai harus Anda kembangkan untuk berbagai ukuran layar. Seorang pengunjung yang membuka situs web Anda menggunakan layar monitor besar, akan melihat layout dengan tiga kolom. Sementara pengunjung lain yang membuka situs web Anda dengan perangkat seluler, akan melihat layout dengan satu kolom.
Kelebihan dan Kekurangan dari Variasi
Sebelum menerapkan layout, Anda perlu mempertimbangkan jenis layout yang ingin Anda gunakan. Saya akan jelaskan secara singkat keuntungan dan kerugian dari layout tetap.
• Template desain dapat diimplementasikan dengan mudah di sini.
• Ketika mengacu pada resolusi standar, jarang terjadi masalah pada tampilan situs web.
• Layout ini mudah dipahami. (Keunggulan ini tentu berguna ketika Anda sebagai pengembang web ingin menjelaskan layout kepada klien).
Namun, layout tetap juga memiliki kelemahan.
• Karena dimensinya tetap, maka tidak fleksibel dan tidak beradaptasi pada layar yang sangat kecil atau besar. Pada akhirnya, banyak ruang akan terbuang.
• Menghadapi beberapa keterbatasan dalam hal aksesibilitas.
Layout fleksibel juga memiliki kelebihan dan kelemahan. Pertama, kelebihannya.
• Layout akan menyesuaikan otomatis dengan ukuran jendela peramban.
• Pengunjung memiliki pengaruh besar terhadap tampilan situs web.
Namun, ada juga kekurangan.
• Anda sebagai pengembang sulit mengontrol hasilnya. Panduan layout hanya dapat diimplementasikan sebagian.
• Konten halaman harus disesuaikan dengan hati-hati.
• Pada layar besar, tata letak teks yang pendek mungkin terlihat "kurang menarik" karena sering kali hanya satu baris. (CSS menyediakan properti khusus seperti min-width untuk kasus seperti ini).
Selain itu, ada jenis layout lain yang merupakan tengah-tengah antara layout tetap dan fleksibel, yaitu layout elastis. Karakteristik utama mereka adalah unit pemetaan berbasis em. (Saat ini, rem semakin populer. Berbeda dengan em, rem selalu berdasarkan elemen root, bukan seperti em yang berdasarkan elemen induk).
Pada tata letak ini, lebar dan tinggi bersifat fleksibel. Desain halaman akan mengubah proporsional terhadap ukuran jendela peramban. Bentuk desain ini mungkin merupakan yang paling rumit dalam penerapannya. Hal ini karena Anda perlu tahu dengan pasti bagaimana elemen akan berperilaku saat ukuran jendela peramban berubah. Layout elastis biasanya digunakan untuk situs web yang menawarkan banyak foto dan video.
Kelebihan dari layout elastis:
• Ruang yang tersedia dimanfaatkan secara optimal.
• Konten selalu ditampilkan sebesar mungkin secara proporsional.
Namun tentu saja, layout elastis juga memiliki kelemahan.
• Mendesain layout ini sangat kompleks.
• Implementasinya juga tidak mudah.
Pilihan yang Sulit
Jadi, Anda harus memutuskan jenis variasi yang ingin Anda gunakan. Jika Anda masih sangat awam dalam pengembangan HTML/CSS, saya sarankan Anda mulai dengan layout tetap. Sementara mereka yang sudah mahir dalam pengembangan web sebaiknya langsung menggunakan layout responsif. Dengan demikian, Anda akan berada pada jalur yang tepat, tanpa memperdulikan perangkat apa pun yang digunakan pengunjung untuk membuka situs web Anda nantinya.
