Membangun Ulang Situs Ini di Chyrp Lite
Ditulis oleh Gustama Dimas
Situs ini berjalan di Chyrp Lite — mesin blog self-hosted kecil yang melakukan kira-kira apa yang saya butuhkan dan tidak lebih. Sudah cukup lama berdiri dengan tema bawaan, yang sepenuhnya memadai dan sepenuhnya anonim. Akhirnya saya tulis ulang.
Yang salah
Tidak banyak, jujur saja. Temanya bekerja. Tapi tiga hal mengganggu saya.
Pertama, navigasinya mendaftar sepuluh halaman dalam satu daftar rata, dan tujuh di antaranya hanya ada untuk meng-embed layanan di dalam iframe. Beberapa embed itu menunjuk endpoint yang tidak lagi menjawab, atau menolak di-frame sama sekali. Sidebar menawarkan tautan ke panel yang rusak.
Kedua, tata letaknya satu kolom sempit dengan sidebar dan tanpa rasa situs itu untuk apa. Pengunjung mendarat dan tahu nama saya. Itu saja.
Ketiga, kontennya daftar fakta tanpa jalan masuk.
Yang saya ubah
Homepage yang sungguhan. Alih-alih menjatuhkan pengunjung langsung ke indeks blog, sekarang ada halaman depan: siapa saya, di mana, apa yang saya kerjakan, dan empat cara masuk lebih dalam. Ia menjawab pertanyaan yang situs lama biarkan menggantung.
Navigasi yang mencerminkan struktur sebenarnya. Halaman per-layanan hilang dari menu. Mereka masih ada — setiap tautan lama tetap bisa dibuka — tapi halaman Homelab sekarang menautkan langsung ke tiap layanan, dengan deskripsi satu baris tentang apa itu. Tujuh panel iframe menjadi satu indeks yang terbaca.
Tema yang punya pendapat. IBM Plex Sans dan Plex Mono, di-host sendiri ketimbang diambil dari CDN. Monospace disisihkan untuk label, metadata, dan apa pun yang terbaca sebagai data. Paletnya off-white hangat dengan satu aksen tembaga, dipakai untuk tautan dan hampir tidak untuk apa pun lagi.
Daftar layanan ditata seperti rak: nomor indeks, nama, fungsinya, dan apakah ia terbuka ke dunia atau hanya terjangkau di LAN. Kolom terakhir itu yang jujur — ia memberi tahu Anda sebelum mengklik apakah tautannya akan meminta kata sandi.
Aksesibilitas bukan tambahan
- Tautan lompat untuk pengguna keyboard, karena sidebar muncul lebih dulu di markup
- Garis fokus yang terlihat di setiap elemen interaktif, dalam warna aksen
prefers-reduced-motiondihormati — tanpa transisi, tanpa smooth scrolling, untuk siapa pun yang memintanyaprefers-contrast: moremendorong batas dan teks ke hitam penuh- Stylesheet cetak, karena halaman-halaman ini layak disimpan di atas kertas
Yang akan saya lakukan berbeda
Tulis kontennya sebelum temanya.
Saya menghabiskan waktu mendesain komponen — hero, status strip, tabel rak — lalu harus kembali dan menulis ulang teks halaman agar cocok. Desainnya jadi baik-baik saja. Urutannya yang terbalik.
Lain kali: putuskan apa yang halaman perlu katakan, lalu putuskan bagaimana ia perlu terlihat.