This is what we created in the last optional lectures.
In case you didn't follow along these lectures, don't worry.
This is just a basic website we created
with HTML and CSS concepts.
We learned about already in this course and this page
simply consists of this single landing page.
We have two navigation items up here,
and we have these add to cart buttons, but at the moment,
these are all just dummy data. So they don't actually work.
It's just for the looks here at this stage.
The looks are very important though,
because this module is all about responsive design.
This means a design which adapts to different device sizes.
Nowadays users don't browse websites simply by using
a desktop computer, for example,
we have different devices available like smartphones,
tablets, laptops, desktop computers, and so on,
and all these can have different sizes on their own.
So you have smaller smartphones, larger smartphones,
smaller tablets, bigger tablets, and so on.
So lots of different possibilities here.
The problem is that we as developers don't know
which device our users are using to browse our website,
therefore as developers, we have to make sure
that our site looks good, no matter which device
the people browsing our website are using.
For this, we have the concept of responsive design,
and responsive design is basically all about
this website content, website layout,
adjustment, depending on the device size.
Now in the DevTools, which are open to you already,
we have different options to see what our website
looks like on different device sizes.
For this, I first want you to make sure
to set the zoom level of the page to 100%.
For this, please click onto the pager to the left,
to make sure you don't accidentally
select the DevTools here.
And then press the command key on a Mac device
or the control key on a Windows device.
And now with plus you can increase the zoom level,
with minus, you can decrease the zoom level,
and here on the Mac you see over here in the right part,
the current zoom level that is applied,
I will set this to 100%.
So please make sure to do so on your computer too.
This will become important later in this module
when we work with different device, which therefore,
I just want to make sure that we have the same core settings
to avoid any kind of confusion later.
Now, talking about responsive design,
we now have a kind of default view, so to say.
If you click onto this vertical line here
between the dev tools and the actual website content,
then you see that you have the width and the height
displayed up here. You can see this.
We have now a width of around about 1,500 pixels
and the height of 1,361 pixels.
And as you can see, I can play around with this width.
If I increase the width here which
could be a very large screen to more than 2000 pixels.
Well, you'll see that the readability of our page
is not perfect. The font size might be too small.
The images are kind of too wide.
So our entire card basically is too wide and so on.
So the look is not perfect.
The look doesn't really perfectly adjust
to our bigger device width.
And if I do it the other way around,
by decreasing the device width, you see it looks okay,
but now things start to look odd, especially right here.
You see on top the navigation bar, well,
that's definitely not a nice styling.
We have the card, we have the button,
which is kind of broken into, well,
two different lines and also
the enter a card being that high.
Well, I don't think this looks good.
Besides testing our device size by
increasing and decreasing the width here in DevTools.
You can also emulate real devices in the Chrome DevTools.
You can find this option right here
next to the elements written,
this symbol with the smartphone and the tablet.
If you select this,
then you have the emulated view on a real mobile device.
In my case here, we have an iPhone six, seven, eight,
or plus, if you click onto this arrow,
you can select different other devices like an iPad,
for example, or you can also use an iPhone X.
With this, you get even more control
about the looks of our website.
At the moment I will work with the,
well the change of the width in the DevTools,
so we can simply click onto the symbol once again,
to get back to this normal view.
Now, as you saw, our design is not responsive at the moment,
it has some default, well responsive behavior,
but we have to work on this design on our own
to make sure it looks good on all of our devices.
To implement such a responsive design though,
we have to understand different concepts.
One of these concepts lets us dive deeper
into the concept of units, once again.