First Mobile Workflow Using Grid

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋Hi Kristiana!

  👍 Good job on completing this challenge so well! Your solution looks good on both portrait and landscape mobile view 🙌.

  I have some feedback on this solution:

  • For the alt value for all photo images, you don't need to put photo of. Just put the name of the person. The screen reader already know that they are images.
  • For every testimonial__card--para element, I recommend to use blockquote for better semantic HTML markup.
  • I noticed that you write the color code like this, --bg-violet: 263 55% 52%;. In my opinion this an odd thing to do, I recommend to include the hsl() too.
  • I don't recommend to change the HTML / root font size, since it comes with a lot risks. Here's what an accessibility expert (Grace Snow) has said about it. (See original comment)

  Yeah, I would never resize html/root font size down to 62.5% mainly because it is completely unnecessary, and it carries risk. You are correct you can mitigate against the accessibility issues by scaling the font size back up with 1.6rem on the body, BUT

  • not all elements inherit font size from the body so you have to remember to manually scale up them as well
  • you need to do extra testing for that reason
  • any rem sizes on third party components or plugins you bring in will need loads more overrides because you’re changing an established default, you cannot guarantee it will work correctly for everyone on every device, operating system, browser and tech set up

  Basically it comes with a lot of risks for almost no benefit.

  There is no reason 1rem needs to equal 10px. As soon as you start thinking entirely in REM - building for alignment, proportionality and spacing - rather than thinking in pixels, the whole point disappears.

  That's it! Hopefully this is helpful!

  Marked as helpful

  1

  ---

  

  Kristiana12•425

  @Kristiana12Posted about 3 years ago

  Hi @vanzasetia 👋🏻,

  Thank you so much for your feedback!! It contains a lot of information that I haven't known till now!! I have been using the 62.5% because I have seen it in many tutorials, and then it is easier to calculate the rem, I never thought about the downside though.

  I saw this method with the name convention of --bg-violet: 263 55% 52%; and I found it pretty useful in cases where you need to reduce the opacity of an element multiple times. But it may be confusing for the ones that are not familiar with this method. I have to keep that in mind ☺️

  Thank you one more time and yes it was really helpful!

  0