better-footers

Better Footers

Chrome bottom of the page. Choose one type. Top nav: better-headers. Identity: frontend-design. Copy: website-copywriting. Tokens: better-web-interface.

Non-negotiable rules

<footer> landmark. Real links; aria-label if there is more than one <nav> in the footer.
Do not invent pages (Privacy, Careers) that the product does not have. Legal only with real URLs.
AA contrast; visible focus; keyboard. Mobile dock (better-headers type 9): padding/safe-area so the footer does not sit under the island.
At most one CTA (newsletter only if the product actually captures email — form: better-forms).
Dynamic or omitted year; not a petrified “2024”.

Name the type (one line). The repo's DS wins.

Types (one per page)

1. Minimal editorial

One line: wordmark, one email/contact, credit. Lots of space, display type.
When: studio, portfolio, short landing page.

2. Colophon / studio

Short authorship text (city, “made by”, visible stack if it is in the brief). No list of 20 links.
When: agency, author, cultural.

3. Legal strip

Only what compliance requires: privacy, terms, cookies — inline or wrapped.
When: SaaS/e-com with real docs. Do not fill it with generic “About”.

4. Closing CTA

Block above the strip: headline + one button (same verb as the header). Then, a thin footer.
When: marketing with one clear job. Not a second hero + four columns.

5. Dense sitemap

Named groups only with destinations that exist. Typographic hierarchy, not 4× ul identical.
When: large site (docs, e-com). A 3-section landing page: type 1 or 4.

6. Asymmetric split

Brand/message at one extreme; compact links at the other (grid, not space-between default).
When: aligning with the offset header (better-headers).

7. Strip + meta

Row of utility links (status, language, login) separate from the brand block.
When: the items exist (i18n-frontend, real account).

Mobile

Stack groups; not four columns at 320px.
Newsletter: one field + submit; visible error (better-forms).
Avoid a giant footer that pushes the first paint — content first.

Anti-patterns

Four empty “Product / Company / Resources / Legal” columns
Social icons without a profile
Newsletter without a backend
Footer = copied header
"Lorem ipsum dolor sit amet" in the footer
Glass + indigo inherited from the blacklist of frontend-design

Integration with other skills

Header: better-headers
Identity: frontend-design
Email form: better-forms
Copy: website-copywriting

Completion criteria

Named type; real links
Landmark <footer>; basic a11y
Without duplicating the top nav
Mobile without crushed columns; dock-aware if present
Aligned with the DS / frontend-design