Design comparison
Solution retrospective
Hi, I have a question. When I finished the project, I realized that I forgot to use bg-mobile. Consequently, bg-desktop was used on mobile devices. Would that cause problems with loading or something?
Community feedback
- @grace-snowPosted almost 4 years ago
Good feedback from Artimys there. I would recommend you wrap those social links in link tags (like they would be in a real project) and add hover, focus and active states, and some alt text naming each media channel so users would know where the links go.
1 - @artimysPosted almost 4 years ago
Nice job Rayane, 👍 the mobile and desktop layout looks great. The typography looks great
To answer your question about using the wrong image version on mobile. Depending on the size of the image it could greatly affect the user experience who don't have the best cell network connection(slow 3G) or have a limited data plan for their phones. It creates a longer wait time for your site to load and could make a user impatient and move on. For most who have fast cell speeds and on desktop computers will most likely not feel it. Which is why we should aim to make our sites as optimal as we can and always consider users with slower speeds
Design feedback
- I tried tabbing through your links and button and noticed the
outline: none
was removed from your button. For accessibility purposes it's actually a crucial thing to not remove any styling that that can help identify a focus state of interactive controls. If you do remove it then it's highly advise to customize the styling so it at least fits with your design. - Look into the resizing the desktop illustration when the design switches to desktop layout. It creates a horizontal scrollbar for the viewport.
- Hover styling for the social icons would be helpful.
Keep on coding!! 👍
1 - I tried tabbing through your links and button and noticed the
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