🖌️ New website design #89
Conversation
…tion, and clean up unused styles
…ith improved styling, and clean up unused code
…add logo component, and enhance layout responsiveness
…ements to welcome page
…introduction section, and enhance mobile responsiveness
…ction margins, and enhance mobile image responsiveness
… dimensions, and enhance hover effects
…VG elements, and enhance hover effects
…fect, and update hover interactions
… enhance layout responsiveness
…personal websites, and enhance layout responsiveness
…or team member cards
…nts, and responsive design
…sponsiveness; replace header banner with navigation bar
… and enhance search button visibility
…and refine transition effects
…nce sidebar navigation and documentation page layout
…ling; adjust z-index and background properties for better visibility
…ced visual appeal
…djust dimensions and spacing for improved visual consistency
…he Early Access Program?" content for enhanced engagement
…apse for enhanced interactivity
…rt visibility for improved user engagement
…cy; adjust margins for better alignment
|
Just for reference, here's how the website looked before the redesign:
|
…plicity and reduced bundle size
…ponsor links and images for improved screen reader support
|
For reference, here's how the old website previously scored on Google's PageSpeed Insights: |
…ing semantic structure
…fects for better accessibility
…tic structure in alert, footer, and navigation components
…, and link titles for sponsor components
…ity in various components
…tform switcher component
…y in early adopter component
…or improved visibility
…for improved visibility and performance
…ed visibility and performance
…or improved performance
There was a problem hiding this comment.
Hi @HassanZahirnia! In case you haven’t noticed, you have multiple <h1> on this view.
There was a problem hiding this comment.
Hey there! Yeah I'm aware of this. Because of how I designed things and many decorative elements and animations I've had, I had to separate words which resulted in multiple H1 tags. I know it's not clean but Lighthouse is giving 100 score on the SEO so I don't think Google is gonna penalize our rank.
Also the words are on the same level so technically it should be ok.
But I'm no SEO expert. If anyone has a better approach, let me know. 😊
There was a problem hiding this comment.
I don't think it's just about SEO, it's also about how screen readers will interpret the content.
Maybe a single <h1> with multiple <span> inside it is the way?
caveat: I'm also not an expert on either SEO or accessibility
There was a problem hiding this comment.
Okay then I also have 0 context about how screen readers work lol.
If your concern is only screen readers, I can make the entire decorative tagline hidden for screen readers, and then use a separate dedicated <h1> for the screen readers. Is that too hacky or it sounds fine?
…improved visibility
…toggle component's margin
✅ Completed Tasks:
🐞 Known Issues (all fixed):
Dark theme was not implemented(fixed)Right sidebar on docs was broken(fixed)Footer overlapping the docs sidebar due to new layout(fixed)📌 TODO for Backend Development:
Home page (
welcome.blade.php):Top navigation (
navigation-bar.blade.php):😊 A gentle reminder to all members and contributors: Please consult me before making any visual or design changes. While I fully appreciate that this is an open-source project where everyone can contribute freely, I’d like to ensure we maintain a cohesive and polished design.
Thank you, hope you all like the new design! 🌸