Clipboard landing page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout looks great and those animation is really nice. The site is responsive as well and mobile state looks great.

  For the modal, a div would be fine on this one. An addition as well is to use aria-live element that will announce if the server is down like what you are showing so that when the user toggles the download-button, they will be informed right away, because the modal will only be visible right away for sighted users but not for other people who are visually impaired.

  Some other suggestions would be:

  • Remember that a website-logo is one of the meaningful images on a site so use proper alt for it. Use the website's name as the value like alt="clipboard".
  • Reduce usage of section element since they don't really give much information unless they are labelled by aria-labelledBy attribute. A div would be fine for this one.
  • For non interactive elements, you don't need to add like a cursor: pointer for them or an animation that seems like they are ought to be clicked, but in reality you can't really interact with them.
  • When using img tag, you don't need to add words that relates to "graphic" such as "logo" and others, since img is already an image so no need to describe it as one. Use only the company name on this as the alt value.

  FOOTER

  • Same with the company logo, use a more proper alt value.
  • Those 5 links could be inside a nav since those are still your website's navigational links.
  • Also, you could wrap the 5 links inside ul since those are "list" of links:

  nav
    ul
      li a * 5
  

  • Those social-media links could be inside a ul element since those are "list" of links.
  • Each a tag that wraps the social-media icon should have either aria-label attribute or sr-only text inside it, defining where the link would take them. For example, you should use facebook as the value if the link would take the user to facebook.

  Aside from those, great job again on this one.

  Marked as helpful

  0

  ---

  

  Yazdun•1,310

  @YazdunPosted about 3 years ago

  @pikamart Hello Raymart ! I jumped back to the challenge fixed all the issues you mentioned here, Also I was exactly looking for something like aria live but I didn't find it on my own, I added it to my alert and javascript and now I feel so much better about it 😁

  Thank you for your great feedback it helped me so much.

  1
• 

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  Pretty cooool ! Those intro and on-scroll animation are just georgious, I'll check your ressources right now, thanks for sharing !

  Just let you know that your dark mode doesn't work properly, even on a Windows OS. Don't know why.

  Then, about animations, don't know if you saw that, but it's animated with Anime.js. Refering to this article, Anime.js seems to be the reference in terms of animations actually. Even if I didn't got much time to involve in animations, I trust in this source cause my senior mentor from my last internship was using Slick.js which is in the list, also.

  Finally, I don't know if it's in the challenge design, but I like your alert message ! Nice touch, your getting better and better !

  Keep going !

  Marked as helpful

  0

  ---

  

  Yazdun•1,310

  @YazdunPosted about 3 years ago

  @FlorianJourde Thank for your feedback Florian 🤝 ! I'm so obsessed with animations right now and the library you recommended me looks so fun and powerful to me 👍 It's crazy to think about all cool things that can be created with help of such libraries ! About the alerts, No there is no alert in this challenge but I wanted to make the page more interactive. About theme functionality, I thought issue was only on mac, but now I'm going to find whole another method to apply themes, Thanks a lot for informing me about it's functionality.

  1

  

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  @Yazdun Hey, Yazdun, I took inspiration from you to update my Github profile, I hope you don't mind !

  Also, I'll have less time to focus on FEM, since i just signed a contract to work on a company from next monday, yeepee ! Have you got a Discord, or something like that ? If you want to keep in touch ?

  Have a nice day !

  0

  

  Yazdun•1,310

  @YazdunPosted about 3 years ago

  @FlorianJourde Wow congrats 🎉🎉🎉

  Feel free to use anything that you find on my github that's completely ok with me, I'm happy that you found it useful. also here you can find more cool shields to use on your github.

  I don't use discord, I use twitter and telegram , If there were any case I could help, don't hesitate to get in touch

  1

  

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  @Yazdun Well, thank you for this relevant content, once again. I'm not a Telegram user, but you must know that you can't be contacted on Twitter ! Just to let you kno. I was already following you.

  Keep in touch, and thank you !

  0