Upgrade Footer Layout & Components on get.foundation #15542
Description
Description / Summary:
The current footer on https://get.foundation/ is minimal and lacks modern usability, accessibility, and branding enhancements. This issue proposes redesigning and upgrading the footer to make it more structured, informative, and user-friendly.
Motivation / Why This Is Needed:
- The current footer doesn’t provide comprehensive navigation or brand presence.
- Users have difficulty finding quick links (Docs, Community, Blog, Socials, etc.).
- A redesigned footer can strengthen branding and provide consistent global navigation.
- It allows inclusion of key legal, contact, and social information in a standardized area.
- Improves accessibility and user experience across devices.
Proposed Changes / Requirements:
| Area | Suggestion |
|---|---|
| Footer Structure | Use a responsive multi-column grid (2–4 columns) to organize sections like Docs, Community, Resources, About, Support. |
| Branding / Identity | Add Foundation logo, short tagline, copyright year, and version information. |
| Navigation Links | Include quick links to Docs, Tutorials, Blog, Community, About, Contact, and GitHub. |
| Social / External Links | Add icons for Twitter, GitHub, LinkedIn, etc. |
| Legal / Policy | Include links to Privacy Policy, Terms of Use, and Accessibility Statement. |
| Newsletter / Subscription | Optionally add a newsletter signup or updates section. |
| Contact / Support | Provide “Contact us” and “Support” links or buttons. |
| Accessibility & Semantics | Use <footer> HTML element with ARIA roles and landmarks for screen readers. |
| Responsiveness | Ensure footer collapses gracefully on smaller screens while maintaining touch-friendly spacing. |
| Theming / Customization | Allow light/dark mode compatibility matching the site’s theme. |
| Performance | Optimize assets and minimize scripts to prevent performance loss. |
| SEO / Structured Data | Optionally include Organization schema for better SEO. |
Acceptance Criteria / Definition of Done:
- Footer is visible and consistent across all site pages.
- Mobile view shows clean stacked layout without clutter.
- All important links (Docs, Community, Legal, etc.) work correctly.
- Accessibility audit passes (keyboard + screen reader).
- Visuals align with Foundation’s design system and brand.
- Footer adds minimal load impact to the site.
- Tested on Chrome, Firefox, Safari, Edge, and mobile browsers.
Optional Enhancements:
- Add a “Back to Top” button in the footer.
- Include recent blog/news headlines dynamically.
- Add subtle animation or hover effects for interactivity.
- Integrate newsletter subscription confirmation or API.
Risks / Considerations:
- Avoid redundancy with header navigation.
- Need to confirm content ownership for legal and policy links.
- Ensure backward compatibility with existing site templates.
- Maintain lightweight footprint for faster load times.
Next Steps:
- Approve layout direction and wireframe design.
- Implement footer component across templates.
- Test across devices and browsers.
- Deploy and monitor feedback.