Responsive Huddle landing page with a single introductory section

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 2 years ago

  Greetings Darko

  So far so good, well done.

  • The design looks good and is generally responsive. But the breakpoint , in my opinion kicked in too late (at 1297px).
  • alt values for the img elements should be descriptive for the benefit of assistive technology users. Alt values should carry the message that is in the image. The idea here is not just to tell the user that there is an image ( that is done automatically by assistive technology), alt values like alt="Logo image" , alt="Desktop and mobile window image" does not help assistive technology users. If the image is decorative , then use alt=""
  • the footer list images are supposed to be links to social media accounts, they are not just images.

  1

  ---

  

  Darko•460

  @Darko96Posted over 2 years ago

  @ChamuMutezva Thank you so much for a feedback.

  • Where would you put breakpoint? I don't have experiance with media queries so i didn't know where to put it.

  • So I shouldn't put any text in alt if I have images like these.

  • That is what I did in a first place but I got error from frontend mentor software. It says that I have to have text in a tag. So I don't know if I should just ignore that error or there is better way to do it.

  0

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 2 years ago

  @Darko96 , take a mobile first approach when styling . That means your first styles will cater for mobile/small devices. Let the content decide where to put your breakpoints, when the content starts to become weird in presentation , some large white spaces - that is when you should consider a breakpoint. Instead of max-width , mobile first approach requires the use of min-width. A good resource that i can recommend is conquering responsive layouts.

  • to be clear , all images should have an alt value. Decorative images like the illustration in challenge can have an alt="" , whilst the rest should have a descriptive message . The logo can have a message that tells the user of the company , eg something like alt="Welcome to huddle international - specialist in community building" - an assistive technology user can be able to make a judgement if the site with focus is the correct one.

  1

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 2 years ago

  @Darko96 , take a mobile first approach when styling . That means your first styles will cater for mobile/small devices. Let the content decide where to put your breakpoints, when the content starts to become weird in presentation , some large white spaces - that is when you should consider a breakpoint. Instead of max-width , mobile first approach requires the use of min-width. A good resource that i can recommend is conquering responsive layouts.

  • to be clear , all images should have an alt value. Decorative images like the illustration in challenge can have an alt="" , whilst the rest should have a descriptive message . The logo can have a message that tells the user of the company , eg something like alt="Welcome to huddle international - specialist in community building" - an assistive technology user can be able to make a judgement if the site with focus is the correct one.

  1

  

  Darko•460

  @Darko96Posted over 2 years ago

  @ChamuMutezva Thank you so much for an advice.

  I'll watch that course about responsive design and I understand why I should first style for small devices. More and more poeple use smart phones :)

  1