Beberapa bulan lalu legawa.com berganti logo: matahari di atas dua lapis awan. Wajahnya sudah baru, tetapi rumahnya masih berantakan. Beranda berupa daftar judul panjang tanpa gambar, sebelas rubrik ditumpuk dalam satu kolom, dan tombol cari hanya berupa ikon kecil yang mudah terlewat. Siang ini saya akhirnya membereskannya.
Tulisan ini catatan tentang apa saja yang berubah, dari tampilan awal sampai tampilan yang Anda lihat sekarang. Sebagian untuk arsip pribadi, sebagian lagi untuk pembaca yang mungkin bingung kenapa letak beberapa hal berpindah.
Apa yang Kurang dari Tampilan Lama
Tema Archivist yang dipakai blog ini sebenarnya sudah saya sukai sejak awal. Nuansa mesin ketik di atas kertas cokelat muda itu cocok dengan blog yang lebih banyak berisi catatan. Masalahnya ada di cara isi disusun:
- Beranda hanya menampilkan judul dan tanggal. Tidak ada gambar, sehingga semua tulisan terlihat sama pentingnya.
- Sebelas rubrik ditumpuk berurutan dalam satu kolom panjang, jadi pembaca harus menggulir jauh untuk menemukan rubrik di bawah.
- Tautan kategori di bagian atas hanya melompat ke bawah halaman, bukan membuka halaman rubriknya.
- Pencarian hanya berupa ikon kecil, dan di halaman tulisan tidak ada jalan pintas ke rubrik lain.
- Teks di beberapa tombol nyaris hilang saat disorot, karena latarnya berubah menjadi krem sementara teksnya tetap krem.
Beranda: dari Daftar Panjang ke Kartu
Beranda sekarang dibuka dengan sapaan singkat Selamat singgah. di sisi kiri, lengkap dengan kotak pencarian yang langsung terlihat dan ikon jejaring sosial. Di sisi kanan ada tulisan terbaru dalam kartu besar bergambar.
Di bawahnya berderet enam tulisan terbaru berikutnya dalam bentuk kartu bergambar, tiga per baris, lalu bagian Buku Pilihan. Bagian paling bawah, Telusuri per Rubrik, menggantikan kolom panjang tadi dengan kisi kartu. Setiap kartu memuat nama rubrik, satu kalimat deskripsi, tiga judul terbaru, dan tautan ke semua tulisan di rubrik itu. Kartu terakhir berisi ajakan untuk bertegur sapa lewat halaman Kontak atau Telegram.
Header dan Footer yang Ikut ke Mana-Mana
Menu utama tetap tiga butir, yaitu Beranda, Tentang, dan Kontak. Tanda kurung siku khas tema lama saya pertahankan, hanya kini berjajar mendatar dan ditemani tombol cari. Tepat di bawahnya ada bilah rubrik tipis berisi sebelas tautan langsung ke halaman kategori. Bilah ini muncul di semua halaman, jadi pembaca yang masuk dari mesin pencari tetap bisa melompat ke rubrik lain tanpa harus kembali ke beranda. Di ponsel, bilah itu bisa digeser ke samping.
Footer yang dulu hanya berisi satu baris tautan kini terbagi menjadi empat kolom: tentang blog beserta ikon jejaring sosial, daftar rubrik, halaman-halaman penting, dan kebijakan situs. Di baris paling bawah ada tautan kecil untuk kembali ke atas.
Halaman Tulisan, Rubrik, dan Pencarian
Halaman tulisan tunggal kini dibuka dengan judul besar, lalu gambar unggulan selebar halaman. Kolom teksnya sengaja dibatasi sekitar 44rem agar baris tidak terlalu panjang untuk mata. Setelah isi tulisan ada tag, tombol berbagi, lalu dua kartu navigasi ke tulisan sebelumnya dan selanjutnya. Kedua kartu itu kini memenuhi lebar halaman, satu di kiri dan satu di kanan, dan seluruh kartunya bisa diklik. Di bawahnya menyusul Tulisan Serupa, tiga kartu Baru Terbit, lalu kolom komentar.
Halaman rubrik dan arsip kini menampilkan judul rubrik beserta deskripsinya, disusul daftar tulisan dalam bentuk kartu mendatar dengan gambar kecil dan ringkasan. Halaman pencarian dan halaman 404 juga mendapat kotak pencarian yang langsung terlihat. Halaman 404 bahkan menawarkan tulisan terbaru, supaya pembaca yang tersesat tidak langsung pergi.
Tipografi: Almendra Display
Perubahan yang paling terasa barangkali urusan huruf. Judul H1 di seluruh situs, baik judul tulisan, halaman, maupun rubrik, kini memakai Almendra Display, fonta bergaya kaligrafi abad pertengahan yang terasa pas untuk blog yang banyak bercerita tentang dunia fantasi. Karena garis Almendra tipis, saya pertebal sedikit supaya tetap terbaca di atas latar kertas.
Fonta yang sama dipakai untuk lettrine, huruf kapital besar setinggi tiga baris di awal paragraf pertama setiap tulisan. Isi tulisan tetap memakai fonta mesin ketik yang menjadi ciri tema Archivist.
Perbaikan Kecil yang Ternyata Terasa
- Kontras tombol. Tombol berlatar gelap kini berbalik menjadi terang dengan teks hitam saat disorot, sedangkan tombol bergaris berubah menjadi hitam dengan teks krem. Navigasi bab di seri webnovel jadi tetap terbaca.
- Navigasi dengan keyboard. Tombol yang sedang aktif mendapat garis putus-putus, jadi pembaca yang bernavigasi dengan tombol Tab tahu posisinya.
- Halaman Tentang. Isinya ditulis ulang menjadi dua bagian, tentang penulis dan tentang blog ini, lengkap dengan daftar rubrik dan jadwal rubrik rutin dari Senin sampai Minggu.
- Jejaring baru. Mastodon dan Tumblr (keduanya @haridiva) kini muncul di beranda, footer, dan halaman Tentang.
Ringkasan Sebelum dan Sesudah
| Bagian | Sebelum | Sesudah |
|---|---|---|
| Beranda | Daftar judul tanpa gambar, rubrik ditumpuk satu kolom | Sapaan, kartu bergambar, kisi rubrik berisi tiga tulisan terbaru |
| Header | Menu bertumpuk dalam tanda kurung | Menu mendatar, tombol cari, bilah rubrik di semua halaman |
| Footer | Satu baris tautan | Empat kolom: blog, rubrik, halaman, kebijakan |
| Tulisan tunggal | Meta di kolom samping, isi di kolom kanan | Judul besar, gambar lebar, kolom baca 44rem, kartu navigasi |
| Rubrik dan pencarian | Daftar judul dan tanggal | Kartu mendatar bergambar dengan ringkasan |
| Tipografi | Seluruhnya fonta mesin ketik | Almendra Display untuk H1 dan lettrine |
| Tombol | Teks hilang saat disorot | Warna berbalik, tetap terbaca |
Di Balik Layar
Seluruh perubahan ini saya kerjakan bersama Claude (Anthropic). Claude menyunting templat blok dan CSS situs lewat konektor WordPress.com, lalu memeriksa hasilnya langsung di peramban Chrome. Saya cukup menyampaikan apa yang terasa kurang, misalnya navigasi yang berdempetan atau tombol yang tidak terbaca, lalu melihat perbaikannya beberapa menit kemudian.
Tidak ada plugin tambahan yang dipasang. Semua tata letak memakai blok bawaan WordPress, dan gaya tambahannya cukup beberapa baris CSS khusus. Versi lama dari setiap templat masih tersimpan di riwayat revisi, jadi kalau ada yang ternyata kurang cocok, rumah lama masih bisa dipulihkan.
Penutup
Tampilan di ponsel dan di peramban Firefox mungkin masih menyisakan satu-dua hal yang belum pas. Kalau Anda menemukannya, kabari saya lewat halaman Kontak atau tinggalkan komentar di bawah. Terima kasih sudah singgah, dan semoga rak-rak di rumah ini kini lebih mudah dijelajahi.
— Cahya
Tinggalkan Balasan