Banyak halaman HTML kecil bisa dirangkai dengan navigasi untuk interaksi

• Pendekatan (L)ots of (L)ittle ht(M)l page(s) menggantikan interaksi di dalam halaman berbasis JavaScript dengan perpindahan di antara banyak halaman HTML kecil
• Interaksi dibangun sebagai navigasi antarhalaman HTML, ditingkatkan di lingkungan modern dengan CSS view transitions, dan hanya menambahkan sedikit JavaScript saat benar-benar diperlukan
• Menu pada blog bukan UI yang dibuka dengan JavaScript, melainkan berpindah ke halaman khusus menu dengan mengikuti tautan <a href="/menu/">
• Menutup menu pada dasarnya juga berupa tautan ke /, tetapi jika ada document.referrer, JavaScript akan menjalankan history.back() agar item buka/tutup menu tidak menumpuk di riwayat kunjungan
• Dengan mengandalkan fitur dasar browser yaitu perpindahan tautan, pendekatan ini tetap berfungsi di perangkat lama, browser lama, dan lingkungan dengan JavaScript dinonaktifkan; semakin kecil ukuran halaman dipertahankan, semakin cepat dan tangguh interaksinya

---

Cara implementasi menu dan hasil desain

• Membuka dan menutup sama-sama ditangani dengan tautan

  • Pada halaman biasa ada tautan menuju halaman menu, dan di halaman menu tautan itu berubah menjadi “X” yang berfungsi untuk menutup menu
  • Aksi menutup pada dasarnya juga berupa tautan ke /, tetapi jika ada document.referrer, JavaScript akan menjalankan history.back() agar entri buka/tutup menu tidak ditambahkan ke riwayat browser
  • Implementasi yang disederhanakan adalah sebagai berikut

    <!-- Normal page -->
    <nav>
      <a href="/menu/">
        <svg>...</svg>
      </a>
    </nav>
    
    <!-- Menu page -->
    <nav>
      <a href="/" onclick="document.referrer ? history.back() : window.location.href = '/'; return false;">
        <svg>...</svg>
      </a>
    </nav>
    

• Membedakan kunjungan langsung dan perpindahan internal

  • Dengan document.referrer, halaman menu dapat membedakan apakah pengguna datang lewat perpindahan internal di dalam blog atau lewat kunjungan langsung seperti mengetik URL
  • Jika berasal dari perpindahan internal, history.back() yang bermakna bisa dijalankan; jika kunjungan langsung, maka berpindah ke /

• Pendekatan ini membentuk desain

  • Ini solusi yang tampak sederhana, tetapi perlu mempertimbangkan hakikat navigasi, interaksi yang melintasi banyak halaman, dan cara menjaga ukuran halaman tetap kecil secara bersamaan
  • Ukuran halaman harus dijaga tetap kecil agar interaksi tetap cepat, tangguh, dan mudah dipahami secara intuitif
  • Jika browser dipandang bukan sebagai runtime untuk menjalankan, mengambil, mengompilasi, lalu menampilkan kode arbitrer, melainkan sebagai alat untuk menjelajahi dokumen, kita bisa membuat situs web yang jauh lebih sederhana daripada yang biasanya diarahkan oleh berbagai alat

[GN⁺]

Komentar Lobste.rs

• Biasanya saya suka pendekatan yang selalu merespons dengan HTML, tetapi untuk hal seperti menu saya tidak begitu yakin
  Saya penasaran dengan pendapat pakar aksesibilitas tentang mana yang lebih baik antara elemen yang bisa di-toggle dan perpindahan halaman penuh untuk membuka menu
  Di sini Popover API terasa seperti solusi yang lebih baik, karena bisa menyediakan menu tanpa JavaScript tanpa perlu round-trip penuh
  Selain itu, saya setuju dengan sebagian besar poin bahwa kita tidak perlu takut pada perpindahan halaman. Sekarang bahkan navigasi ala SPA pun hampir selalu tidak terlalu sulit dibuat aksesibel di situs SSR maupun statis

  • Saya bukan pakar aksesibilitas, tetapi sebagai orang yang memasang NVDA untuk pengembangan web, dari sisi pengalaman pengguna saya tidak merasakan perbedaan besar
    Perpindahan halaman memang mengatur ulang posisi saat ini, tetapi jika tujuannya memang membuka menu dan Anda benar-benar sampai ke menu, keduanya terasa cukup mirip
    Meski begitu, seperti halnya bagi orang yang bukan pengguna screen reader, membuka menu lalu dipindahkan ke halaman baru tetap terasa cukup aneh
  • Kata kuncinya adalah can, bukan should. Kalau halaman HTML cocok untuk interaksi, pakailah itu; kalau cara lain lebih cocok, pakailah yang itu
    Misalnya, kalau ditanya apakah status buka/tutup suatu komponen sebaiknya dibuat sebagai dua halaman HTML yang berbeda, atau memakai tag <details>, tentu yang kedua
    Demikian juga, memakai Popover API sepenuhnya tidak masalah. Intinya adalah menghindari kebutuhan JavaScript untuk interaksi di dalam halaman, bukan memaksakan navigasi HTML multi-halaman

• Pendekatan yang ditunjukkan memuat menu secara dinamis dengan JavaScript dan onclick, jadi ada latensi dan satu titik data tambahan dalam perjalanan pengguna
  Sebagai gantinya, menu bisa dimasukkan ke setiap halaman lalu ditampilkan atau disembunyikan dengan elemen <details> atau selektor CSS :focus-within
  https://nlnet.nl bekerja dengan cara seperti ini

• Pendekatan yang dijelaskan sebenarnya tidak bekerja dengan benar. Jika JavaScript dimatikan lalu Anda membuka sebuah artikel blog dan membuka maupun menutup menu, Anda akan dibawa ke halaman utama (/), bukan kembali ke artikel semula
  Agar tombol tutup memiliki tautan yang benar, menu harus dirender secara dinamis dari backend; tanpa itu pendekatan ini tidak benar-benar berlaku
  Secara pribadi, saya lebih memilih Popover API kalau memungkinkan. Dengan begitu, semuanya bisa dirender statis tanpa backend

  • Tautan pada ikon X di menu mengarah ke https://blog.jim-nielsen.com/, tetapi saat JavaScript aktif, handler onclick tampaknya mencegat navigasi

    document.referrer  
      ? history.back()  
      : window.location.href = '/';  
    return false;  
    

    Karena ini mengarahkan ke halaman yang berbeda dari yang tertulis di href, ini adalah pengalaman pengguna yang buruk. Saya sering mengecek tujuan tautan dengan mengarahkan mouse ke atasnya, jadi rasanya tidak menyenangkan kalau seperti ini menipu saya

• Di satu sisi saya sangat menyukainya. Hanya dengan HTML, ternyata kita bisa melakukan banyak hal dengan cara yang lebih mulus dan sederhana daripada JavaScript
  Di sisi lain, pendekatan ini tampaknya terutama cocok untuk seluler. Untuk halaman desktop, saya akan berharap menu selalu terlihat atau muncul sebagai pop-out, bukan mengharuskan perpindahan halaman
  Kalau begitu, apakah sekarang kita perlu dua set halaman untuk tiap browser

  • Sebaliknya, di seluler dengan koneksi yang tidak stabil, Anda harus pindah dulu ke menu lalu pindah lagi ke tujuan akhir
    Gesekannya jadi dua kali lipat
  • Sepertinya Anda tergolong cukup muda. Dua puluh atau tiga puluh tahun lalu, semua situs web bekerja seperti ini, dan HTML memang sampai taraf tertentu dirancang untuk digunakan seperti itu
    JavaScript lebih mirip hasil yang tidak disengaja
    Saya heran kalau ini terasa lebih sulit atau lebih rumit daripada solusi JavaScript apa pun. Ini jelas cara paling sederhana dan paling mudah untuk membuat situs web

• Saya kurang suka cara navigasinya, tetapi saya menyukai efek transisinya, dan saya tidak tahu sebelumnya bahwa ini memungkinkan
  Saya bahkan menerapkannya ke situs saya yang memakai generator statis C++ buatan sendiri dan pustaka template: https://vittorioromeo.com/
  Menurut saya ini sangat cocok terutama untuk pengalih tema gelap/terang

• Di desktop, mengklik “menu” lalu dipindahkan ke halaman lain terasa tidak enak. Ada refresh halaman penuh, dan itu cukup mengganggu karena berbeda dari harapan
  Bagi saya pribadi, ini memutus alur membaca dan alur berpikir. Saat mengklik tautan ke situs lain, rasanya seperti meninggalkan ruangan sehingga saya memang siap meninggalkan ruangan sebelumnya, tetapi kalau ini terjadi saat membuka menu, rasanya seperti saya mendatangi pintu lalu tiba-tiba berada di ruangan yang sama sekali berbeda, jadi terasa tidak nyaman
  Sejujurnya idenya bagus, tetapi pengalaman memakainya tidak enak
  Dan saya juga tidak tahu efek transisi yang dimaksud itu yang mana. Di lingkungan saya, saat menekan tombol Menu, yang terjadi hanya halaman Menu dimuat seperti biasa

  • View Transition antar-dokumen belum berfungsi di Firefox
    Mungkin juga tidak berfungsi di browser lain, tetapi browser utama saya adalah Librewolf, fork dari Firefox
    Di Chromium efek transisinya terlihat

• Ide yang menarik, tetapi saya penasaran bagaimana ini akan bekerja di desktop
  Menu satu halaman penuh terasa agak berlebihan, jadi pendekatan mengganti seluruh halaman tampaknya kurang cocok

• Tidak ada penyebutan preload untuk mengurangi jeda saat memuat halaman menu
  Saya penasaran seberapa baik ini akan bekerja kalau dipakai

  • Anda juga perlu menambahkan header cache yang benar. Di sini kemungkinan besar header expires sederhana saja sudah cukup
    Dengan begitu tidak perlu lagi memeriksa ulang ke server sebelum menampilkannya, jadi akan terasa sangat cepat

• Beberapa tahun lalu saya melihat permainan teks buatan @misty yang menggunakan tautan sederhana sebagai interaksi untuk memberi ilusi pilihan
  HTML yang sederhana dan narasi yang kuat terasa sangat membekas