1 00:00:00,800 --> 00:00:05,870 Welcome back to another new section, and in this section, we're going to be discussing some more advanced 2 00:00:05,870 --> 00:00:08,930 ways of making your website responsive. 3 00:00:09,870 --> 00:00:14,860 So our first topic for the section is going to be mobile first versus desktop first design. 4 00:00:15,150 --> 00:00:21,150 So before we go on to describe what a mobile first or desktop first approach is, we need to correctly 5 00:00:21,150 --> 00:00:24,840 understand what the term responsive web design means. 6 00:00:25,830 --> 00:00:30,750 Now, I know we've done this before, we've created a responsive website in when we were creating the 7 00:00:30,750 --> 00:00:36,930 digital project, but since this is the advance section, I want to speak about responsive design in 8 00:00:36,930 --> 00:00:37,860 a little more detail. 9 00:00:39,240 --> 00:00:45,560 So the term responsive design was first coined by Ethan Markert, I hope I'm pronouncing that correctly. 10 00:00:46,380 --> 00:00:53,160 So it's a method by which you create a website such that its view gets automatically adjusted depending 11 00:00:53,160 --> 00:00:55,260 on the size of your user's screen. 12 00:00:55,920 --> 00:01:02,580 So in this way, your users can browse your website seamlessly, irrespective of what device or browser 13 00:01:02,580 --> 00:01:03,060 they use. 14 00:01:03,900 --> 00:01:05,250 So true responsive design. 15 00:01:05,250 --> 00:01:11,730 You only need one website, not one for each device or one for desktop computers and one for mobile 16 00:01:11,730 --> 00:01:12,240 devices. 17 00:01:12,780 --> 00:01:19,350 But you can have two approaches to making your website responsive, and that is the mobile first approach 18 00:01:19,560 --> 00:01:21,930 and the desktop first approach. 19 00:01:22,890 --> 00:01:27,270 So which approach do you go for, mobile first or desktop first? 20 00:01:28,140 --> 00:01:32,790 Well, again, before coming to that decision, you need to first understand what each of these approaches 21 00:01:32,790 --> 00:01:35,710 mean and when is the best scenario to apply them. 22 00:01:36,480 --> 00:01:39,420 So let's think about the desktop first approach first. 23 00:01:40,230 --> 00:01:46,230 The desktop first design involves designing for a typical desktop computers monitor, which is usually 24 00:01:46,230 --> 00:01:49,380 somewhere between 12 hundred to eight hundred pixels. 25 00:01:49,380 --> 00:01:55,010 And Whip, once you've designed for a typical screen of this width and it looks perfect and works great, 26 00:01:55,500 --> 00:01:57,680 you can then start moving downwards. 27 00:01:58,050 --> 00:02:03,450 You can then think about how it's going to look on a tablet device, which is around a nine hundred 28 00:02:03,450 --> 00:02:05,370 twelve hundred pixels in width. 29 00:02:05,760 --> 00:02:10,470 When you think about this, you also need to think about whether this is going to be on portrait or 30 00:02:10,470 --> 00:02:14,610 landscape mode because your website might look different at different width. 31 00:02:15,060 --> 00:02:21,090 And finally think about different mobile phone widths, which can go to any width between four hundred 32 00:02:21,090 --> 00:02:22,380 and nine hundred pixels. 33 00:02:23,240 --> 00:02:29,060 So the desktop first design is based on the assumption that your visitors or most of your visitors will 34 00:02:29,060 --> 00:02:35,450 browse your website on a desktop computer, so you modify the website to adapt different devices, including 35 00:02:35,450 --> 00:02:40,040 smartphones and tablets, once you're done designing for the desktop. 36 00:02:40,850 --> 00:02:47,750 You scale it down step by step, it's important to note here that the desktop first approach involves 37 00:02:47,750 --> 00:02:50,300 the use of the max width property. 38 00:02:51,170 --> 00:02:56,900 In your media queries, because you're scaling downwards, I think by now you understand that so far 39 00:02:56,900 --> 00:02:59,420 we have been using the desktop first approach, right. 40 00:02:59,440 --> 00:03:02,440 We want to introduce you to the max with property. 41 00:03:03,170 --> 00:03:07,790 So I'll take you back to our previous project that we had created, the digital project. 42 00:03:08,450 --> 00:03:11,360 And I'll open the media query docs file. 43 00:03:11,360 --> 00:03:17,970 And just to show you, you'll notice in this project, the Maxford property is being used everywhere. 44 00:03:18,000 --> 00:03:20,210 See Max with, Max with. 45 00:03:20,540 --> 00:03:27,740 We first designed for the desktop and then we move downwards for twelve hundred pixels max with one 46 00:03:27,740 --> 00:03:30,740 thousand twenty three pixels, then max at seven sixty seven pixel. 47 00:03:30,740 --> 00:03:37,190 So we went further down, we started from the biggest screen and then we moved downwards towards the 48 00:03:37,190 --> 00:03:38,170 smallest screen. 49 00:03:38,750 --> 00:03:44,120 So we've used the max with properties in all our media because we wanted to specify what should be applied 50 00:03:44,120 --> 00:03:48,570 when the device width is at most this many pixels. 51 00:03:49,160 --> 00:03:54,740 So we used the max with property in all our media ways because we wanted to specify what should be applied 52 00:03:54,740 --> 00:04:00,500 when the device width is at most these pixels first at most. 53 00:04:00,770 --> 00:04:05,780 If it's a twelve hundred pixels, this should be applied when the width of the screen is at most one 54 00:04:05,790 --> 00:04:06,790 thousand three pixels. 55 00:04:07,160 --> 00:04:08,770 We want these things to be applied. 56 00:04:09,260 --> 00:04:15,220 OK then when it's maximum 767 pixels, we want these things to be applied. 57 00:04:15,620 --> 00:04:22,370 So that's why it's pretty clear that so far we've been using the desktop approach and I'll also tell 58 00:04:22,370 --> 00:04:24,510 you why we've been using desktop approach. 59 00:04:24,560 --> 00:04:30,710 I personally like to use the desktop first approach, but yeah, it depends on your situation. 60 00:04:30,710 --> 00:04:33,080 It's not like you always should use the desktop first approach. 61 00:04:35,460 --> 00:04:41,610 Now, then, what is the mobile first approach, the mobile first approach design process is just the 62 00:04:41,610 --> 00:04:43,490 opposite of the desktop first approach. 63 00:04:43,860 --> 00:04:49,530 That means you initially designed the website for the smallest mobile devices possible and then scale 64 00:04:49,860 --> 00:04:53,030 upwards to adapt to desktop computers. 65 00:04:53,640 --> 00:04:57,390 So you design for smaller fonts, then optimize them for tablets. 66 00:04:57,630 --> 00:05:01,140 Then finally, for larger screens are desktop computers. 67 00:05:01,620 --> 00:05:04,980 In other words, you scale your website up step by step. 68 00:05:05,320 --> 00:05:07,320 You are moving in reverse here. 69 00:05:07,770 --> 00:05:14,080 So it's important to know that the mobile first strategy involves the use of the Menwith property in 70 00:05:14,080 --> 00:05:19,590 your media, which contrary to the max with queries that we used to use in that we have been using in 71 00:05:19,590 --> 00:05:21,070 the desktop first approach. 72 00:05:21,690 --> 00:05:26,850 This is because once you've made the design for a smaller device, you want to scale up. 73 00:05:27,210 --> 00:05:33,390 So each time you want to specify what should be applied, when the device width is at least this many 74 00:05:33,390 --> 00:05:39,000 pixels, when it is at least twelve hundred pixels, when it is at least nine hundred pixels. 75 00:05:39,030 --> 00:05:39,420 All right. 76 00:05:40,720 --> 00:05:45,780 You can usually tell if a website has been designed for mobile devices are not from the you are allowed 77 00:05:45,790 --> 00:05:53,660 the site, usually mobile phones, websites start with an M, for example, M dot Facebook dot com. 78 00:05:54,370 --> 00:05:58,480 So let us look at what the difference is between the two approaches are. 79 00:05:59,380 --> 00:06:05,170 So when do you use mobile first approach, when you want to create a good user experience with the mobile 80 00:06:05,170 --> 00:06:06,160 and user in mind? 81 00:06:06,900 --> 00:06:11,370 And when do you use the desktop first approach when you're thinking about the desktop user first? 82 00:06:12,430 --> 00:06:18,700 OK, content of the mobile first approach is of high priority and design comes later. 83 00:06:19,270 --> 00:06:24,040 Whereas for desktop, first approach, content and design are more or less the same priority. 84 00:06:24,050 --> 00:06:28,250 In fact, sometimes design is of more priority than content in your store. 85 00:06:28,320 --> 00:06:33,730 First approach, your mobile first approach requires more time and effort to develop since you have 86 00:06:33,730 --> 00:06:36,460 to take a lot of mobile devices into consideration. 87 00:06:37,180 --> 00:06:42,550 Whereas the desktop first approach requires less time to develop, you can consider a series of mobile 88 00:06:42,550 --> 00:06:46,360 phones with similar width as like one unit. 89 00:06:46,780 --> 00:06:47,230 All right. 90 00:06:48,160 --> 00:06:54,820 Download time mobile first approach websites usually takes less time because they have less clutter, 91 00:06:54,830 --> 00:06:58,300 they have less design elements and are more optimized. 92 00:06:58,300 --> 00:07:03,680 The images and everything are also a lot more optimized in mobile first websites, whereas for desktop, 93 00:07:03,680 --> 00:07:08,470 for websites, they usually take a more resources because you have a lot of animations and you have 94 00:07:08,470 --> 00:07:13,480 a lot of interactivity and you know where things moving from here to there and stuff. 95 00:07:13,750 --> 00:07:16,180 And you usually have high resolution images. 96 00:07:16,900 --> 00:07:22,000 High resolution images are there for both, but usually for desktop for you require larger images. 97 00:07:22,690 --> 00:07:25,230 And so it requires a higher load time. 98 00:07:26,080 --> 00:07:30,250 Mobile first designs are usually scaled up. 99 00:07:30,910 --> 00:07:37,870 When you scale up a mobile first design to a desktop, it usually looks a little dry because you've 100 00:07:37,870 --> 00:07:39,330 considered mostly the content. 101 00:07:39,340 --> 00:07:40,870 You've not considered the design so much. 102 00:07:40,870 --> 00:07:46,360 And usually when you're designing for the phone, you have less elements on it, less design elements, 103 00:07:46,750 --> 00:07:47,410 less clutter. 104 00:07:47,710 --> 00:07:50,140 And so what happens when you scale it up? 105 00:07:50,890 --> 00:07:54,790 Those design elements become a little too sparse for your desktop. 106 00:07:55,690 --> 00:08:02,950 And so because of the lack of design elements, larger screen areas remained unused and sometimes functions 107 00:08:02,950 --> 00:08:09,280 also are left unexpended because there aren't much functions, functionality inside designs for the 108 00:08:09,280 --> 00:08:10,150 smaller devices. 109 00:08:11,010 --> 00:08:16,440 Whereas if you're using desktop first approach and you're scaling down, it's easier to strip down design 110 00:08:16,440 --> 00:08:21,630 elements from a desktop, like if you have a lot of design elements, you have a lot of things going 111 00:08:21,630 --> 00:08:23,510 on on the screen for your desktop. 112 00:08:24,060 --> 00:08:28,430 It's easier to remove those elements and just make it simple when you're scaling down. 113 00:08:29,070 --> 00:08:32,400 So it's easier to scale down than to scale up. 114 00:08:33,510 --> 00:08:40,560 So now comes the question, when do you use desktop and when do you use mobile phones devices? 115 00:08:41,250 --> 00:08:44,950 So first, let's look at when do you use desktop for design? 116 00:08:45,690 --> 00:08:50,880 So you use desktop first designs when you have more than 60 percent of your traffic coming from desktop 117 00:08:50,880 --> 00:08:51,420 devices. 118 00:08:51,450 --> 00:08:52,370 That's an obvious thing. 119 00:08:52,860 --> 00:08:58,320 You use it when your website interface needs to be feature rich and design rich and you want it to have 120 00:08:58,560 --> 00:09:00,300 complex and enhanced visuals. 121 00:09:01,020 --> 00:09:07,260 Also, you use desktop first approach when your product is intended for use on a desktop, for example, 122 00:09:07,410 --> 00:09:10,820 when you have some sort of a productivity tool or a software, the service. 123 00:09:11,100 --> 00:09:17,280 So anything that you require to be run on a desktop rather than a mobile phone device, it's better 124 00:09:17,280 --> 00:09:19,440 to use the desktop for support for that. 125 00:09:20,190 --> 00:09:25,950 And when do you apply the mobile first approach when you have more than 60 percent of your traffic coming 126 00:09:25,950 --> 00:09:27,000 from mobile devices? 127 00:09:27,030 --> 00:09:27,630 Obviously. 128 00:09:28,670 --> 00:09:35,600 When you need just a simple and minimalistic interface with just a few core features and when your product 129 00:09:35,600 --> 00:09:41,390 is one of the on the go categories like entertainment, lifestyle, news, so you have a small news 130 00:09:41,390 --> 00:09:43,220 app, you don't require much in it. 131 00:09:43,220 --> 00:09:47,990 You don't need it to be very nicely designed with lots of design elements in it. 132 00:09:48,200 --> 00:09:50,300 Just a few things instead of just the news is enough. 133 00:09:50,300 --> 00:09:51,350 People just want to see the news. 134 00:09:51,350 --> 00:09:52,010 Nothing else, right? 135 00:09:52,550 --> 00:09:57,560 Similarly, when you have a lifestyle app, people just want to see maybe one or two images. 136 00:09:57,560 --> 00:09:59,660 They don't want to see lots of designs. 137 00:09:59,660 --> 00:10:05,690 But let's say you have something like a perfume store, like an online store which sells perfumes. 138 00:10:06,200 --> 00:10:07,880 Now, this could go both ways. 139 00:10:07,880 --> 00:10:16,040 You could either want only if you want your users to mainly see images of the perfumes, then a mobile 140 00:10:16,040 --> 00:10:17,030 first design is fine. 141 00:10:17,300 --> 00:10:22,880 But if you want them to be enticed by the whole by the look of your website and you know you want it 142 00:10:22,880 --> 00:10:28,450 to be really attractive, then you would rather want to go to the desktop approach. 143 00:10:29,060 --> 00:10:29,420 Right. 144 00:10:30,230 --> 00:10:32,390 But again, it totally depends on your requirement. 145 00:10:32,390 --> 00:10:37,580 If you think most of your traffic comes from mobile phones, if you think most of your clients will 146 00:10:37,580 --> 00:10:41,630 access your website through mobile phones, then obviously a mobile phone design is better. 147 00:10:41,930 --> 00:10:46,940 But if you think most of your traffic is going to come from desktops, then of course a desktop first 148 00:10:46,940 --> 00:10:47,780 approach is better. 149 00:10:48,620 --> 00:10:55,700 So this was a whole rundown about mobile first design and the rest of us design ultimately is going 150 00:10:55,700 --> 00:10:58,240 to be up to you to decide which one you want to go for. 151 00:10:58,670 --> 00:11:04,250 But we are not going to discuss the mobile first approach in this course because it's going to be a 152 00:11:04,250 --> 00:11:05,540 lot time consuming. 153 00:11:05,540 --> 00:11:10,820 And at the same time, it's more design based because discourse is about designing. 154 00:11:10,850 --> 00:11:12,600 Right, using system design. 155 00:11:12,890 --> 00:11:18,200 So I want to show you different ways in which you can design websites, create more design elements 156 00:11:18,200 --> 00:11:19,520 into your page. 157 00:11:19,520 --> 00:11:25,490 And that's why I feel a desktop first approach is better than a mobile first approach, at least when 158 00:11:25,490 --> 00:11:25,970 you're learning. 159 00:11:26,150 --> 00:11:26,540 All right. 160 00:11:26,990 --> 00:11:32,810 So we're going to move on to the next lesson where I'm going to show you how you can make your website 161 00:11:32,810 --> 00:11:33,800 responsive. 162 00:11:33,840 --> 00:11:40,790 Our Lakeview website responsive and make it so that it's nicely and seamlessly accessible in different 163 00:11:40,790 --> 00:11:43,210 types of devices as well as browsers. 164 00:11:43,550 --> 00:11:45,260 So I'll see you in the next lesson.