All right my friends.
Let's go ahead and make the user interface absolutely beautiful for all of the people visiting our website
on their mobile.
OK.
So the first thing that we're going to go ahead and do is change the size of our logo because we remember
from previously that it was just too big we're getting two rows when it came to the menu and the logo.
So what I'm gonna do is click on customized up here and then I'm gonna click up here which is gonna
take me to header and then a logo.
There we go.
And now I'm gonna go ahead and see how the website looks on our cell phone right.
I click here.
Down here below and we can see that we're having this issue right.
So the logo is just too big.
The menu gets put on the row underneath and we get all of this wasted space and all of the space is
absolutely precious when it comes to everything.
But even more so on cell phone because the screens are so small.
So as you can see on the desktop this size is actually two hundred and eighty.
And if I move over here to cell phone you can also go down there.
This is also gonna be on two hundred and eighty but that is gonna be too big for us.
So we're going to go ahead and change this up a little bit.
You can see that if I am at 280 like before it's just too big.
We're going to go down.
We're going to go.
There we go so let's go with say 200.
Now we can see that we have our our logo and our menu side by side and we're saving so much space.
Now look at look at this once again.
If I increase we get all this wasted space go back down to 200 looking much better.
So I'm super happy with this.
I'm just gonna go ahead and click on publish.
There we go.
Now let's head back into elementary.
All right guys who are back in al-Mansour and the first thing I'm going to go ahead and do is go down
to the bottom again click on responsive mode and change it to mobile mode.
There we go and I am super happy with this right now with the logo and the menu looks perfect.
We can even click on the menu and see how this looks looks really nice to be honest I'm loving that.
So we're gonna go ahead and do some changes here like we can see right now that I think that this text
right here needs a little bit more space.
I'm gonna go ahead and change that up.
So I'm gonna click here and then I'm gonna move over to style and we're gonna move over to typography
and then we're gonna move down to line height right here and we're just gonna go ahead and expand this
a little bit something like this.
There we go you can see that it's growing there it's changing the entire interface.
Maybe that's a bit much.
There we go.
So we still want to keep in mind these things that we have the learn more button that is easily accessible
which is really really nice and oh so important at the same time.
The menu has become a little bit harder to reach because remember the thumb doesn't as easily go up
there.
But here you have to make the choice you're going to have the menu easy to read and that's going to
be costing like 15 percent of the screen in my opinion.
That's absolutely not worth it.
So it's much better to put the menu a little bit higher and give them more of the content right.
So there we go now is some more space in between here I am liking that maybe even a little bit less
actually with the line height maybe a bit more the there is our sweet spot.
There we go.
So I'm going to scroll down and see if there's anything else that I'm not a big fan of.
So we can see here for example that this text is getting quite crammed upright but it's still very important
information.
So what I would like to do is change the the look on this entire section so I'm gonna go ahead and click
on on the edit section here and I'm gonna go ahead and remove some of the padding because you can see
there's a lot of wasted space here.
It's a lot of wasted space here.
And that looked really good on the desktop but that doesn't look quite as nice on the cell phone that
is just wasting precious space.
So what I'm gonna go ahead and do is check out how much of the padding is actually on top here right
now so that we can keep this padding the space in between the different section but then remove the
padding to the sides.
OK.
So in order to do that I'm going to click on the padding and then go to desktop and we can see that
it is set to 50.
And what that means is that these even though there's no numbers these are also automatically set to
50.
That is how the automatic mobile responsive mode works.
It just sets the same numbers.
Now the Web site is beautiful even on a cell phone but it's not completely optimized.
So what I'm gonna do is unloading these values and then I'm going to leave the top on 50 like that.
So we still have the same amount of space going on.
We're going to remove that zero like that and then I'm just going to click on and write one one in here
and one in here.
One in here.
Now this is already looking much better but I still think that the padding is a bit too much here for
the cell phone so I'm gonna go ahead and decrease that to let's say 25 might look a little bit better.
So if we go down and we look at the top we can see that this is the best.
Actually pops up here on the top and I am liking this.
So you get into this entire screen right here and we get this text down below.
Now there are two things we can do.
Either we can leave this the way that it is and we can get.
This is the best and most takes on our phone or we can actually increase the size of this background.
Now scrolling down I'm actually really happy with this you can see that there is much less space wasted
here and we still have this wonderful quote still here.
Now I'm still gonna want to cover this and tell you above the fold section with this background so I'm
going to move over here.
Click on the section and then move over to the minimum height right then I'm going to be increasing
it a little bit just like that.
There we go.
So now we can see that it's covering the entire first part here.
Now this is affecting the rest of the distance.
Now we might want to go back here to this text.
Go to typography and change the line height a little bit.
There we go looking better and maybe a bit more spacing in between these columns.
Right.
So let's move over to style up here and let's move over to typography and play a little bit with the
line height.
There we go.
Something like this.
So this is starting to look really good right now I might want to use a even bit of a more.
There we go.
Business Made Easy.
Let us show you how.
OK.
Now if we look at the background we can see that the moon is actually covering up to takes a little
bit.
What we could be doing is changing the position of the background as well to see if we get a better
look.
But I'm actually quite happy about this.
So we're going to go ahead and scroll down and we can see that the quote We're still looking really
good.
Now we're remove the space in between.
Actually we added a bit much here maybe.
But I think it's good it's also going to depend on the resolution on the cell phone.
So we're going to scroll down.
It says get digital marketing hacks for free.
Right.
Get the lazy marketing hacks.
And this is actually looking really good already now there are a couple of things that you might want
to change.
Now just click in here kind of updated this part.
There are changes happening because we are moving around the different bits and I am liking this big
time that we have this full ninety nine dollar value right here.
Sign up down below and we'll have it sent to you.
OK.
Looking real good.
Super happy about this.
What I might want to do because now we have her back which is quite dark set up against our dark takes
works really well up here but not so good down here for example we might want to actually make this
part bold.
Right.
So I'm just going to go in here.
I'm going to select this and I'm gonna make it bold.
So now it's a little bit easier to read and to see and I am digging this design.
There we go.
And this form is looking super nice.
We know that it's actually side by side on the desktop and on the mobile version there down below where
we know also that the thumb will easily reach you click on my first name on e-mail and also easily reach
to click Send me the hack.
So this is actually really good design.
So we're gonna go ahead and scroll down and these are looking absolutely dreadful.
This is this is not good.
And this is because of the padding that we're using and the padding.
They make a lot of sense on the desktop they look beautiful on the desktop but they don't translate
well to the cell phone version.
So what I'm gonna do here is start editing these a little bit.
So I'm gonna start by clicking on the editing the section appear and start playing around a little bit
with the padding I'm going to move over to advanced and now we are in the cell phone mode and first
we need to check what the padding currently is on the desktop and we can see that is set to 70 right.
Okay.
It's set to 70.
Now let's move over back to cell phone 17 might be a little excessive here.
So I am going to unlink these once again because I do want the padding on the top and I'm gonna set
that to 50 or let's go with 20.
Let's go.
Let's go with 40 this time.
OK so we're going to set this to 40 we're also going to change this the size a little bit so it looks
better now for these swans we might want to set them to one we could see that they change themself and
we on linked.
So these are actually started to correct themselves a little bit.
If we scroll down we can see that we're getting one course covering the entire screen at a time.
And honestly guys this is looking quite nice is it's quite solid.
So all I really needed to do and with this button as well so all I really needed to do wants to unlink
this and that changed the padding for the cell phone version and everything is looking much better already.
So I am definitely digging this.
Now what we could do is or should do even is change the headline here in the header because it's looking
absolutely dreadful.
And what we're going to start off by changing is the size because it's not looking good in this size
right now.
So let's go ahead and play around a little with this.
Do you wanted to have one row or two.
Now I wanted to be on to like that.
Best selling courses so now is gonna make a lot more sense right because you can read it and there's
less space in between these and that looks much better.
I prefer to go with 50 or 70 in the padding when it comes to desktop.
Around 20 to 40 when it comes to mobile it completely depends on the design.
But here I think it looks really good like this.
So we have the best selling courses and then we're gonna have the courses rolling in like this.
The buttons are there's one courses at a time.
We have a little space on the side.
But this is just a good part of the design.
This is looking magnificent.
Scroll down.
We have the view all courses that is covering pretty much the entire screen.
And then down below we have the privacy policy and terms and conditions.
So guys right now I'm actually really happy with this design right.
This is looking really good really nice.
We have mainly changed the spacing between the letters and the padding.
So when it comes to breaking your design it's usually going to be the padding and this is going to be
very individual for your website.
What do you think looks nice etc. Now I'm doing this very intuitively meaning there is no plan behind
what I'm doing or rather there's no preparation to what I'm doing.
I'm just designing to what I think looks nice.
And as I go and I continue designing the website I may come back and do some changes.
But right now I actually think this looks really good.
We have the free on it's own row which I think looks quite nice.
But what we could also do is change this header go to style typography and play around a little with
the size.
For example this is going to look good if they are on three rows.
What about two rows two rows is two small three rows.
It looks ok but actually I think this might be a little bit better.
I'm gonna keep them on three rows like that.
There we go.
And I'm really liking this.
So guys this is how you do it.
All you need to do is first of all if you have a problem with the menu do you like within the beginning
of the course then move over to elements or go down to responsive mode and change to mobile.
And then the primary things you're going to want to change are 1 the letter spacing the spacing in between
the letters like we did in the beginning here.
It's gonna be to the size of the takes the headers et cetera N3 the padding.
Now the padding is a big breaker of beautiful design.
So when you link the padding it's just going to change up the entire design big time.
So I'm really happy with this guys.
And now don't worry this is not going to be affecting your desktop design whatsoever.
What happens in cell phone mode stays in cell phone mode.
Okay.
Mobile mode is for mobile mode and desktop is for desktop right.
So nothing has changed in here we still have this nice beautiful design.
What we're going to go ahead and do now is move over to the next lecture where we're going to talk about
the tablet design.
Okay.
Which is also very important thing to do.
But the by far primary ones are desktop and cell phone with an extra emphasis on cell phone because
more than half of your traffic will be coming from there.
If you have any questions we'll be in the Q and A.
So see in the next lecture guys.