12 Commits Just to Stick a Badge on a Mascot's Chest

Menumpuk Stempel Sertifikasi di Atas Maskot: Nggak Semudah Kelihatannya

Waktu ngecek preview halaman versi bahasa Inggris, saya langsung mengerutkan dahi. Ada stempel sertifikasi ISO yang ditempel paksa di atas gambar maskot perusahaan. Permintaannya memang spesifik dari tim desain: mereka ingin badge iso stamp di atas maskot en supaya langsung terlihat kredibel begitu pengunjung buka halaman utama. Di file desain, tampilannya memang rapi dan estetik. Stempel kecil itu pas di pojok kanan atas, nggak mengganggu karakter utama maskot sama sekali. Tapi begitu saya terjemahkan ke dalam kode, realitanya jauh dari ekspektasi.

Jebakan CSS Absolut

Awalnya saya pikir ini cuma masalah CSS sepele. Logikanya sederhana, kan? Tinggal kasih position: absolute, atur top dan right, lalu naikkan z-index-nya. Selesai. Saya langsung eksekusi ide itu di branch lokal tanpa mikir panjang. Tapi begitu saya resize browser ke ukuran layar ponsel, hasilnya malah bikin sakit mata. Stempel itu malah nutupin sebagian besar wajah maskot. Karena saya pakai ukuran pixel mati untuk lebar stempel, dia kelihatan kegedean banget di layar kecil. Di desktop mungkin oke, tapi di mobile, komposisinya hancur total.

Masalah yang Nggak Kelihatan

Ternyata, menumpuk elemen visual nggak cuma soal siapa yang ada di lapisan paling atas. Ada dua masalah besar yang nggak saya sadari di awal. Pertama, rasio aspek. Maskot di versi desktop punya ruang kosong di pojok yang pas buat ditempel stempel. Tapi di versi mobile, gambar maskot seringkali di-crop atau diskalakan ulang, sehingga ruang kosong itu hilang. Stempel yang posisinya absolut tiba-tiba jadi melayang di tempat yang salah, atau malah menutupi elemen penting. Kedua, aksesibilitas. Ketika saya ngecek pakai screen reader, urutan bacanya jadi aneh. Browser bakal membaca alt text dari stempel dulu, baru kemudian alt text dari maskot, atau sebaliknya, tergantung urutan DOM-nya. Ini bikin konteksnya jadi rancu buat pengguna yang mengandalkan teknologi bantu. Mereka nggak akan tahu bahwa stempel itu adalah atribut tambahan, bukan bagian dari nama atau identitas maskot itu sendiri.

Solusi yang Lebih Rapi

Saya putuskan buat ngubah pendekatannya dari nol. Daripada menumpuk dua file gambar terpisah secara sembarangan, saya bungkus keduanya dalam satu kontainer yang lebih terkontrol. Untuk proyek yang mengutamakan skalabilitas, solusi terbaik adalah menggunakan SVG. Dengan SVG, kita bisa mengelompokkan elemen maskot dan stempel dalam satu tag grup, lalu mengatur posisinya secara relatif terhadap viewBox. Ini menjamin stempel selalu berada di posisi yang tepat, nggak peduli seberapa besar atau kecil SVG itu dirender. Kalo proyeknya nggak memungkinkan pakai SVG dan harus tetap pakai HTML biasa, alternatifnya adalah menggunakan CSS modern dengan proporsi yang dinamis. Saya pakai aspect-ratio pada kontainer pembungkus, lalu menempatkan stempel menggunakan persentase, bukan pixel mati. ``css .mascot-container { position: relative; aspect-ratio: 1 / 1; max-width: 400px; margin: 0 auto; } .iso-badge { position: absolute; top: 5%; right: 5%; width: 25%; height: auto; z-index: 2; } ` Dengan pengaturan persentase seperti top: 5% dan width: 25%, stempel akan otomatis menyesuaikan ukurannya mengikuti kontainer induknya. Ini memastikan stempel tetap proporsional dan nggak menutupi bagian vital dari maskot, bahkan saat layar di-resize secara ekstrem. Jangan lupa soal aksesibilitas. Ini bagian yang sering banget dilewatin oleh pengembang, termasuk saya di awal tadi. Saya tambahkan role="img" dan aria-label pada kontainer pembungkus tersebut. Isinya harus deskriptif, kayak "Maskot perusahaan dengan lencana sertifikasi ISO di pojok kanan atas". Selain itu, saya kosongkan atribut alt pada gambar maskot utama dan isi alt pada gambar stempel dengan deskripsi yang singkat. Struktur HTML-nya jadi lebih bermakna untuk mesin pencari dan teknologi bantu. `html

` Dengan begini, screen reader nggak bakal bingung membaca elemen yang saling tumpang tindih. Pengguna yang mengandalkan teknologi bantu tetap dapat memahami konteks visualnya secara utuh tanpa harus menebak-nebak hubungan antara kedua gambar tersebut.

Pertimbangan Jangka Panjang dan Lokalisasi

Mungkin ada yang bertanya, kenapa nggak sekalian saja digabung jadi satu file gambar statis? Toh lebih gampang dan nggak perlu repot dengan CSS atau SVG. Memang sih, secara teknis itu paling cepat dan langsung beres. Tapi bayangkan kalau tahun depan sertifikasinya berubah dari ISO 9001 ke ISO 27001. Kita bakal terpaksa buka ulang file desain asli, edit, ekspor, dan upload ulang ke server. Belum lagi karena ini spesifik untuk halaman versi bahasa Inggris, ada detail tambahan yang perlu diperhatikan. Badge sertifikasi seringkali mengandung teks. Jika kita pakai file gambar yang sama untuk semua bahasa, teks di dalamnya bakal terlihat aneh di halaman yang seharusnya berbahasa Inggris. Solusinya, kita bisa punya dua varian file badge, atau gunakan SVG di mana teksnya bisa dipisahkan. Misalnya, menyediakan iso-badge-en.svg untuk versi Inggris dan iso-badge-id.svg` untuk versi Indonesia. Memisahkan lapisan presentasi dari aset inti adalah keputusan arsitektur kecil yang bikin hidup kita sebagai pengembang jauh lebih tenang di masa depan. Kita bisa ngubah satu elemen tanpa harus menyentuh elemen lainnya. Proses menangani iso stamp di atas maskot en ini mengajarkan saya bahwa detail kecil dalam penumpukan elemen visual punya dampak besar. Bukan cuma soal estetika, tapi juga bagaimana kita menghormati pengguna yang mengakses situs kita dengan cara yang berbeda. Kadang, solusi yang paling elegan bukan yang paling cepat diketik, tapi yang paling siap menghadapi perubahan di masa depan.