Alright, is so technically we have
finished building our website.
We have the homepage,
we have the blog page,
and we'll also have a contact page
as well as the header and footer.
But there is one very, very
important thing that we need to take care of and
that is going to be responsive design.
Always remember that so many people
nowadays use their mobile phones to browse the Internet.
And if anybody stumble,
stumble across your website on the mobile phone,
you want to make sure that it looks good.
So what we're gonna do in
the rest of this section is I'm going to
show you how you can reconstruct the header,
the homepage, the footer,
and the other pages to look responsive.
So that if it's viewed on a tablet device
or on a mobile device, it will look good.
Lambdas give you a very,
very quick demonstration right now
this is for the tablet view.
You can see I have reduced
the size of my screen to that of a tablet.
And you can see right now that it still
looks very, very, very good.
We don't have any issues with space in the header.
Looks fine.
Testimony notes section looks fine.
The photo looks fine.
But now if I scroll all the way down
to the smallest screen size,
which will typically be your mobile phone.
Let me go back to the top now you can
see that the header looks different.
We have a black background.
We do have our logo.
We do have the main menu right here,
which is now the hamburger menu,
which you've seen many times before.
And then if I scroll down again,
you can see that it looks good
all the way down here to the footer.
So responsive design is extremely important.
So coming up, I'm gonna show you
how you can make changes to
your website so that it looks good on any mobile device.
Lambda's also quickly mention
that when it comes to a responsive design,
there are a few concepts that should be aware of.
One would involve doing things like reducing
margins are patterns that you've
added in the desktop version.
For example, you remember there with the homepage banner.
For this section, we had to add
an outrageous amount of
negative margin and I think it was
minus two to two pixels when it comes to mobile versions.
So responsive versions, you might
have to reduce that size or Mabou,
or maybe even in certain situations increase the size.
Adjustment to imagines or patterns will be necessary.
Also, there are times when you just need to
hide setting kinds of elements
when viewed on a mobile device because it
might look great on the desktop.
An example would be a video editor
will look great on desktop.
But on a mobile device,
it may not necessarily be that great.
Same thing applies with animations as well.
And the measures will look good on a desktop,
the walkways on a desktop,
but mobile phone might have
trouble displaying that animation.
So the whole point of this massive design is sacrifice.
You make changes, you remove certain features so that
when viewed on a mobile device will be Uber grid.
So that's it for
the very quick induct introduction to responsive design.
Let's now get started with it.