Why are units important to implement
a proper responsive design?
Well, to understand this,
we'll compare some unit types right here,
specifically focused onto the font size property, though.
Now, these units are not limited to the font size property.
These units, I will show you, can also be applied
to properties like the width property, for example,
but the font size specifically helps us to understand
how these different units work,
and why some might be a better choice when it comes to
implementing a responsive design on our website.
Now, let's dive into the units, and we'll get started with
a very common one we know about already in the meanwhile,
and this is the pixel.
We use this throughout our course projects already,
and pixels are easy to understand and translatable.
Everybody knows what a pixel is, how big a pixel is,
and how it can be used in our project.
So setting 10 pixels for the font size are 10 pixels, well,
on any device in the end.
There is one big problem with the pixel unit, though.
Pixels are not scalable,
because if you increase the width of your device,
well then the pixels won't scale.
So 10 pixels will remain 10 pixels
no matter how big the screen is.
And, pixels also have a limited user focus.
This means pixels, or using pixel values, take away some of
the customization options a user has in the browser.
What does this mean?
In our project, we use the pixel value from time to time.
Back in our code,
you can see that we used a pixel value
for the font size here, for our page logo.
So this WebFood logo up here.
And if we scroll down a bit further,
we have a fixed font size for our navigation items.
So these items right here.
And if we have another look,
we have a fixed font size for our main heading,
the h1 element.
We don't have a fixed font size with the pixel unit
for any other elements on our website.
The h1 element is this Browse Our Delicious Meals text here.
Now, on the slide I showed you that the pixel unit
has a limited user focus.
If we now open the options menu in our Chrome browser,
by clicking onto these three dots here,
these three vertical dots, this is the options menu.
So if we select this, and go to settings,
and click onto this option,
and there select the appearance option right here to open,
well, basically, this menu.
In there, you can change the font size.
You have the medium font size by default,
which you can also change here to other values,
but you can even customize your fonts
by opening this customized fonts menu down here.
And in there,
you now see the currently selected font size here.
If you hover over this circle here,
then you'll see the current font size is set to 16 pixels.
Now, let me make this window a bit smaller for you.
And let me now put our page next to it.
And they closed the dev tools here
to make only the page visible.
Now, if we increase our font size in here from 16 to, well,
a higher font size,
then you'll see something interesting on our website.
The font size in our card, our h2 element in here
does adjust to the user's font size setting.
Other font sizes, like the logo,
the anchor text here in our nav items,
or the h1 element for example, do not adjust.
Why is this the case?
Well, because we set the fixed font size for these elements.
If you set a fixed font size of a pixel value,
then these browser integrated options for the users
are no longer working,
because you as developer decide that
only the font size you defined in the code
is the one that should be used by
the person browsing our website.
And that's of course not the perfect solution,
because if somebody, well, cannot read the font
the way we designed it,
because it might be too small on hers or his device,
then why taking away the option to change the font size?
Therefore, using pixel values is not a mistake by default,
but you have to be careful
to not take away the user's option here.
So this is the big disadvantage of the pixel unit.
It is not scalable and it reduces the user focus,
so the options the user has to browse our website.
Therefore, more dynamic units might be
the better approach here.