GIF animasi menunjukkan apa yang terjadi di Invidious saat saya mempersempit jendela browser beberapa piksel.
Tata letak elemen pada halaman benar-benar berubah: tata letak tiga kolom asli tiba-tiba berubah menjadi tata letak satu kolom, dan hal pertama adalah konten kolom kecil yang terletak di tepi kiri dan berisi informasi yang sama sekali tidak penting.
Saya yakin saya bukan satu-satunya yang sering menemukan hal ini. Secara pribadi, saya suka ketika jendela browser saya cukup sempit, tetapi dalam sepuluh tahun terakhir, halaman web mulai bereaksi terhadap preferensi ini seolah-olah saya menginginkan versi halaman yang mobile, secara fungsional dipreteli. Ada masalah besar di sini, dan bukan hanya satu.
Gaslighting spasial
Salah satu konsep mendasar di balik desain Macintosh, antarmuka pengguna grafis yang benar-benar berpusat pada klien, adalah gagasan untuk mengatur interaksi manusia-mesin secara spasial saat bekerja dengan komputer. Pengguna dibebaskan dari kebutuhan untuk menghafal perintah teks untuk mengatur file pada disk, dan memberikan kesempatan untuk mengocok file sehingga terlihat visual dan - ini dia, wawasan - untuk mengingat posisi mereka, seolah-olah dalam ruang. Pengguna dapat mengingat di mana dia meletakkan file tersebut, dan tidak begitu penting apa nama file tersebut . Beginilah cara kami mengingat di mana kami meletakkan dompet, kunci, atau dokumen penting.
Ide tentang orientasi spasial ini sangat penting untuk desain antarmuka pengguna dan desain web pada khususnya. Saat pengguna mengunjungi situs Anda berulang kali, mereka secara bertahap mengetahui cara kerja semuanya di sini. Semakin banyak waktu yang Anda curahkan untuk mendesain situs Anda, semakin efisien pengguna dapat mengelolanya, dan semakin mereka akan menyukai situs Anda. Pernahkah Anda bertanya-tanya mengapa ada begitu banyak skandal terkenal di web yang terkait dengan desain ulang? Inilah jawaban Anda. Pengguna tidak suka jika upaya yang mereka lakukan untuk menguasai situs dicoret sesuai keinginan desainer, bahwa desainer hanya bosan dengan situs lama.
Inilah masalah yang saya alami dengan desain responsif. Penerapan desain yang paling responsif pada dasarnya seperti mendesain ulang situs Anda setiap kali pengguna mengubah ukuran jendela. Contoh paling mengerikan dari jenis ini adalah ketika bilah menu horizontal berubah menjadi bilah menu vertikal. Segala sesuatu yang berhasil diingat pengguna secara visual tentang lokasi tautan pada panel terbang ke pipa! Apakah Anda mengira opsi ini tersembunyi di sini? Tidak, dia di sana!
Inkonsistensi lintas situs
Tetapi bahkan jika pengguna tidak menyukai desain responsif, tidak ada cara untuk menyiasatinya. Banyak contoh dari apa yang disebut desain responsif diimplementasikan menggunakan kueri media menggunakan CSS - pada dasarnya pernyataan bersyarat yang memberi tahu browser untuk menerapkan sekumpulan aturan CSS saat kondisi tertentu terpenuhi, misalnya, jika lebar jendela browser melebihi atau tidak melebihi jumlah piksel yang ditentukan ... Jumlah pasti dalam kasus ini dipilih oleh perancang web; Oleh karena itu, dua desainer web yang berbeda hampir tidak pernah memilih lebar yang sama.
Saya rasa semua orang akan setuju bahwa pada PC desktop, kami lebih suka melihat sebagian besar halaman web dalam tata letak lebar penuh. Ada pengecualian jika versi halaman yang dipersempit lebih nyaman., tetapi mereka jarang, jika tidak diisolasi. Biasanya, bekerja dengan halaman web dengan lebar penuh jauh lebih baik dan lebih mudah.
Agar tidak harus berurusan dengan versi halaman web yang dipersempit, pengguna harus menyesuaikan sendiri lebar jendela browser, memastikan bahwa halaman tersebut pas di seluruh jendela. Namun, karena dua desainer web hampir tidak akan pernah menentukan lebar yang sama dalam kueri media mereka, tidak mungkin bagi pengguna untuk mencocokkan lebar jendela yang dijamin sesuai dengan versi lengkap dari halaman web mana pun, kecuali pengguna menyerah dan puas. mode layar penuh atau jendela yang terlalu lebar. Namun, penting bagi pengguna untuk tidak hanya memiliki akses ke versi penuh halaman web, tetapi juga untuk menyimpan banyak jendela dalam cakupan sekaligus, dan karena alasan ini lebar jendela individu harus dibatasi.
Tampaknya mengapa pengguna tidak menyesuaikan ukuran jendela jika mereka membuka halaman web yang membutuhkan jendela yang lebih lebar untuk melihatnya. Bagaimanapun, ini adalah bagaimana pengguna harus bertindak sebelum munculnya desain responsif, ketika dimungkinkan untuk beralih di antara halaman web dengan lebar tetap yang diberikan. Namun kenyataannya tidak sesederhana itu: pada halaman non-responsif, cukup jelas apakah Anda perlu mengubah ukuran jendela agar sesuai dengan keseluruhan halaman. Dan di halaman web yang responsif, tidak ada yang memberi tahu pengguna, “hei! Seluruh halaman tidak akan muat dengan jendela seperti milik Anda sekarang. " Tidak ada scrollbar atau kliping konten; paling banter (atau, saya kira, paling buruk) ada menu hamburger atau antarmuka aneh "mirip seluler" lainnya.
Apa yang harus dilakukan pengguna?
Ini menimbulkan pemikiran bahwa pengguna dapat memecahkan masalah ini dengan menonaktifkan dukungan untuk kueri media di browser. Kalau saja sesederhana itu! Akar masalahnya adalah bahwa ini adalah praktik umum di antara desainer web untuk menetapkan desain lebar penuh ke kueri media dan menyajikan versi seluler secara default . Dengan menonaktifkan kueri media, kami akan mendapatkan hasil yang berlawanan di halaman tersebut.
Akan lebih rasional untuk memaksa browser memberikan lebar yang dapat ditentukan pengguna yang sama ke stylesheet dan skrip di semua halaman web. Ini diinginkan, jika hanya untuk alasan privasi.
Solusi ideal adalah menyediakan kemampuan untuk mengidentifikasi kueri media (jika ada) yang akan mengaktifkan lebar penuh untuk situs, dan mengaktifkannya, sambil menonaktifkan semua kueri media lain yang terkait dengan pemilihan lebar jendela. Ini berpotensi dilakukan sebagai ekstensi browser menggunakan JavaScript yang mengurai semua kueri media di stylesheet, menghapusnya secara selektif sesuai kebutuhan.
Apa yang harus dilakukan perancang web?
Saya meninggalkan bagian ini untuk yang terakhir karena ini yang paling penting. Semua hal di atas membawa kita pada kesimpulan sederhana: desainer web perlu berpikir panjang dan keras tentang bagaimana menerapkan desain responsif .
Benar, di tingkat yang lebih tinggi, orang harus bertanya, apa arti umum dari desain responsif. Jelas, desain ini sangat berguna: pengguna modern mengakses Internet dari berbagai perangkat dengan lebar layar berbeda, dan masalah ini diselesaikan dengan bantuan desain responsif. Tapi mungkin masalah dengan desain responsif adalah generalisasi yang berlebihan dari solusi semacam itu. Ini dirancang untuk mendukung setiap ukuran layar yang mungkin, tetapi apakah layar benar-benar beragam? Sebaliknya, mereka, sebaliknya, distandarisasi dan dibagi menjadi beberapa kategori yang mudah diidentifikasi. Seperti yang berikut ini:
- PC Desktop / Laptop
- Tablet
- Smartphone
Bukankah akan jauh lebih nyaman bagi pengguna jika desain situs dilakukan secara terpisah untuk masing-masing ukuran layar ini? Kemudian pengguna dapat menghabiskan waktu untuk mempelajari antarmuka situs, karena akan terlihat konsisten di semua perangkat dengan jenis yang sama.
Saya tidak percaya saya mengatakan ini, tetapi mungkin lebih baik untuk kembali mendeteksi agen pengguna, dalam satu bentuk atau lainnya:
let mobile = navigator.userAgent.match(/Mobi/); let ipad = navigator.userAgent.match(/iPad/); let android = navigator.userAgent.match(/Android/); if (mobile && !ipad) this is a phone else if (ipad || android) this is a tablet
Kode di atas mungkin tidak lengkap, tapi menurut saya mencakup banyak hal dasar. Pastikan untuk menggunakan situs versi PC secara default, karena tidak semua browser PC mendukung JavaScript secara seragam, tetapi semua smartphone dan tablet mendukungnya.
Server kami dapat digunakan untuk pengembangan dan hosting situs web.
Daftar menggunakan tautan di atas atau dengan mengklik spanduk dan dapatkan diskon 10% untuk bulan pertama menyewa server dengan konfigurasi apa pun!
