Jumat, 09 Februari 2018

Adaptive atau Responsive Website yang Kamu Pilih?

Layout Halaman Adaptif

Screenshot dari tata letak halaman adaptif dengan browser berukuran 1440px dan 400px.

Tata letak halaman adaptif menggunakan kueri media CSS untuk mendeteksi lebar peramban dan mengubah tata letak yang sesuai. Tata letak adaptif akan menggunakan unit tetap seperti piksel, seperti tata letak statis, namun perbedaannya adalah bahwa pada dasarnya ada beberapa lebar tetap yang ditentukan oleh kueri media tertentu.

Permintaan media adalah ekspresi logika, dan bila digunakan dalam kombinasi dengan kueri media lainnya, mereka membentuk algoritma dasar. Jadi misalnya, tata letak halaman yang adaptif bisa dikatakan seperti, "Jika lebar browser 500 piksel, tetapkan wadah konten utama menjadi lebar 400 piksel. Jika browser berukuran lebar 1000 piksel, maka atur wadah konten utama menjadi lebar 960 piksel. "Di luar wadah konten utama, bagian lain halaman mungkin berubah lebar, tempat bertukar, atau dihapus. Misalnya, layout dua kolom bisa menjadi layout kolom tunggal jika browser terlalu sempit.

Tata letak adaptif adalah solusi stop-gap yang bagus jika tata letak statis lawas perlu dikonversi untuk mendukung perangkat mobile. Mereka juga biasanya memerlukan waktu pengembangan kurang dari tata letak yang responsif. Kelemahan utama adalah bahwa lebar perangkat di antara titik pemisah eksplisit sering kali kurang ideal, dengan ruang terlalu banyak atau ruang yang tidak cukup.

Layout Halaman Responsif

Screenshot dari tata letak halaman yang responsif dengan browser berukuran 1440px dan 400px.

Tata letak halaman yang responsif menggunakan unit relatif dan kueri media, seolah-olah menggabungkan gagasan tata letak yang cair dan tata letak yang adaptif. Saat browser bertambah atau berkurang lebarnya, tata letak yang responsif akan lentur seperti tata letak yang cair. Namun, jika browser melampaui lebar tertentu yang didefinisikan oleh breakpoint query media, maka tata letaknya akan berubah lebih dramatis untuk mengakomodasi lebar lebar atau sempit.

Biasanya desain responsif dibangun menggunakan pendekatan mobile-first. Itu berarti tata letak mobile dirancang terlebih dahulu, dan kemudian saat browser menjadi lebih luas pada tablet dan desktop, perancang akan menemukan cara untuk memperluas tata letak mobile. Hal ini cenderung menciptakan pengalaman yang lebih baik secara keseluruhan, karena lebih mudah untuk memperluas desain daripada mencoba dan menyederhanakan tata letak yang besar untuk layar ponsel.

Tidak ada komentar:

Posting Komentar