Design comparison
Community feedback
- @DacardonacPosted 2 months ago
Hi! I hope you are very well, I was reviewing your solution and everything is super good, congratulations, I found some points to improve and I would like to share them with you.
-
Metadata: It's important to optimize your site's Metadata to improve SEO and help search engines index it better. This includes adjusting the title, description, keywords, and meta tags to define your content and make it easier to discover, in this article you will find more information on this topic: Metadata and SEO.
-
HTML Semantics: Using semantic tags like
<header>
,<article>
,<section>
, etc., improves the structure and readability of your code. It also enhances accessibility for users with screen readers, making navigation clearer, in this link you can read more about that: HTML Semantics. -
Color Contrast: Ensuring proper contrast between text and background is crucial for accessibility, especially for users with vision impairments. Improving this makes your content more readable and accessible to everyone.
-
.webp Image Format: Using images in
.webp
format is a great way to improve site performance, as this format reduces file size without losing quality. This speeds up page load times, benefiting both user experience and SEO. -
Grid: In the grid you implemented, a better structure would be using
grid: 1 / span 2
. This is a best practice because it clearly defines where the element should expand from and to, you can test it and practice with this page: Layoutit.com.
By implementing these changes, you'll optimize both the performance and a11y of your site, improving the overall user experience, I hope my comment is of great help. Keep up the good work!
Greetings!
0 -
Please log in to post a comment
Log in with GitHubJoin 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