Blogr landing page using ONLY HTML, CSS ,and Vanilla JS

Community feedback

• 

  

  Chamu•13,820

  @ChamuMutezva

  Posted over 3 years ago

  hi.

  • use a button with an image (hamburger) as a child and another button with the close image. Add aria-label to the button as an image will not provide the purpose of the button to assistive tech users and use alt="" on the image as it is just a decorative image.
  • On the last point - they are sections in the design where images have been provided for mobile and another (bigger version) for desktop. One choice to implement them can be to use them as background images. In the event that you use the img element, using display: none to hide eg the desktop image on mobile is not a recommended technique - it wastes bandwidth and considered expensive as all images will be downloaded by the user's device even though the user wont use the other image. Consider then a site where you are having 10 images. Responsive image techniques (srcset , picture element) will allow users on mobile to get only images that has been set to be viewed on mobile , making the page load faster among other things. See the article below for further explanation, responsive images

  11

  Marked as helpful
• 

  

  Chamu•13,820

  @ChamuMutezva

  Posted over 3 years ago

  Hi Mohsin.

  • the site is generally scaling well from small devices to desktop. Well done.
  • the structure of the html is not correct in my opinion, they are several adjustments that needs to be made:
  • The following elements are acting as the hamburger and close button

  <div class="ham">
          <img class="lines" src="images/icon-hamburger.svg" alt="">
          <img class="cross" src="images/icon-close.svg" alt="">
    </div>
  

  Where possible use semantic elements, the images above can not replicate a button in functionality. Keyboard and assistive tech users will not be able to use or know that the images are interactive .

  • the immediate child of a ul element should be an li element, it should not be a div ,or any other elements.
  • if you do not intend to use srcset , i would suggest to remove it from your image <img data-arrow-one class="arrow-light" src="images/icon-arrow-light.svg" alt="" srcset="">
  • the li elements should have an anchor as a child in this scenario - they are links to other pages or sections <li class="li">Overview</li>
  • the main element is important , check the link in the report for further explanation. In short that is wher the main content of the site should be.
  • i see you have <div class="desktop"></div> , which you are using to display the image as a background image in desktop view. The equivalent message in mobile is shown as :

  <div class="mobile">
      <img src="images/illustration-laptop-mobile.svg" alt="" srcset="">
    </div>
  

  While the method may work, this method is not recommended - you need to look responsive images techniques , the srcset is one such method and another one will be the picture element.

  11

  Marked as helpful