Kami memiliki awal yang baik dalam desain responsif. Menu pada ukuran layar terkecil dipecah menjadi kisi 2 × 4. Ini cocok dengan baik di layar, tetapi antara itu dan branding itu membutuhkan banyak ruang. Kami membukanya di simulator iOS dan melihat bahwa dalam beberapa kasus Anda tidak dapat melihat konten yang sebenarnya sama sekali.
Kami melihat beberapa sumber daya tentang cara menangani pola navigasi, seperti artikel Brad Frost's Responsive Navigation Patterns dan Jason Weaver's Off Canvas. Kami juga melihat demo keren di MDN yang disebut Paperfold.
Kami menambahkan tautan tambahan ke navigasi yang pada akhirnya kami sebut "Navigasi 'n' Penelusuran" yang akan bertindak sebagai tombol untuk menampilkan navigasi seluler saat diketuk. Melalui breakpoint kueri media, kami menyembunyikan dan menampilkan tombol ini sesuai kebutuhan.
Pengalihan navigasi sebagian besar akan kami tangani dengan JavaScript. Sedikit berisiko karena mengasingkan orang-orang di layar kecil dengan JavaScript dinonaktifkan - tetapi saya hanya akan melakukannya. Angka itu sangat kecil (lebih kecil dari desktop tanpa JavaScript, yang tentunya kurang dari 1%) sehingga saya hanya akan menyebalkan dan menjalankannya.
Yang benar-benar kami lakukan dengan JavaScript adalah mengubah nama kelas. Itulah yang saya anggap sebagai pengembangan CSS yang digerakkan oleh negara. Semua kendali atas apa yang ditampilkan dan kapan serta bagaimana ditangani dengan CSS. JavaScript hanya menyetel kelas untuk menyatakan keadaan saat ini.
Kami menghabiskan banyak waktu untuk mengutak-atik menambahkan di "paperfold" CSS, membuatnya bekerja dengan benar, dan kemudian menempatkan pencarian di celah yang kami buat di atas konten utama melalui beberapa padding.
Pada akhirnya, ukuran dan posisinya disesuaikan agar lebih pas dan tombol tutup kecil ditambahkan. Saya bolak-balik di kepala saya dengan menyediakan UI untuk mengubah status pada hal-hal seperti ini. Di satu sisi, sekarang pengguna telah mengungkapkan navigasi, mengapa mereka harus menutupnya? Mereka sudah melihatnya. Jika mereka tidak ingin menggunakannya, mereka bisa langsung melewatinya. Di sisi lain, saya merasa agak menjengkelkan ketika saya tidak dapat mengubah status seperti ini di aplikasi lain (untuk beberapa alasan) jadi saya cenderung memberikan mekanisme untuk melakukannya.
