Original subtitles

Since building a real world website,

we need to think about responsive web design principles

from the very beginning.

Even if we initially built and test for big screens.

So these principles are really ingrained

in the entire development process.

And so therefore,

before we actually start building the site,

let's quickly learn what responsive design is all about.

So responsive design or responsive web design,

as it's been more traditionally called,

is essentially a technique that we can use

to make a webpage, adjust its layout and its visual style

to any possible screen size.

And with screen size, we don't just mean the entire screen

of the device that it's been used to consume the page,

but it might also just be the window

or the viewport size of the browser.

So in practice, this means that responsive web design

makes websites usable on all devices.

So no matter if you're using desktop computers,

tablets, or a mobile phone,

a responsive website will be easily consumable

on all of these devices.

Now it's important to understand that responsive web design

is not a separate technology.

So instead it is really just a set of best practices

and of techniques that we use in our regular CSS.

Okay.

And speaking of the set of best practices and techniques,

let's now actually learn about them.

So there are essentially four big ingredients

to responsive designs.

And those are fluid layouts, responsive units,

flexible images and media queries.

Now there might be more

and they might be classified differently,

but these are really the big and important ones

that you need to know.

And so let's start with fluid layouts,

which basically allow the webpage to adapt

to the current viewport width.

And this is a behavior that we have already seen

in practice a couple of times,

especially when we used Flexbox and CSS grid,

which are fluid by default.

All right.

And we can very easily create fluid layouts,

simply by using the percentage units for all elements

that should adapt to the viewport.

So using percentages instead of pixels for all the elements

that are usually part of any layout.

So things that should really adapt to the viewport

should always use percentages and not pixels.

Also, we should always use the max-with property,

instead of simply width.

And we will learn a little bit about how this one works

in the next lecture.

Next up, there are responsive units,

which basically it just means

that we should use the REM unit,

instead of pixel for most of the length

that are in our CSS.

And using REMS instead of pixels,

will make it really easy for us

to basically scale the entire page up or down automatically.

And if that sounds a little bit strange,

I can show it to you in the next lecture as well.

Now here, one helpful trick

that I will also show you how to implement

in the next lecture, is to set one REM to 10 pixels,

because that makes it very easy for us

to then calculate these length.

And again, more about that in the next video.

The next ingredient are flexible and fluid images.

And this is a separate and important ingredient,

because by default, images behave different

than text content,

because they do not scale automatically

as we change the viewport.

Therefore, we need to fix that.

So we need to ensure that they do also adapt nicely

to whatever viewport the page is viewed at.

And usually we simply make images flexible

by defining their dimensions in percentages

and not using pixels.

And also sometimes by using the max-width property,

instead of width.

So this one sounds trivial and not important,

but actually flexible images

is yet another important ingredient

of responsive web design.

And now finally media queries is what brings

all the other ingredients together

and really brings responsive sites to life.

So without media queries,

responsive web design would not work at all.

And that is because media queries allow us to change styles

on certain viewport width, which we call breakpoints.

So basically media queries allow developers

to create different versions of a website

for different types of devices,

because different types of devices have a different width.

Now just keep in mind,

that media queries alone are completely useless.

We really need to start creating a fluid layout

from the very beginning.

And the same is true for responsive units

and flexible images.

And in fact, we usually write media queries

only at the end of building a certain page

or a certain component.

And so that's why we will use fluid layouts

and responsive units and flexible images in this section,

but then media queries,

we will only use them in the next section

to really make this page responsive.

All right.

Now, just as a side note,

of course I'm not showing you all of this to scare you

or to make you memorize all this information.

So this slide is more like a reference for you in the future

and also for us to guide us through this project.

All right.

Now finally we also need to talk about

the two opposites strategies

of building responsive sites with CSS.

So the first one is the desktop-first approach,

in which we optimize our interfaces for large screens.

And so therefore we start writing CSS code

for these large screens into our main CSS file.

Then later,

when we actually want to make the website responsive,

we simply write media queries in order to shrink the design

to fit to smaller screens.

This is the more traditional way of doing things,

and it's also the easier way to learn in my opinion.

And so therefore that's the reason why we will actually use

the desktop-first approach in this project.

Now on the other hand, in mobile-first,

we start writing CSS code for smaller screens

in order to basically optimize or layout

in our website for mobile small screens.

Then from there, we can move up to larger screens of course,

and again, using media queries.

So basically it is the complete opposite of desktop-first.

Right.

Now the idea that's behind this strategy of mobile-first,

is that we, as the designer,

really have to think about the mobile experience

for our users.

And basically we can do that by reducing our website

to the absolute essentials

and stripping away everything

that is not entirely necessary.

And since we live in a mobile world now,

this has actually become the more modern way

of building websites these days.

But again, doing desktop-first works just as fine, I think.

And it is also way easier for me to show you as a beginner,

how web development works.

So basically how CSS and HTML works,

with really seeing the results in a large screen.

Okay, and that's it.

That's basically a short introduction

into responsive web design.

And so now in the next lecture,

we will quickly learn about two of the ingredients,

a little bit better in CSS.

So we're going to learn how the REM unit works

and also the max-width property.