Easybank landing page using Sass, BEM and some GSAP animations

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. I like that animation on the hero section. Okay, for the desktop layout it is good, resizes fine although the hero-image gets hidden. The mobile layout is good.

  Some suggestions would be:

  • The website logo in the header, the a tag should use aria-label="homepage" so that when users navigate in that link, assistive tech will anounce the phrase homepage link`, this will inform the user that this is a homepage link.
  • The website logo, the img should use alt="easybank" as the attribute. Avoid adding words that relates to "graphic" like "logo, image, icon.." as a value on alt.
  • Navbar links is not showing.
  • The hero background is not appearing, change the ::before background value with this background: url(../img/bg-intro-desktop.svg) no-repeat;.
  • Adding alt on the hero image is nice, but I think phone alone is not descriptive, maybe alt="easybank phone app".
  • alt on the icons in the why choose easybank section could be left empty since those are just decoration.
  • On the article section, since you are adding like a cursor: pointer to the article itself and treating it as an interactive element, what would make it better is to wrap the whole article inside a tag. This way, the interaction that you add makes more sense. Because if you add an animation interaction to an element that doesn't do anything, what good would it add, right? But I like the hover effect:>
  • On the article the title of the article should be a heading tag, if the article is wrapped in the a tag.
  • On the footer, website logo a tag should use aria-label="homepage" as well.
  • The svg of the website logo in the footer should have a title element inside it with a text:

  <title> easybank </title>
  

  This is like a alt but for svg's.

  • The six links in the footer should be wrapped inside a nav since those are navigation links like the ones on the header element.

  • On mobile layout, the hamburger menu should use button instead of div, this will make it accessible. Also include a aria-label="hamburger dropdown toggler" on it. Also add a aria-expanded attribute with it, you should use javascript to toggle the aria-expanded attribute to either true or false. This will inform a user that a dropdown has been expanded.

  Aside from those, really great work.

  Marked as helpful

  0

  ---

  

  ZaraAg•145

  @zaraag92Posted about 3 years ago

  @pikamart thanks so much your feedback.

  I fixed all the problems and going to update them. Really appreciate your time and all the suggestions, it really helped me.

  1
• 

  Kelvin•915

  @Kl3vaPosted about 3 years ago

  Looks great. But your navigation menu isn't visible on desktop except I move to mobile and come back to desktop.

  0