Improving on the responsive element

Hi everyone, yesterday i ask for some feedback on my work of the landing page project and it was pointed out to me that the website was not so responsive.
Link of the first try :

Today I tried again trying to focus more on the responsive side
Link of the second attempt:

Please let me know what you think and if there are things to improve.

It is better for sure, but there are a few tiny issues left.

  • I can still trigger a horizontal scroll bar at certain view port widths. If you start with your browser very wide and then gradually start narrowing you will find it.

  • You are kind of “cheating” by using vmin units for the font size in the menu links at the top. I understand why you are doing it but you are using it instead of making that menu truly responsive by converting to a hamburger menu at some point. The other problem with this approach is that it is an accessibility violation. It prevents users from being able to manually increase the font size. This applies to all the text on your page that uses vmin units only. You really need to add a responsive unit to the font size (such as rem) in order to make your text accessible, for example:

font-size: calc(1rem + 0.5vmin);

The main point here is that you should restrict the font size of text to be based only the dimensions of the view port.

1 Like

For the “font-size” is it better to use the em-rem? when is it better to use vmin vmax?

It is never good to use vmin, vmax (or any other unit that is based on the dimensions of the view port) by themselves for the font-size because it prevents the user from manually increasing the text size, which is an accessibility failure. If you want the font size to scale a little with the width of the view port then you need to combine that with a relative font size as well, such as:

font-size: calc(0.8rem + 0.2vw);

This prevents the font size from ever getting below 0.8rem but allows it to grow a little as the width of the browser increases. And the 0.8rem allows the user to manually increase the font size regardless of the width of the browser.

Personally, I almost always just use rem units for font size, but if I have a really big heading then I might scale down the rems and add a little vw so the heading adjusts a little for narrower view ports.

thank you very much, i am having some problems with relative units. XD
thanks for your help i will use more “rem” and “em”

You might also want to give the CSS clamp() function a look.

1 Like

clamp is definitely popular among the responsive crowd for sure but it does have some potential accessibility issues with regard to font size. In general, you don’t want to limit the max size of a font on the page because some users may need to increase it more than your predefined limit. Adrian Roselli has a good article on responsive font sizes and zoom and he generally warns against using clamp or max with font sizes.

Ya, I know, we accessibility people take all the fun out of things.

UPDATE:

I change the vmin in rem or em (still figure when and how use those 2 units)
but now i think it’s better for sure. When i press ctrl + or ctrl - now the text and the image they shrink and enlarge. Earlier you pointed out to me that if I changed the zoom of the page it didn’t change anything. I may not have used the units well yet, but I am starting to understand

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.