Animated, accessible, SEO friendly, performant NextJS solution
Design comparison
Solution retrospective
Things I've done in this project that I haven't done before:
- Used Lighthouse during development to find early optimizations
- Used prefers-reduced-motion media query
- Separated each destination / crew member / technology into a separate page for the purposes of SEO
- Used meta description tags
- Used Framer motion
- Used Next.js font optimization feature to optimally load fonts
My goal was to make the site performant, SEO friendly, accessible and responsive. My main struggle was deciding how the content should behave on wide screens - Figma only shows screens with optimal widths. How do you usually handle this if the designer is not available?
Any feedback is much appreciated.
Community feedback
- @leonpaholePosted almost 2 years ago
I'm also getting an accessibility warning that I don't know how to solve: "All page content should be contained by landmarks" for the background image that is not part of the <main> tag. How to indicate that this image is just for decoration? I tried with alt="", but that doesn't help with the warning.
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord