 I recently ran a poll over on Twitter and the results of it surprised me so much. I wasn't planning this video for right now, but I feel like I have to do it. Hi there, my name is Kevin and if you're new here at this channel, I make videos on how to make the web and how to make it look good with weekly tips, tricks, and tutorials. As I said, I ran a poll on Twitter and the question that I asked was, when you're writing your CSS, do you write it mobile first or desktop first? Meaning are you writing it, you know, are you designing or writing the CSS for a desktop site with all its complexity and then taking away that complexity and the columns and all that to go down? Or are you starting with a small one and are you adding stuff on as you go bigger? So I'd love to know what you do and I would say to leave a comment down below but I have another question for you in a second but the reason that I made this video is because the results were really shocking to me and I honestly thought it'd be like 70 to 80 percent of people saying mobile first. It's actually like 65 percent of people who said that they do desktop first and I don't know, when the whole mobile thing started coming up, I remember it's such a big push, mobile first, mobile first, mobile first, it just got like ingrained into me and I just thought that's what everyone did to be honest. I didn't think that it was even a thing, I just asked it, I don't know, honestly. I was just curious to see if there were still people who did desktop first. So I'm making this video because I want to give my argument to why I think mobile first makes a lot more sense because I really, I understand the thinking, I'm going to talk more about that thinking after but I understand why that happens but I want to show my argument for it. I want you to listen to my argument and then if you disagree with me or if you have other reasons why you like desktop first, leave them down in the comments below because I really want to understand why people prefer desktop first. Oh and just one really quick thing before we get to that, I have a bonus thing all the way at the end that shows you how you can even make columns of text without using any media queries or anything so it's not even like mobile first, desktop first, the whole thing sort of goes out the window in a situation like that which is really cool. So make sure you stick around for that one but let's go and see why I think mobile first is the best. This is the layout that we're going to be working on but just so you know, I got all of this code from CSS Zen garden. I got an email from someone who reminded me of this and it's a really cool site where the idea is you download the HTML from here and just download their HTML file and you're not allowed to touch it. Now I did, I added a Google font but the idea is you don't touch the HTML at all. You can only add or modify to the CSS. I didn't even download their CSS file. I just started from scratch. You can see other cool things that people have done with it so this one's really neat. You get different ideas to make layouts using the exact same HTML so I thought that'd be a good example for here plus it gave me some content to work with but if you're just learning HTML and CSS, I strongly recommend checking out CSS Zen garden and seeing what you can do with it. It's a really cool learning tool. So here we have my CSS Zen garden layout. You can see I haven't done much. I've just added some type, changed the fonts in it and added some background colors to it, changed the link colors. I've really done nothing else to it, literally. There's nothing layout wise going on, right? Just some padding, some background colors, that's it. Nothing else. So I've left the HTML. You can see all I've done here. I've gone through, added my typography stuff, added some colors, added some max widths so here, like, we didn't want this to get any wider but nothing too special there. Get down to here and now, you know, there we go. That's it. And that's just a nice simple page like this. It looks like crap though. I'm on a big screen. I don't like what it looks like. And this is where you start wanting to build a layout for it. And my argument for why we should always code mobile first and why it makes a lot of sense to code mobile first is right now, I haven't worried about the layout at all, except adding padding, I guess, to it. I could have had no padding on anything, but as soon as I have a background color, I'm always adding that. My argument is that if I shrink this down, I have a fully functioning mobile layout with no issues. Everything is there. Everything is working. It's pretty much done. That's what my mobile layout is going to look like. Again, it's not a fancy layout. It's a pretty simple layout, but it's working. Now, is it working at large screen sizes? No, it's really not. I'm running into stuff. I'd want like two columns here for those. So we sort of have two choices. If we're doing this the desktop first way, what I'd want to do is this is right here is my main and then I have my sidebar. And actually, because the Zen garden was created back when floats were our layout tool, you'll notice that I have my page wrapper and then I have my intro, my main and my sidebar. They're all like this and the whole idea with the Zen garden is you don't actually touch the HTML. So one issue with this is I can't like, I don't have anything to put a display flex on. So I'm actually going to put the display flex on my page wrapper. And we'll see. So I know I have all of these styles up here, but I just want to keep all the layout stuff together to show what I'm going to talk about. So if I come here and I do my page wrapper and I do a display flex on that, it's going to break a whole bunch of stuff. And now I realize this isn't the type of constraint you might always have because usually you're going in the markup and you're making some changes to it. So we're going to have extra code here we might not normally have. But I'm also going to put on here a flex wrap of wrap because that's not the default, but it's going to let things now it sort of falls into a bit more of a normal layout, right? Because the flex wrap wrap means it's looking at the actual width. So all of these by default have a width of 100% on them. So they're stretching the full size. So there's no room for them all to squeeze next to each other. And then because I've done that, I can select my main and give that like a width of let's say 50%. I can select my sidebar and give that a width of say 30%. And now I have a bit of a layout coming together. Now actually I'll show you a cool trick. You always see that you can center something like this. If I look at that one, that's my let's just find it my summary. So I have a width and then a margin zero auto to center it. So my left and right margin of auto. So something it's interesting is if you have two things next to each other, you can actually do that margin left of auto for the one on the left, and a margin right of auto for the one on the right, and it's still going to center it. Cool, right? So this one here has the margin left of auto. This one here is the margin right of auto. I think that's pretty neat. Anyway, there we go. Now my layout is working at big screen sizes. So if I was taking a desktop first, that's what I would have to do. And then I'd have to fix it because at small screen sizes, it's broken. Except man, that's annoying because now I have to come down and create a media query. So at media, max width of let's say, I don't know 900 pixels, just as a random guess, random number, but it works. And then I'd come in and say, okay, well, my page wrapper can go back to a display of block, and that's going to fix some stuff. But then I also have to come and say that my main is back to a width of 100%. And my sidebar, and I mean, I guess I could keep those together. So we can do like main and sidebar sidebar. So we need to reset the widths on those and save. And okay, now we're back to whoops, something sidebar. There we go. And now we're back to where we were at the small screen sizes. But and remember, this is a really simple example, but I'm pretty much going back to what I had before I wrote any of this. So why am I writing all that, then overwriting the parts that are causing problems at small screen sizes, when I could just take all of this, let's do like, I'm going to do it here, you can see I'm going to cut that. And I'm not using the shortcut. I want to show what I'm doing. I'm going to delete this. This is like code that I don't need. It's actually not serving a purpose. Because if I switch this max to a min, all those those code that code I had before is completely useless, completely. So now I have my two columns here that are working. And at the small screen sizes, I have a perfectly usable layout. Now maybe you still have to override some paddings and stuff like my padding is really big here. So like ideally I'd have a smaller padding and then the big screen sizes, I would increase the padding size and maybe the font sizes are going to change. And there's some things you're going to overwrite anyway. And from a layout perspective, a lot of the time, you don't actually need anything fancy for the mobile layout. You shrink it down, you set up all your fonts, your colors, your backgrounds, and you're done. But yes, of course, there's sometimes some fancier things, you have little components that definitely need some display flex on them, you have a navigation which can definitely be more complicated. I'm not saying this is 100% always the situation. But I don't understand this idea of making this really complex layout. And again, this one's not complex, but making a complex layout and then overriding everything for a simple layout when we started with the simple layout in the first place, when you just write HTML, like let's let's disable my CSS here. I think it's this one. If I disable that, guess what? I have a perfectly responsive website. It doesn't look very nice, but it's responsive. It's working. There's nothing wrong with it. I don't have any side scrolling, no matter what I do, unless I go so small that my text is overflowing out the sides. But I have a responsive layout by default. If you have no CSS, you have a responsive layout, you only lose that responsiveness when you build in things that prevent it from being responsive use positioning that you know absolute positioning is a big one or using set widths or you're setting up columns that just there's not enough space for them all to be next to each other. Take advantage of that. You have a responsive layout, set it all up typography background colors, you're pretty much good to go. And then after that, you come in and you build your more complex layout within your media query. You're writing less code most of the time. And I find it a much simpler approach to take. So there is why I think you should be doing sites mobile first rather than desktop first. I really want to know leave a comment down below to let me know if you disagree with me. And I think the reason a lot of people like desktop first is a when we first start learning how to make websites, usually we don't learn responsive right away, we do static. And if you're learning static, you're doing it for big screens because that's where the complexity is that's where your columns are all the interesting stuff is there. So you learn a lot more if you're doing it desktop first. And then we get used to doing desktop because that's what we know. And then we just go that way. I also think there is something about it because when I design so if I'm in Figma FM and XD anything like that, I actually start doing desktop first and then I pair it down and go the other way. But it's really different because I just drag and drop and move stuff and move boxes around. I'm not writing code and it's I just find it I guess my the way my brain works that way, it makes more sense. So I get why people that makes sense. If I do it, if I find that more obvious, I understand why people think the other way around if the writing code is more obvious to do it that way too. But now that I've shown you this, do you still think that desktop first is the way to go? If yes, let me know but also let me know why please. I really want to know why. But as promised, here's that special bonus tip here at the end where we can do something without any media queries and without having to worry about desktop first and mobile first and it just works. It's super cool. Let's see it. So this area here is my preamble and what I'm going to do is come here and I'm just going to write columns. Check that out. Nice and simple. So I have my columns there and how many we want. So you have a choice. I can say this is like three columns and boom, I get three. Now that's a bit of a problem. So I can actually come here and say that column span is all and I can have it span all the way across. Now the problem with three columns is that's terrible. So what I could actually do is come here and give this an ideal size. This is almost like Flexbox where if you have it on the regular no wrap, you're more worried about default sizes. You're more worried about ideal sizes. So what I could do here is instead of saying an actual number, I can give a size. So I could say something like let's just do 100 pixels and be way too small, but we can see that it's creating 100 pixel columns. And what it's doing is you'll see it's grading more and more columns or less and less columns and the idea here is that because this is at 100 pixels, it's trying to do it 100 pixels across. So we have one, two, three. Now they can be smaller or bigger and actually let's boost that up to 200. I think it'd be a bit more obvious. So here, this is bigger than 200 pixels, but it can't fit two of them next to each other. So this becomes like the minimum column size. And then as soon as it can fit two, we get two. As soon as it can fit three, it'd go to three and four and five and so on. And you could set something up with a max width here to prevent it from getting too big or running into too many columns. If you don't like how it's working, you can also set this in something like M. So if I do 20 M, same idea. It'll work just like that and work really, really well. And just like that, you can set it up not to need any media queries, really nice and easy. And there we have it. And if you like this video and you're sort of, you know, you might even be going mobile first. I don't even write media queries right now. The whole responsiveness thing just confuses me. I don't like it. But you want to learn it because you know that websites have to be responsive today. We need sites that can adapt to screen size. And you want to start understanding more about it. When to use media queries, how to use media queries, the other things that come into it, how to stop content from overflowing, whatever it is, you have issues with it. I am currently working on a course. It's a completely free course 100% free and it's going to be dropping on the 13th or actually it's going to be starting on the 13th. It's going to be a drip course. It's going to be a lot of fun. The link to it is in the description down below. So I'd encourage you to go check that out. You can read a little bit more about what the course is and if that sounds good, sign up for it because on the 13th, when the course starts, it is closed. You cannot join it. I'm going to reopen it again probably in two, three months from now. But in the meantime, when people are going through the course, the doors on that one are closed. It's always going to be free. So if you do miss out on it, or if you're watching this in the future and you did miss out on it, it's not the end of the world. The course will be back. It will always be a free course. But I wanted to do something not on YouTube because it gives me a chance to invent more. There's going to be emails with it. There's going to be video lessons with it. It's really for people that are just starting to get into responsive design and who are struggling with it. So if that sounds like you, go and check that out. Thank you very much for watching. A huge thank you to my patrons for supporting everything that I do here. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.