Are you writing responsive CSS the wrong way?

I recently ran a poll over on Twitter and the results of it surprised me so much I just 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 of 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 a good'n have a 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 65% of people who said that the new desktop first and I don't know I when the whole mobile thing started coming up I remembered such a big push Mobile first mobile first mobile first it's got like ingrained into me 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 beep Epperly 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 gonna 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 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 in 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 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'd strongly recommend checking out CSS Zen garden seeing what you can do with it it's a really cool learning tool all right so here we have my CSS and garden layout you can see I haven't done much I've just added some type you know change the fonts in it and added some background colors to it change 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 width 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 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 going 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 it's gonna look like it's not a given 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 it's I'm running into stuff I'd want like 2 columns here for those so we sort of have 2 choices if we're doing this the desktop first way what I'd want to do is this isn't 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 gonna 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 gonna 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 gonna 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 widths 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 Akshay 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 drew let's just find it my summary so I have a width and then a margin:0 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 have to fix it because it small screen sizes it's broken except man that's annoying because now I have to come down and create a media query so add 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 a block and that's gonna fix some stuff but then I also have to come and say that my main is back to width of under percent and my sidebar and I mean I guess I could keep those together so you do like main and decide bar sidebar so we need to reset the widths on those I hit save and okay now we're back to whoops something slider bar there we go and now we're back to where we were at the small screen sizes but and 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 over writing the parts that are causing problems at small screen sizes when I could just take all of this let's do like I'm gonna do it here you can see I'm gonna cut bat and I'm not using the shortcut I wanna show what I'm doing I'm gonna 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 that the small screen sizes I have a perfectly usable layout now maybe you still have to override some padding's 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've been increased the padding size and maybe the font sizes are gonna change 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 this 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 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 up 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 than 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 started 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 if im an XD anything like that I actually start doing desktop first and then I pare it down and go the other way but that's really different cuz I just drag-and-drop and move stuff and move boxes around I'm not you know 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 you know that makes sense if I do it if I find that more obvious I understand why people think the other way around you know wait for the writing code it's 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 is that the special bonus tip here at the end where we can do something without any media we reason without having to worry about that stuff first a 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 gonna do is come here and I'm security columns check out it nice and simple so I have my columns there and how many we want so you have a choice I could 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 nowrap 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 you know I could say something like let's just do 100 pixels I mean 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 curating more and more columns or less and less columns and the idea here is that because this is at a hundred pixels it's trying to do it 100 pixels across if it has you know 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 would 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 they 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 query is really nice and easy and there we have it and if you like this video and you're sort of you know you know you might even be going mobile first I don't even write media queries right now the whole responsiveness thing just confuses just confuses me I don't like it but you want to learn it because you know that's the websites have to be responsive today they we need sites they 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 stops 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 gonna reopen it again probably in two three months from now but in the meantime while people are going through the course the doors on that one are closed it's always gonna 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 done on YouTube because gives me a chance to event more there's gonna be emails with it there's many 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 corne the internet just a little bit more awesome

Channel: Kevin Powell

Views: 234,153

Rating: 4.9437609 out of 5

Keywords: Kevin Powell, tutorial, html, css, responsive css, mobile-first css, mobile-first, mobile-first web design, mobile-first responsive build, mobile-first strategy, mobile-first meaning, mobile-first approach, mobile first web design, desktop-first, desktop-first approach, what is mobile-first, what is mobile first, how to write mobile first css, why mobile first, why write mobile first css, responsive webdesign, responsive website, responsive design, responsive web design

Id: 0ohtVzCSHqs

Length: 14min 14sec (854 seconds)

Published: Wed Apr 01 2020