WEBVTT 00:00.240 --> 00:01.260 All right my friends. 00:01.260 --> 00:08.220 Let's go ahead and make the user interface absolutely beautiful for all of the people visiting our website 00:08.250 --> 00:09.540 on their mobile. 00:09.600 --> 00:10.620 OK. 00:10.740 --> 00:16.290 So the first thing that we're going to go ahead and do is change the size of our logo because we remember 00:16.290 --> 00:23.250 from previously that it was just too big we're getting two rows when it came to the menu and the logo. 00:23.250 --> 00:28.420 So what I'm gonna do is click on customized up here and then I'm gonna click up here which is gonna 00:28.440 --> 00:30.420 take me to header and then a logo. 00:30.420 --> 00:31.470 There we go. 00:31.560 --> 00:36.320 And now I'm gonna go ahead and see how the website looks on our cell phone right. 00:36.360 --> 00:37.230 I click here. 00:37.380 --> 00:41.340 Down here below and we can see that we're having this issue right. 00:41.340 --> 00:43.410 So the logo is just too big. 00:43.410 --> 00:49.230 The menu gets put on the row underneath and we get all of this wasted space and all of the space is 00:49.260 --> 00:51.740 absolutely precious when it comes to everything. 00:51.750 --> 00:55.140 But even more so on cell phone because the screens are so small. 00:55.140 --> 00:59.960 So as you can see on the desktop this size is actually two hundred and eighty. 00:59.970 --> 01:04.350 And if I move over here to cell phone you can also go down there. 01:04.410 --> 01:08.970 This is also gonna be on two hundred and eighty but that is gonna be too big for us. 01:09.030 --> 01:12.030 So we're going to go ahead and change this up a little bit. 01:12.030 --> 01:16.560 You can see that if I am at 280 like before it's just too big. 01:16.740 --> 01:18.530 We're going to go down. 01:18.840 --> 01:20.020 We're going to go. 01:20.040 --> 01:23.490 There we go so let's go with say 200. 01:23.490 --> 01:29.700 Now we can see that we have our our logo and our menu side by side and we're saving so much space. 01:29.700 --> 01:31.290 Now look at look at this once again. 01:31.290 --> 01:37.060 If I increase we get all this wasted space go back down to 200 looking much better. 01:37.140 --> 01:38.600 So I'm super happy with this. 01:38.610 --> 01:40.680 I'm just gonna go ahead and click on publish. 01:40.680 --> 01:41.310 There we go. 01:41.320 --> 01:44.180 Now let's head back into elementary. 01:44.190 --> 01:48.840 All right guys who are back in al-Mansour and the first thing I'm going to go ahead and do is go down 01:48.840 --> 01:54.410 to the bottom again click on responsive mode and change it to mobile mode. 01:54.420 --> 02:01.100 There we go and I am super happy with this right now with the logo and the menu looks perfect. 02:01.110 --> 02:06.180 We can even click on the menu and see how this looks looks really nice to be honest I'm loving that. 02:06.300 --> 02:12.660 So we're gonna go ahead and do some changes here like we can see right now that I think that this text 02:12.660 --> 02:15.390 right here needs a little bit more space. 02:15.390 --> 02:17.680 I'm gonna go ahead and change that up. 02:17.880 --> 02:24.450 So I'm gonna click here and then I'm gonna move over to style and we're gonna move over to typography 02:24.780 --> 02:30.510 and then we're gonna move down to line height right here and we're just gonna go ahead and expand this 02:30.570 --> 02:34.090 a little bit something like this. 02:34.110 --> 02:39.640 There we go you can see that it's growing there it's changing the entire interface. 02:39.840 --> 02:41.310 Maybe that's a bit much. 02:41.310 --> 02:42.990 There we go. 02:42.990 --> 02:48.930 So we still want to keep in mind these things that we have the learn more button that is easily accessible 02:49.140 --> 02:53.300 which is really really nice and oh so important at the same time. 02:53.310 --> 02:58.980 The menu has become a little bit harder to reach because remember the thumb doesn't as easily go up 02:58.980 --> 02:59.370 there. 02:59.460 --> 03:04.020 But here you have to make the choice you're going to have the menu easy to read and that's going to 03:04.020 --> 03:07.490 be costing like 15 percent of the screen in my opinion. 03:07.500 --> 03:09.210 That's absolutely not worth it. 03:09.540 --> 03:14.740 So it's much better to put the menu a little bit higher and give them more of the content right. 03:14.790 --> 03:21.150 So there we go now is some more space in between here I am liking that maybe even a little bit less 03:21.150 --> 03:26.310 actually with the line height maybe a bit more the there is our sweet spot. 03:26.310 --> 03:26.790 There we go. 03:26.880 --> 03:31.790 So I'm going to scroll down and see if there's anything else that I'm not a big fan of. 03:31.860 --> 03:39.270 So we can see here for example that this text is getting quite crammed upright but it's still very important 03:39.270 --> 03:39.990 information. 03:39.990 --> 03:47.550 So what I would like to do is change the the look on this entire section so I'm gonna go ahead and click 03:47.550 --> 03:52.740 on on the edit section here and I'm gonna go ahead and remove some of the padding because you can see 03:52.740 --> 03:55.050 there's a lot of wasted space here. 03:55.060 --> 03:56.910 It's a lot of wasted space here. 03:57.000 --> 04:02.910 And that looked really good on the desktop but that doesn't look quite as nice on the cell phone that 04:02.910 --> 04:05.320 is just wasting precious space. 04:05.340 --> 04:11.370 So what I'm gonna go ahead and do is check out how much of the padding is actually on top here right 04:11.400 --> 04:18.390 now so that we can keep this padding the space in between the different section but then remove the 04:18.390 --> 04:19.940 padding to the sides. 04:19.970 --> 04:20.520 OK. 04:20.580 --> 04:25.110 So in order to do that I'm going to click on the padding and then go to desktop and we can see that 04:25.110 --> 04:26.610 it is set to 50. 04:26.730 --> 04:31.830 And what that means is that these even though there's no numbers these are also automatically set to 04:31.830 --> 04:32.670 50. 04:32.700 --> 04:36.390 That is how the automatic mobile responsive mode works. 04:36.450 --> 04:38.510 It just sets the same numbers. 04:38.520 --> 04:42.570 Now the Web site is beautiful even on a cell phone but it's not completely optimized. 04:43.230 --> 04:50.220 So what I'm gonna do is unloading these values and then I'm going to leave the top on 50 like that. 04:50.220 --> 04:53.230 So we still have the same amount of space going on. 04:53.410 --> 05:00.760 We're going to remove that zero like that and then I'm just going to click on and write one one in here 05:01.330 --> 05:02.560 and one in here. 05:02.590 --> 05:04.000 One in here. 05:04.000 --> 05:08.950 Now this is already looking much better but I still think that the padding is a bit too much here for 05:08.950 --> 05:15.000 the cell phone so I'm gonna go ahead and decrease that to let's say 25 might look a little bit better. 05:15.040 --> 05:19.180 So if we go down and we look at the top we can see that this is the best. 05:19.210 --> 05:23.140 Actually pops up here on the top and I am liking this. 05:23.140 --> 05:27.250 So you get into this entire screen right here and we get this text down below. 05:27.250 --> 05:29.020 Now there are two things we can do. 05:29.110 --> 05:32.030 Either we can leave this the way that it is and we can get. 05:32.080 --> 05:38.860 This is the best and most takes on our phone or we can actually increase the size of this background. 05:38.860 --> 05:44.080 Now scrolling down I'm actually really happy with this you can see that there is much less space wasted 05:44.080 --> 05:47.110 here and we still have this wonderful quote still here. 05:47.130 --> 05:52.510 Now I'm still gonna want to cover this and tell you above the fold section with this background so I'm 05:52.510 --> 05:53.780 going to move over here. 05:53.860 --> 05:59.980 Click on the section and then move over to the minimum height right then I'm going to be increasing 05:59.980 --> 06:03.250 it a little bit just like that. 06:03.250 --> 06:04.090 There we go. 06:04.090 --> 06:08.910 So now we can see that it's covering the entire first part here. 06:08.920 --> 06:10.950 Now this is affecting the rest of the distance. 06:10.980 --> 06:13.700 Now we might want to go back here to this text. 06:13.780 --> 06:17.980 Go to typography and change the line height a little bit. 06:17.980 --> 06:23.290 There we go looking better and maybe a bit more spacing in between these columns. 06:23.290 --> 06:23.940 Right. 06:23.980 --> 06:29.770 So let's move over to style up here and let's move over to typography and play a little bit with the 06:29.770 --> 06:31.270 line height. 06:31.270 --> 06:33.370 There we go. 06:33.430 --> 06:35.400 Something like this. 06:35.410 --> 06:40.720 So this is starting to look really good right now I might want to use a even bit of a more. 06:40.720 --> 06:42.160 There we go. 06:42.160 --> 06:43.210 Business Made Easy. 06:43.220 --> 06:45.130 Let us show you how. 06:45.130 --> 06:45.600 OK. 06:45.620 --> 06:51.220 Now if we look at the background we can see that the moon is actually covering up to takes a little 06:51.220 --> 06:51.820 bit. 06:51.820 --> 06:57.010 What we could be doing is changing the position of the background as well to see if we get a better 06:57.010 --> 06:57.360 look. 06:57.370 --> 07:00.200 But I'm actually quite happy about this. 07:00.280 --> 07:06.070 So we're going to go ahead and scroll down and we can see that the quote We're still looking really 07:06.070 --> 07:06.360 good. 07:06.370 --> 07:09.210 Now we're remove the space in between. 07:09.250 --> 07:11.490 Actually we added a bit much here maybe. 07:11.500 --> 07:15.690 But I think it's good it's also going to depend on the resolution on the cell phone. 07:15.820 --> 07:17.230 So we're going to scroll down. 07:17.230 --> 07:20.240 It says get digital marketing hacks for free. 07:20.290 --> 07:20.880 Right. 07:20.980 --> 07:22.620 Get the lazy marketing hacks. 07:22.720 --> 07:27.400 And this is actually looking really good already now there are a couple of things that you might want 07:27.400 --> 07:27.900 to change. 07:27.940 --> 07:30.720 Now just click in here kind of updated this part. 07:30.730 --> 07:35.740 There are changes happening because we are moving around the different bits and I am liking this big 07:35.740 --> 07:39.510 time that we have this full ninety nine dollar value right here. 07:39.610 --> 07:42.700 Sign up down below and we'll have it sent to you. 07:42.730 --> 07:43.020 OK. 07:43.030 --> 07:43.970 Looking real good. 07:43.990 --> 07:45.610 Super happy about this. 07:45.790 --> 07:52.090 What I might want to do because now we have her back which is quite dark set up against our dark takes 07:52.090 --> 07:58.480 works really well up here but not so good down here for example we might want to actually make this 07:58.480 --> 07:59.260 part bold. 07:59.260 --> 07:59.860 Right. 07:59.860 --> 08:01.420 So I'm just going to go in here. 08:01.420 --> 08:04.000 I'm going to select this and I'm gonna make it bold. 08:04.000 --> 08:09.040 So now it's a little bit easier to read and to see and I am digging this design. 08:09.040 --> 08:10.100 There we go. 08:10.180 --> 08:13.160 And this form is looking super nice. 08:13.180 --> 08:18.940 We know that it's actually side by side on the desktop and on the mobile version there down below where 08:18.940 --> 08:27.110 we know also that the thumb will easily reach you click on my first name on e-mail and also easily reach 08:27.110 --> 08:28.340 to click Send me the hack. 08:28.340 --> 08:30.970 So this is actually really good design. 08:30.970 --> 08:36.700 So we're gonna go ahead and scroll down and these are looking absolutely dreadful. 08:36.700 --> 08:38.850 This is this is not good. 08:38.920 --> 08:42.070 And this is because of the padding that we're using and the padding. 08:42.070 --> 08:46.870 They make a lot of sense on the desktop they look beautiful on the desktop but they don't translate 08:46.900 --> 08:48.850 well to the cell phone version. 08:48.880 --> 08:51.790 So what I'm gonna do here is start editing these a little bit. 08:51.790 --> 08:58.270 So I'm gonna start by clicking on the editing the section appear and start playing around a little bit 08:58.270 --> 09:03.700 with the padding I'm going to move over to advanced and now we are in the cell phone mode and first 09:03.700 --> 09:10.000 we need to check what the padding currently is on the desktop and we can see that is set to 70 right. 09:10.030 --> 09:10.350 Okay. 09:10.360 --> 09:11.770 It's set to 70. 09:11.830 --> 09:16.970 Now let's move over back to cell phone 17 might be a little excessive here. 09:17.020 --> 09:22.600 So I am going to unlink these once again because I do want the padding on the top and I'm gonna set 09:22.600 --> 09:27.250 that to 50 or let's go with 20. 09:27.250 --> 09:27.950 Let's go. 09:28.030 --> 09:29.440 Let's go with 40 this time. 09:29.450 --> 09:34.090 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 09:34.090 --> 09:39.490 better now for these swans we might want to set them to one we could see that they change themself and 09:39.490 --> 09:41.040 we on linked. 09:41.080 --> 09:44.160 So these are actually started to correct themselves a little bit. 09:44.160 --> 09:50.800 If we scroll down we can see that we're getting one course covering the entire screen at a time. 09:51.040 --> 09:54.990 And honestly guys this is looking quite nice is it's quite solid. 09:55.300 --> 10:01.040 So all I really needed to do and with this button as well so all I really needed to do wants to unlink 10:01.070 --> 10:06.960 this and that changed the padding for the cell phone version and everything is looking much better already. 10:07.310 --> 10:09.030 So I am definitely digging this. 10:09.080 --> 10:16.100 Now what we could do is or should do even is change the headline here in the header because it's looking 10:16.100 --> 10:17.330 absolutely dreadful. 10:17.330 --> 10:21.890 And what we're going to start off by changing is the size because it's not looking good in this size 10:21.890 --> 10:22.850 right now. 10:22.940 --> 10:25.480 So let's go ahead and play around a little with this. 10:25.530 --> 10:27.800 Do you wanted to have one row or two. 10:27.800 --> 10:30.850 Now I wanted to be on to like that. 10:30.850 --> 10:36.950 Best selling courses so now is gonna make a lot more sense right because you can read it and there's 10:37.010 --> 10:40.340 less space in between these and that looks much better. 10:40.340 --> 10:44.490 I prefer to go with 50 or 70 in the padding when it comes to desktop. 10:44.660 --> 10:49.160 Around 20 to 40 when it comes to mobile it completely depends on the design. 10:49.190 --> 10:52.040 But here I think it looks really good like this. 10:52.040 --> 10:56.650 So we have the best selling courses and then we're gonna have the courses rolling in like this. 10:56.690 --> 10:59.240 The buttons are there's one courses at a time. 10:59.240 --> 11:00.850 We have a little space on the side. 11:00.880 --> 11:03.290 But this is just a good part of the design. 11:03.290 --> 11:05.120 This is looking magnificent. 11:05.330 --> 11:05.810 Scroll down. 11:05.810 --> 11:10.160 We have the view all courses that is covering pretty much the entire screen. 11:10.160 --> 11:13.850 And then down below we have the privacy policy and terms and conditions. 11:13.850 --> 11:18.950 So guys right now I'm actually really happy with this design right. 11:18.950 --> 11:21.470 This is looking really good really nice. 11:21.470 --> 11:26.480 We have mainly changed the spacing between the letters and the padding. 11:26.570 --> 11:31.250 So when it comes to breaking your design it's usually going to be the padding and this is going to be 11:31.250 --> 11:33.980 very individual for your website. 11:33.980 --> 11:39.950 What do you think looks nice etc. Now I'm doing this very intuitively meaning there is no plan behind 11:39.980 --> 11:43.580 what I'm doing or rather there's no preparation to what I'm doing. 11:43.610 --> 11:45.650 I'm just designing to what I think looks nice. 11:45.860 --> 11:50.900 And as I go and I continue designing the website I may come back and do some changes. 11:50.900 --> 11:53.810 But right now I actually think this looks really good. 11:53.810 --> 11:57.930 We have the free on it's own row which I think looks quite nice. 11:58.070 --> 12:04.880 But what we could also do is change this header go to style typography and play around a little with 12:04.880 --> 12:06.020 the size. 12:06.020 --> 12:09.140 For example this is going to look good if they are on three rows. 12:09.140 --> 12:13.160 What about two rows two rows is two small three rows. 12:13.170 --> 12:18.040 It looks ok but actually I think this might be a little bit better. 12:18.080 --> 12:21.830 I'm gonna keep them on three rows like that. 12:21.830 --> 12:22.560 There we go. 12:22.570 --> 12:23.540 And I'm really liking this. 12:23.720 --> 12:25.750 So guys this is how you do it. 12:25.790 --> 12:31.340 All you need to do is first of all if you have a problem with the menu do you like within the beginning 12:31.340 --> 12:37.590 of the course then move over to elements or go down to responsive mode and change to mobile. 12:37.730 --> 12:43.700 And then the primary things you're going to want to change are 1 the letter spacing the spacing in between 12:43.700 --> 12:45.850 the letters like we did in the beginning here. 12:45.920 --> 12:50.880 It's gonna be to the size of the takes the headers et cetera N3 the padding. 12:50.930 --> 12:53.870 Now the padding is a big breaker of beautiful design. 12:53.870 --> 12:59.030 So when you link the padding it's just going to change up the entire design big time. 12:59.030 --> 13:00.740 So I'm really happy with this guys. 13:00.950 --> 13:05.480 And now don't worry this is not going to be affecting your desktop design whatsoever. 13:05.480 --> 13:09.020 What happens in cell phone mode stays in cell phone mode. 13:09.020 --> 13:09.600 Okay. 13:09.620 --> 13:13.540 Mobile mode is for mobile mode and desktop is for desktop right. 13:13.580 --> 13:17.350 So nothing has changed in here we still have this nice beautiful design. 13:18.140 --> 13:22.460 What we're going to go ahead and do now is move over to the next lecture where we're going to talk about 13:22.460 --> 13:23.920 the tablet design. 13:23.930 --> 13:24.490 Okay. 13:24.530 --> 13:26.740 Which is also very important thing to do. 13:26.930 --> 13:33.170 But the by far primary ones are desktop and cell phone with an extra emphasis on cell phone because 13:33.170 --> 13:35.810 more than half of your traffic will be coming from there. 13:35.870 --> 13:38.020 If you have any questions we'll be in the Q and A. 13:38.030 --> 13:39.590 So see in the next lecture guys.