Responsive landing page using flexbox and grid w/ some positioning

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted about 1 year ago

  And on CSS

  • NEVER write font size in px! Or line height or letter spacing.
  • normalize is a really old css reset and a lot isn't needed any more. I recommend you look up more modern resets like those by Andy Bell or Josh Comeau
  • make sure any max widths for components or content is in rem not px so it is more responsive for all users, including those who change their font size settings
  • buttons/ctas usually have padding. Worth checking. You don't want to create the whole height of a button with line height. Remember content editors could write more text in there or users change font size so they can end up wrapping over 2 lines. If relying on line height instead of padding for button height that could have undesirable results.
  • if an icon and text is in a button consider using inline-flex and gap instead of margin-right on the icon. Just a more modern approach and common to prepare for different languages/text directions.
  • similarly, using flex and gap would be shorter so more performant for the social links
  • you should never ever need a media query at 375px wide
  • media queries must always be defined in rem or em for a fully responsive result
  • I am away from my computer so cannot check, but the sheer number of media queries in this stylesheet and the amount of pixels being used gives a code smell. That implies to me that this may have problems on some devices tbh. But like I said, I can't check it to be sure

  Marked as helpful

  1

  ---

  

  Muhammadjavohir•280

  @MuhammadjewelPosted about 1 year ago

  @grace-snow , your comments are being much helpful 😃

  • I'll change my px based text units in my next projects 👍 Your article was great and to the point.
  • I've gone through Josh and Andy's articles about their resets. I'll start using the combined one.
  • considering different languages/text directions will be a good approach, too 👍
  • regarding the px use I've gone through some articles. It turns out I was behind the standards 😅 These articles were very useful to get the gist of the approach. The Surprising Truth About Pixels and Accessibility by Josh Comeau and PX, EM or REM Media Queries? by Zell Liew
  • the reason for using 375px and several other breakpoints was to better adapt the page. I try to consider the screen sizes between breakpoints given in the design.

  0
• 

  T

  Grace•31,090

  @grace-snowPosted about 1 year ago

  Hello

  Good job on this

  A few tips from reading the html:

  • there is no reason to use aria-hidden true on decorative images that already have an empty alt attribute. That's a waste of bytes
  • make sure media queries are always defined in rem or em, including in the picture element
  • b is a deprecated tag. If you want bold emphasis, use strong.
  • remember text should never be in meaningless elements only (like div, span, b, em, small). Use a paragraph if it's it's own paragraph or make sure it is inside a parent paragraph
  • all the social links are inaccessible at the moment because you've not labelled them with the name of the social platform. Make sure you add aria hidden true and focusable false to the inline svgs on those too - this ensures they are not announced as unlabelled images by some assistive technology
  • if links are opening in a new tab this needs to be included in the link label eg "Facebook (opens in a new tab)"
  • if list styles are removed from a ul in css that list loses its semantics in IOS. To restore this, add role="list" to the ul and role="listitem" to each li

  Marked as helpful

  1

  ---

  

  Muhammadjavohir•280

  @MuhammadjewelPosted about 1 year ago

  @grace-snow , thanks for taking time and giving feedback.

  • for decorative images aria-hidden was used to meet the recommendations given here
  • as I solely used px throughout the project, didn't think em or rem would be suitable in my case
  • the reason to use b was that I didn't want to give additional semantic meaning to it, the bold style was used only for decorative purposes, I thought.
  • I'll fix the socials links 👍
  • the notes about list semantics in iOS were new, thanks for noting 👍

  0