Sunnyside Agency Landing page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop is great, the responsiveness could be better because right now, try changing the screen's width, the images after the hero-section are not aligned properly anymore since their height changes, the text before the testimonial blends into the image and makes it harder to read. Mobile layout is great until the section before again the testimonial, those needs to occupy the width and centered text.

  Some other suggestions would be:

  • I think role attribute is quite confusing for you. You don't put role attribute on every element, you only need role attribute when you want a certain element to act as another element besides them. div role="button like that, but your usage are wrong. Remove all.
  • A typical structure to use on a site would be like:

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

  This way, all elements that have contents are inside landmark elements.

  • The svg of the website-logo needs to have either aria-label attribute or an sr-only title element inside the svg. This server as a alt but for svg elements. The value for whatever method you will use will be the name of the website, since it is the website-logo. Use sunnyside as a value.
  • Those list of links should be using their own a tag since those are supposed links. Interactive components needs to use interactive elements.
  • Avoid using height: 100vh as this is not consistent for every users, since this scales according to the remaining viewport/screen's height. In your .hero-image selector, it would be better to have a used rem unit on the height or maybe just use padding to give it the desired dimension.
  • The arrow-icon needs to be hidden by using aria-hidden="true" attribute on it. Decorative images must be hidden at all times.
  • When using heading tag, make sure that you are not skipping a level. If you use h3 , make sure that h1, h2 appears before them.
  • The other images that are decorative needs to use aria-hidden="true" attribute to be hidden totally for all tech.
  • learn more should be a link so use a tag them on them.
  • Each person's image on the testimonial section should have alt attribute, where the value is the name of the person like alt="Emily R". Also, do not forget to include alt attribute, always include them otherwise assistive tech will read the source path of the img.
  • Name for each person needs to be a heading tag.
  • When wrapping a text-content, use p tag, do not just use span, but if you were to use it, wrap the span by p tag.

  FOOTER

  • Same goes for the website-logo, use the method that I mentioned above about the icon.
  • List of links below the logo can be inside a nav since those are still your navigational links. Use ul on them as well and wrap each in a a tag.
  • Each social media links should be inside an a tag because those are links. Use ul to wrap all links as well since those are "list" of links.
  • Each a tag that wraps the social media needs to either use aria-label attr or sr-only text inside it. It is the same concept as the logo, you do this if the content of the element has no text that can be read.
  • Each svg of the social media icon should have aria-hidden="true" attribute since they are only decoration.

  MOBILE

  • Hamburger menu toggle should be a button again, interactive components needs to use interactive elements.

  SUPPOSING BUTTON IS USED

  • The button needs to either use the aria-label or sr-only text method. You need this to give description on what the button does, an example would be:

  <button aria-label="navigational dropdown menu" aria-expanded="false" />`
  

  The aria-expanded is needed so that users will know if the button has shown or expanded something. You transition the value to true using javascript, if the user toggles it. You can look at this simple snippet of mine about hamburger menu I didn't use aria-label or sr-only method since my button have a text.

  Aside from those, great work still on this one.

  Marked as helpful

  1
• 

  Tholfikar Mohammed•410

  @ZolfikaarPosted about 3 years ago

  Hey, thanks for your helpful feedback. I already fixed some issues after I uploaded the solution, like the position of the first card, but unfortunately, the solution design that appears here still referring to the first stage, you can see the changes when you open the page live. I actually consider this attempt as a failure, I already build some single-page templates like this and I am kind of used to it, but I don't know why I get rushed when I was working on this one. anyway, I read your feedback and I will start fixing the issues you refer to one by one asap.

  0