Preview Page Component

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, I leave this here in case you want to take a look:

  🔹It is convenient to separate the code in different files (html, css) for a better organization and easier maintenance.

  HTML 🧱, ACCESSIBILITY ⚖:

  🔹This is a clear case for using the <picture> element, which allows the display of different images for different devices or screen sizes.

  <picture>
      <source media="(min-width: X)" srcset="images/image-product-desktop.jpg">
      <img src="images/image-product-mobile.jpg" alt="A good description">
  </picture>
  

  🔹The image of the perfume is meaningful and therefore the alt text should give a good description in case the user cannot see it for some reason.

  🔹'Perfume' should be capitalized with CSS and not in HTML for accessibility reasons (using 'text-transform: uppercase;').

  🔹The <h1> element is not suitable for the price (the font-size does not define the element to use). In general, it shouldn't be more than one <h1> per page.

  CSS 🎨, ACCESSIBILITY ⚖:

  🔹It is better to use min-height for the body, as using the height might cause the page to be cut off in viewports with small height (such as mobile landscape orientation). Also setting a width of 100% is unnecessary.

  🔹Length units such as pixels may not be the best alternative because screen sizes and user preferences vary, and absolute units don’t scale. Relative units like em or rem are a better option for scalable layouts (the page will adjust to the user's browser settings) and maintenance (to make changes without having to adjust every pixel value).

  🔹It might be a good idea to get used to designing with the mobile first approach, which means designing for mobile first and then for desktop or any other device.

  Please let me know if you disagree with anything or if you would like more information on any of these topics.

  Regards

  Marked as helpful

  0
• 

  Gev Sargsyan•120

  @GevSargPosted over 1 year ago

  @fernandolapaz Thank you for sharing the feedback . It's always great to receive constructive critic that can help me to improve the quality and accessibility of my work.

  0