P
Matt Studdert• 13,611
@mattstuddert
Posted
Great work on this Francisco! 👍
Here are a few pointers after having a look at your code:
- Always make sure you add
altattributes to anyimgelements in your HTML. Without it, screen readers will read out the file path instead of a description of the image provided by the alt text. - In your next project, I'd recommend having a go at using
min-widthmedia queries instead ofmax-width. Usingmin-widthensures mobile users load in the smallest possible CSS file. Whereas they will load in everything ifmax-widthqueries are used. - At the moment you're not swapping the main
background-imagefor mobile users. I'd always recommend doing that wherever possible to save the mobile user from having to download larger image files. - You've done a great job using HTML5 semantic markup. Keep up the great work!
I hope those tips help! 🙂
1
P
Matt Studdert• 13,611
@mattstuddert
Posted
Yeah, exactly. Just add a new declaration for the background-image in a media query that points to the mobile version of the image.
1
Francisco• 70
@Souzadk
Posted
Thanks man! Actually didnt include alt text, just because im lazy. But the media queries option, is pretty smart.
changing the background image for mobile users is just a case of doing it in a media query im guessing?
0
