responsive site using html css and js

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great but the responsive state and mobile state are not really great at the moment. Right now, when shifting the screen-size, the text-content are not adapting to the changes and are being somewhat hidden since the hero-image's color are the same with the text and the image are going to the left which makes the text camouflage. The mobile state, the dropdown is already appearing and changing it's position which I find really weird.

  My suggestions are more of the markup instead of css since in css you can use your own way but I strongly suggest to have another go on this one and focus on some aspects responsiveness and proper mobile nav-dropdown.

  Some suggestions would be:

  • Have a header tag to wrap the top-most-portion of the site. A typical structure of a site looks like:

  <header />
  <main />
  <footer />
  

  This way, all element that has content are inside their respective landmark elements.

  • Website logo could use a more proper alt since it is a meaningful element. Since it is hard to tell what is the name of the site, it could be for now "project tracking".
  • Also when using alt attribute, avoid using words that relates to "graphic" such as "logo" and others. An img is already an image/graphic so no need to describe it as one.
  • The four links could use a nav since those are your navigational links.
  • Remove the hr inside the ul since it is an invalid markup. Only li element are allowed to be a direct child of ul element.
  • Use a more visible visual-indicator on the button right now it is hard to see when you tab on it, adjust the :focus-visible state of it.

  MOBILE

  • Hamburger menu should be using a button element since it is a control. Again, interactive components uses interactive elements. By using div you are making it not-accessible.

  SUPPOSING BUTTON IS USED

  • The button will be using the method I mentioned using aria-label attribute or screen-reader element inside. The value will describe what does the button do. The value could be aria-label="navigational dropdown menu".
  • The button should have a default aria-expanded="false" attribute on it. It will be set to true if the user toggles the button.
  • The placement of the toggle and the dropdown is incorrect. The hamburger-button should be placed "before" the dropdown so that the focus will be next to the dropdown, swap those or arrange properly.

  As I said, I rarely adjust the css because it is more of a personal choice right but I hope that somehow you refactor it and make it as good as you can.

  But still, great job on this one.

  Marked as helpful

  0

  ---

  

  Kurt Gonzales•300

  @KurtGonzalesPosted about 3 years ago

  @pikamart Thanks for this one again, sir! I will practice what you said.

  1