First Mobile Responsive

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. The layout in desktop is fine, though the footer lacks padding. Resizing, the hero image gets really thin, horizontal scrollbar also appeared and other sections are being hidden, text as well. The mobile layout looks okay, but the media query is too small. Using 375px for mobile is too small, if you are starting from desktop flow, maybe around 500px going down could be mobile or higher.

  Some suggestions would be:

  • have a main element that wraps the content of the webpage. It includes the content starting from hero section, going to bottom but not including footer. Your markup would have:

  header
  main
  footer
  

  • alt text on header image could just be bookmark, remove the word logo since screen reader will announce it as a graphic
  • alt text on hero section could be empty since it is just for decorative purpose.
  • avoid using multiple h1 on a page. It is better to use only 1 h1 per page. Use other heading tags, but remember when using heading tags, do not jump from 2 levels or more. Example, using h1 then the next heading tag will be h3 or h4. Use heading tags with their level only added by 1. h1 to h2 to h3.
  • on the "features" section, the 3 tabs could have used a button so that it have some keyboard accessibility. Better yet, if you can, implement it as a tabbed interface. You can look at my solution and see how I structured my "features" section. Look also into my javascript in my repo if you want to implement tabbed interface
  • alt text on the images on "features" section could be left empty. They are only decorative purpose.
  • the "more info" button could have used a tags, since it looks like it will redirect a user, hence a link.
  • the "add & install extension" could have used a aria-label so that instead of just text, it would be for example. aria-label="add & install extension to chrome".
  • on the "FAQ" section, those dropdowns could have used button for triggering the dropdown answer, along with aria-expanded attribute to it, to assist assistive techs. If you want to use a simple dropdown, you can use the details element.
  • "more info" button could have been a tags in "FAQ" section
  • on the form, you could have set the event.preventDefault so that it won't refresh the page. It would be also great for example, to have a text, when the form is a success.
  • on the footer section, the bookmark logo svg could have been wrapped inside an a tag, along with its aria-label like `aria-label="bookmark".
  • the social media links in the footer as well should have been wrapped inside a tags, since they are links, along with their respective aria-label
  • on the mobile state, using an img on the hamburger menu as trigger is not really good, use a button element, along with its aria-label and aria-expanded. This would be much accessible for users.

  It may be a lot, but those are important. Still, you did a good job in here.

  Marked as helpful

  1

  ---

  

  UyDung•65

  @UyDungPosted about 3 years ago

  @pikamart : Thank bro for support. And I wanna ask you what and how do you learn Javascript to make "tabbed interface". Its new for me.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @UyDung Hey, but first, just to give insight what is that. Tabbed interface is a logical way of sectioning related elements. What I mean is that, as you can see, when clicking on those selection, the content changes right, it changes that varies to what ever tab is selected. When you see something like that when creating a website, you should implement that since it is really helpful for screen reader users when you implement a tabbed interface. Here is from mdn about the role attribute. Just keep scrolling and you will see on what html structure does tabbed interface needs. The javascript is right there too. But on my case, I change some javascript so that I could work easily.

  If you have any question, just drop it here okay.

  0