Product Preview Card Challenge

Community feedback

• 

  P

  Andreas Remdt•950

  @andreasremdtPosted over 2 years ago

  Hey @Excelsior2021,

  Congrats on finishing the challenge, it looks really good!

  To answer your question: there are basically two ways to go about it. You can use CSS background-image and then use a media query to set a different source after a certain breakpoint (like you did). Background images are great whenever your images are purely for the design and don't have any semantic meaning, like a page background.

  However, in this example, one could argue that the image has a semantic meaning, because it showcases the product featured on the page. Screen reader users might want to know that there's an image, and search engines could make a reference between the product (say, for an online shop) and the image, highlighting it better.

  In these scenarios, the img element in combination with figure would be a better choice. Usually, you specify one src per image, but thanks to modern HTML standards, you can now specify multiple sources per image and make them load on different screen sizes. MDN has a great article about responsive images.

  You can also check my solution for how I did it, I used the same technique there.

  Additionally, besides the image situation, you could improve your solution by using more semantic HTML elements. For the title "Gabrielle Essence Eau De Parfum", an h1 heading would be a good fit, since it's the most important heading on the page. The text below could be wrapped in a p instead of a div, and so on.

  But overall, your code is on the right way and it looks really close to the design, which is great :)

  Marked as helpful

  2

  ---

  

  Jonathan Kila•290

  @Excelsior2021Posted over 2 years ago

  @andreasremdt

  Hi Andreas,

  Thanks for taking the time to review my solution and for the other tips. Very Helpful!

  I like the way you handled the image swap. I did discover that way of handling it but the <picture> element is not supported by Internet Explorer, so I thought this could cause issues for that browser. However, I may implement it as it's a modern solution.

  Thanks again!

  0

  

  P

  Andreas Remdt•950

  @andreasremdtPosted over 2 years ago

  @Excelsior2021 Sure, glad my comment helped :)

  Yeah, if support for IE is an issue for you, then using background images might be a better approach. Just as a side note: you don't have to use the picture element, just put srcset and sizes onto the img tag. picture elements are only useful whenever you want to combine multiple image sources, like WebP, AVIF, and JPG and let the browser decide which one to use, based on support.

  Marked as helpful

  1

  

  Jonathan Kila•290

  @Excelsior2021Posted over 2 years ago

  @andreasremdt

  Ah okay. Thanks for that! I think this is the best solution so far.

  0
• 

  jerry•300

  @realsalePosted over 2 years ago

  Yo! Jonathan,

  Well done, you manage to handle responsive design.

  In my case I use two <img> tag then handle the visibility when specific breakpoint met.

  I use <img> tag rather than setting the background-image of non-semantic element, because it is a product image, a non-decorative image, using <img> tag allows me to use alt attribute which an important attribute in SEO

  And last thing, you should address accessibility issue, the report says that you need a level-one heading <h1>.

  Marked as helpful

  1

  ---

  

  Jonathan Kila•290

  @Excelsior2021Posted over 2 years ago

  @realsale

  Hey Jerry,

  Very helpful. I shall update my code accordingly!

  Thanks!

  0

  

  jerry•300

  @realsalePosted over 2 years ago

  @Excelsior2021 Welcome bro,

  The credits should go to @andreasremdt, He's talking of experience there and also has a great advice when it comes to semantic structuring and accessibility, you might consider following his advice specially in figure in combination of img with multiple src sources.

  I think that would be a best practice.

  Anyways, glad I can be of help bro, Goodluck.

  1
• Account deleted

  Hi Jonathan 👋 Congrats on finishing the challenge!

  I see you added the image as a background and then changed the background below the 480px.

  That's one way to do it, but there is another one which is used more often:

  You can add both images in html, one after another. Then you go and add two media queries, one for a desktop and one for a mobile design. Let's say the breakpoint is 500px. One media query should be max-width: 500px; (for a mobile) and another one min-width: 501px; (for desktop).

  The trick is:

  When you are on a desktop you add this declaration display: none; to the mobile image. And when you are on a mobile, you add the same declaration but to a desktop image. You can add the classes on images to separate them and then select those classes to add the display: none; declaration.

  That's is the way you do navigation as well, when you have a bunch of links on desktop and you want just a logo and a hamburger menu icon on a mobile.

  I hope this helps.

  Keep up the good work! 👨‍💻💪

  Marked as helpful

  1

  ---

  

  Jonathan Kila•290

  @Excelsior2021Posted over 2 years ago

  @kom42ec

  Hi Nikola,

  Thanks for taking the time to review my solution. And thanks for the alternative solution for swapping the images, very useful. I need to make my portfolio site, which has a navbar, responsive. So this is a solution I can implement.

  Thanks again!

  0

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 2 years ago

  @kom42ec , Just to point out that the best practice to display a set of images for different screen sizes is to use responsive images methods mdn. Using display: none to hide images that are in the html structure is not recommended, here are some of the reasons:

  1. code duplication - the html of a site is the first one to be parsed before css and other things. display: none is in your css, so by the time the css is parsed - all the images including the ones with display: none will have been downloaded
  2. That can further be explained that , the method wastes the user's bandwidth on images that the user does not need to see.
  3. Slowing down the machine on content that you as a user do not need. One of the challenges on Frontend Mentor has over 20 images - applying this method 40 images that a user does not need will be uploaded and what if the user is on a slow network.

  Happy coding.

  Marked as helpful

  2

  Account deleted

  @ChamuMutezva thanks for clarification, I really appreciate it!

  I wasn't aware it's not a good practice, and I apologize for a bad advice.

  0

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 2 years ago

  @kom42ec, any advice is good advice. It's part of learning. Keep on providing feedback to others and happy coding

  1