Saat membahas layout halaman web, desainer akan sering menggunakan istilah seperti fixed, statis, fluid, adaptif, responsif, dan beberapa lainnya. Jika Anda seorang desainer web, pengembang/developer web, atau bahkan pemangku kepentingan atau klien proyek, penting untuk memahami apa arti istilah ini dan kapan setiap jenis layout (atau tata letak) harus digunakan.

Singkatnya, setiap jenis layout web menjelaskan bagaimana tata letak tersebut berperilaku ketika web dilihat pada lebar browser yang berbeda.  Lebar horizontal browser dapat berubah karena situs web dilihat pada perangkat yang berbeda (ponsel, tablet, desktop, dan sebagainya), pengunjung situs web hanya dapat mengubah ukuran jendela browser pada perangkat desktop, atau pengunjung dapat mengubah mereka telepon dari portrait ke mode landscape, dan sebagainya. Konsep-konsep ini mungkin sulit dipahami pada awalnya, tetapi hanya karena mereka sangat terkait satu sama lain. Memahami perbedaan antara masing-masing adalah kunci untuk memahaminya secara individual.

Layout Halaman Statis

layout web fixed/statis

Layout halaman statis (kadang-kadang disebut tata letak “fixed” atau “fixed-width”) menggunakan ukuran halaman prasetel dan tidak berubah berdasarkan lebar browser. Dengan kata lain, layout halaman mungkin memiliki lebar permanen 960 piksel, apa pun yang terjadi. Ini adalah bagaimana halaman web secara tradisional dibangun selama bertahun-tahun sampai pengaruh modern seperti pertanyaan media dan desain responsif diperkenalkan sekitar awal 2010-an.

Perangkat yang berbeda akan memperlakukan layout halaman statis dengan berbagai cara, sehingga halaman yang diberikan bisa sedikit tidak dapat diprediksi. Misalnya, pada browser desktop, jika jendela terlalu kecil secara horizontal, maka halaman akan terpotong dan bilah gulir horizontal akan ditampilkan. Pada perangkat seluler seperti iPhone, halaman akan diskalakan secara otomatis, memungkinkan pengguna memperbesar tempat menarik (asalkan tidak ada metatag yang menimpa perilaku default ini).

Ketika situs web baru dibangun, kebanyakan dari mereka tidak memilih layout statis, karena itu berarti bahwa pengalaman seluler akan memerlukan situs web yang terpisah. Ada pengecualian besar, seperti  toko online Apple.com , tetapi Apple adalah kasus unik karena titik penjualan perangkat seluler mereka adalah bahwa mereka dapat melihat layout statis. Dengan kata lain, Apple tampaknya belum mengadopsi desain responsif dulu.

Layout web fluid

Layout halaman fluid (juga disebut “liquid”) menggunakan unit relatif bukan unit fixed. Biasanya tata letak fluid akan menggunakan persentase, bukan piksel, tetapi setiap unit pengukuran relatif akan berfungsi, seperti ems.

Layout fluid sering kali akan mengisi lebar halaman, tidak peduli apa pun lebar browsernya. Tata letak yang fluid tidak memerlukan banyak pemikiran sebagai desain yang responsif, tetapi ada beberapa kelemahan utama pada lebar peramban yang sangat besar atau sangat kecil. Jika browser sangat luas, beberapa konten mungkin terlalu panjang. Pada layar besar, satu paragraf dapat berjalan melintasi halaman dalam satu baris. Sebaliknya, layout multi-kolom pada layar kecil bisa terlalu ramai untuk konten.

Layout Halaman Adaptif

Layout web adaptif

Layout halaman adaptif menggunakan kueri media CSS untuk mendeteksi lebar browser dan mengubah tata letak yang sesuai. Layout adaptif akan menggunakan unit fixed seperti piksel, sama seperti layout statis, tetapi perbedaannya adalah bahwa pada dasarnya ada beberapa lebar fixed yang ditentukan oleh kueri media tertentu.

Kueri media adalah ekspresi logika, dan ketika digunakan dalam kombinasi dengan kueri media lainnya, mereka membentuk algoritma dasar. Jadi misalnya, layout halaman adaptif mungkin mengatakan sesuatu seperti, “Jika lebar browser 500 piksel, atur wadah konten utama menjadi lebar 400 piksel. Jika browser memiliki lebar 1000 piksel, maka atur wadah konten utama menjadi lebar 960 piksel. ” Di luar wadah konten utama, bagian lain halaman mungkin berubah lebarnya, bertukar tempat, atau dihapus. Misalnya, tata letak dua kolom mungkin menjadi tata letak kolom tunggal jika browser terlalu sempit.

Layout adaptif adalah solusi stop-gap yang baik jika layout statis lama perlu dikonversi untuk mendukung perangkat seluler. Mereka juga biasanya membutuhkan waktu pengembangan lebih sedikit daripada layout responsif. Kelemahan utama adalah bahwa lebar perangkat di antara breakpoint eksplisit sering kurang dari ideal, dengan terlalu banyak ruang atau tidak cukup ruang.

Layout Halaman Responsif

Layout web responsif

Layout halaman responsif menggunakan unit relatif dan kueri media, seolah-olah menggabungkan ide layout fluid dan layout adaptif. Saat peramban bertambah atau berkurang lebarnya, layout responsif akan melentur seperti layout fluid. Namun, jika browser melampaui lebar tertentu yang ditentukan oleh breakpoint kueri media, maka tata letak akan berubah secara lebih dramatis untuk mengakomodasi lebar yang lebar atau sempit.

Biasanya desain responsif dibangun menggunakan pendekatan mobile-first. Itu berarti layout untuk penayangan seluler dirancang terlebih dahulu, dan kemudian saat peramban menjadi lebih luas di tablet dan desktop, perancang akan menemukan cara untuk memperluas tampilan pada perangkat seluler. Ini cenderung menciptakan pengalaman yang lebih baik secara keseluruhan, karena lebih mudah untuk memperluas desain daripada mencoba dan menyederhanakan tampilan yang besar untuk layar ponsel.

Layout Halaman Lainnya

Jika Anda masih menginginkan lebih banyak contoh, pastikan untuk memeriksa Liquidapsive. Di sana Anda akan menemukan contoh interaktif yang memungkinkan Anda bertukar di antara berbagai jenis layout halaman website.

Ada lebih banyak layout web dan istilah di luar sana yang saya dengar, tapi itu mencakup dasar-dasarnya. Jika Anda memiliki saran praktis yang ingin Anda tambahkan, atau jika Anda memiliki pertanyaan, silakan berbagi di komentar!

#Desain web

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.