Anatomi Footer Website Korporat yang Tidak Butuh Tinggi Manual

Jam 00:46 saya push commit f4091ea, refactor komponen site-footer.tsx di sebuah website korporat. Layar cuma ada monitor dan cangkir kopi. Awalnya saya kira bikin kolom brand yang lebih tinggi dari kolom sebelahnya butuh perhitungan tinggi manual, mungkin sedikit JavaScript buat ngukur elemen tetangga biar sejajar di dasar. Saya sempat serius mikir itu. Tebakan saya meleset jauh.

Yang saya miss: grid punya nilai awal align-items: stretch. Semua kolom otomatis sama tinggi mengikuti kolom tertinggi, tanpa satu baris pun pengaturan tinggi. Tinggal ubah kolom brand jadi flex flex-col, lalu beri mt-auto pada paragraf baris perusahaan. Elemen itu langsung mentok ke dasar kolom. Jangkar rapi tanpa nilai tinggi yang dikunci mati.

Cara ngeceknya gampang. Buka inspector, klik grid containernya, lihat computed style: kalau align-items masih stretch, semua anak grid harus sama tinggi. Kalau ternyata kolom-kolomnya jenjang sendiri-sendiri, ada yang salah pasang, misal align-self menimpa satu item, atau containernya sebenarnya flex dengan align diubah. Gejala ini yang bikin orang cepat menyimpulkan butuh JavaScript, padahal tinggal balikin default.

Satu catatan lagi dari riset soal kaki halaman: jangan sampai teksnya jadi korban. Font mungil plus kontras lemah bikin bagian ini susah dibaca, dan orang jadi kapok balik ke sana. Ukuran yang layak dan warna yang cukup kontras itu murah, dampaknya panjang.

Lebar Kolom yang Nggak Samarata

Dulu saya pikir desain kaki halaman yang seimbang berarti semua kolom sama lebar. Asumsi lama itu jebol pas susun hierarki informasi: logo, badge sertifikasi, dan identitas perusahaan butuh ruang napas lebih lega daripada daftar tautan yang padat.

Jadi saya pakai nilai arbitrer Tailwind: lg:grid-cols-[1.4fr_1fr_1fr_1fr]. Blok brand dapet rasio 1,4 banding 1 dibanding tiap kolom link, jadi ada bobot visual ekstra di sisi kiri. Heading kolom turun ke text-xs dengan tracking-widest biar nggak bersaing dengan konten utama. Di layar menengah grid tetap dua kolom, dan di ponsel semuanya menumpuk satu kolom penuh, urutan tetap brand dulu baru tautan.

Logika di Balik Struktur Ini

Ini bukan cuma soal estetika. Pedoman Nielsen Norman Group menyebut kaki halaman sebagai tambahan bebas biaya bagi pengalaman pengguna [1]: tidak pernah mengganggu alur utama, tapi siap pakai saat orang butuh kontak, alamat, atau dukungan. Peneliti mereka juga nyatain orang sering langsung gulung ke bawah buat cari info kontak. Mengulang navigasi utama di bagian ini, yang sering disebut pola doormat, praktik yang sah dan membantu orientasi.

Secara teknis, mt-auto bekerja karena tidak ada justify-self pada sumbu utama flexbox [3]; margin otomatis memang jalur baku buat menyalip posisi item individual. Sementara elemen <footer> yang nempel langsung di body berlaku buat seluruh halaman menurut dokumentasi MDN [2], tempat yang pas buat copyright dan tautan terkait.

Utility Bar: Copyright Kiri, Sertifikasi Kanan

Lapisan terakhir ada bilah utilitas dengan flex justify-between. Kiri hak cipta, kanan chip sertifikasi ISO. Di layar kecil baris ini menumpuk berkat flex column dengan gap, copyright tetap kebaca dulu sebelum chip-chip. Pengelompokan pakai daftar dan elemen blok yang jelas juga membantu teknologi bantu membaca struktur halaman [5].

Pakai nilai arbitrer kayak grid-cols-[<value>] kadang dianggap jalan pintas yang kurang rapi. Dokumentasi Tailwind justru mendukungnya sebagai cara valid untuk dapat kontrol presisi tanpa nulis CSS kustom terpisah [4]. Semua aturan layout tetap terkonsentrasi di satu file; ngecek atau ngubah desain di masa depan jadi gampang.

Yang saya bawa pulang dari refactor malam itu: sebelum nambah alat baru, cek dulu perilaku default yang udah ada. Stretch plus margin otomatis sudah menangani pola yang dulu saya kira butuh skrip. Satu standar baru di project ini: nggak ada lagi tinggi kolom yang dikunci mati.

Sources

[1] Nielsen Norman Group: Footers

[2] MDN: <footer> element

[3] MDN: Aligning Items in a Flex Container

[4] Tailwind CSS: grid-template-columns

[5] W3C WAI: Content Structure