Responsive design, GridLayout and FlexLayout, Mouseover interaction

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi

  This looks OK at first glance, but looking at the code it needs a lot of refactoring I'm afraid

  First the html... At the moment you are using invalid elements.

  • A label is for a form field, nothing else. Use headings
  • in this case the visual buttons would trigger navigation so must be anchor tags
  • images always need an alt attribute. In this case, the images don't need describing to assistive technology, so leave the alt value blank. But alt="" still has to be there, so they know to ignore the image.
  • not a semantic issue, but why do you need an inner div on each card? I don't see why you'd need that from the design

  In css

  • font size must always be in rem/em never px
  • remove all heights, position fixed, position absolute, transform, directional position properties like left top etc. None of these are needed
  • to center content on the page, use grid or flex, not transform
  • instead of percentage width use flex-basis and max width. This will be more responsive and reusable across breakpoints
  • I don't think you need 3 breakpoints for this. One media query should be fine. It's best practice and you'll find css will be shorter and simpler if you work mobile first (using min-width media queries)
  • don't forget to add focus-visible states to interactive elements (the anchor tags when they are added) so keyboard users know where they are on the page

  I hope these tips help

  Marked as helpful

  1

  ---

  

  Nam Haϕ820

  @Nam-HaiPosted over 3 years ago

  @grace-snow Thanks a lot <3 Lots of interesting advice.

  However, theres some things I did not quite understand :

  • "remove all heights, position fixed, position absolute, [...] properties like left top etc."

  Why ?

  • "the images don't need describing to assistive technology, so leave the alt value blank."

  I'm not sure to understand the use. I not yet used assistive technology so I don't know what you are talking about and how it works. What would it do ? And thus why would it needs atl value.

  Thanks again

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @BlueTompon sorry for the delay, I’ve only just seen this message for some reason!

  1. Because you don’t need heights, let content dictate the height needed. And read up about what al the different position values do... things like absolute take those elements out of the document flow, almost like they are not there at all, so should only be used in specific circumstances.

  2. Alt values are descriptions of images. They are an essential attribute on every image tag. Their value will be displayed if an image fails to load for any reason and they are read out by screen readers so those people also know what the image is. Leaving the alt value blank tells a browser, search engines and screenreaders etc “this image is decorative or unimportant for the meaning of the page, so you can ignore it”

  1