Upgrade Footer Layout & Components on get.foundation
- Dominant language
- JavaScript
- Stars
- 29.8k
- Forks
- 5.4k
- Avg merge
- 25m
- Merged PRs (30d)
- 1
Description
### Description / Summary:
The current footer on [https://get.foundation/](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 `` 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:
1. Approve layout direction and wireframe design.
2. Implement footer component across templates.
3. Test across devices and browsers.
4. Deploy and monitor feedback.
Contributor guide
Research direction
Start by locating the site's shared templates and current footer implementation, then review how the get.foundation pages are assembled. Resolve the proposed layout, content, accessibility, responsive, and performance requirements before implementation; done means the footer is consistent across pages, its links work, and the listed browser and accessibility checks pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, javascript
- Domain
- accessibility, design, frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 28/100