Throughout this module,
we created another website
and we now learned a lot about different units that we have,
which help us to make sure that our font size
and other properties like the width or the height,
adjust according to the user's browser settings.
This is nice, but what about responsive design actually?
How can we create our website in a way that adjusts
to different user devices,
and that looks good on basically any device?
Well, this is what we will dive into now in this module,
and to answer this question here,
we first have to look at the difference
between desktop first and mobile first design.
Desktop first design is something like this here.
So, basically designing a website first
for the computer screen,
which is the approach that we followed
throughout this module and throughout this course so far.
Whereas mobile first design means
that we first design our website for mobile devices,
smart phones, typically.
And then we later ensure that the page also looks good
on bigger device screens.
So that's the core difference between these two approaches,
but there is some more about these design schemas.
Desktop first design is the traditional approach,
which kind of makes sense as computer screens were there
before smartphones or tablets.
So typically web design was desktop first design,
so building nice looking websites for computer screens.
Desktop first design also focuses
onto an office-based audience,
which also kind of makes sense
if you know that your audience
typically browses your website
from the notebook or the desktop computer.
Well, then you first want to make sure
that your page meets exactly the criteria
this audience is looking for.
This also depends highly on the type of content
you want to deliver.
You are watching an online course at the moment.
And typically, as this is a coding course,
where you learn how to become a web developer,
you're probably watching this from your desktop device,
because you hopefully code along.
So, a smartphone might not be the perfect choice here,
therefore desktop first is also the approach
we used for this course so far,
as this is what we are doing here.
We are creating desktop websites in a first instance.
The desktop first approach also allows you
to create feature-rich websites.
Typically, computer screens have lots of space available,
and are very big these days.
So if you have a website with an office-based audience,
and where you want to present a lot of features,
then the desktop first approach
might not be the worst choice.
However, we also have the mobile first approach,
and here the thoughts when creating a website
are a bit different.
The mobile first approach is a more functional approach.
You have limited space on your mobile device,
therefore you have to clearly think
about the way you want to present your content,
and what type of content you present.
The website has to work also with less space available
and less information that can be presented.
Therefore, you have to follow this more functional approach
when creating mobile first websites.
Mobile first design also is great
for a lifestyle or news focused audience.
No matter if you take any typical news app or newspaper app,
or if you take apps like Instagram, Facebook, or TikTok,
all these apps, which are websites in the end,
are built mobile first.
You can also browse Instagram from your desktop computer,
but the core idea is that people are using these apps,
these websites, from their mobile devices.
Therefore what comes here is content first.
You want to present the core content to your audience
on the limited space available on your mobile device.
So these are two different approaches,
either writing the code for the desktop computer
and then adjusting it for smaller devices,
or first writing your code for the mobile device
and then adjusting it for larger devices.
Both approaches are totally valid.
Nowadays, we typically follow a mobile first approach.
As well, everybody has a smartphone and people tend
to browse for the internet by using the smartphone.
Nevertheless, as I said,
for an office-based audience or feature rich websites,
and also for the purpose of this course,
therefore we use the desktop first approach.
So this is desktop versus mobile,
but how can we now use these concepts
to implement a responsive design?