5 simple tips to making responsive layouts the easy way

you've done all the hard work to make a really cool layout and then you make your browser window just a little bit smaller and all of a sudden you find something that's overflowing you let it a bit of a sigh but then you throw in a media query and you fix that and then you try changing things a little bit more you adjust your your browser window a bit just to test things out and then you find some text that's too big at small screens and you curse yourself a little bit and you start working on that and eventually you solve that problem then you decide to try out what if it's in portrait mode and things just fall apart there as well and you just feel like throwing your computer out the window luckily for us now we have a lot of modern css solutions that do make it just so much easier than it used to be so in this video what i'm going to be doing is giving you five tips to taking the headache out of making responsive websites hello there my friend and friends and welcome back to the channel i'm so happy to have you here and if you happen to be new here my name is kevin and here at my channel we learn how to embrace the cascade and fall madly deeply in love with css and if not in love with it at least to be a little bit less frustrated by it and i know responsiveness is something that i know people get very frustrated by so i'm hoping i can help you take that frustration away with these five tips back when i first making websites i didn't even have to worry about making them responsive we had a lot of other things that were a real pain but we had a fixed size you throw it in there you get it working on that and we didn't have to worry about anything because we didn't have this whole range of insane devices and everything from giant monitors to little tiny phones and and even watches and everything in between when responsiveness first started becoming a thing we had a lot of obstacles in our way because we didn't necessarily have the tools to properly deal with it at the time but we have a lot more now but before we even get into any of those tools my first tip revolves around having the right mindset and this applied back when we were doing it back in the day when things were just starting to change and we were getting away from having like two sites we had to maintain you had your mdot website which was like the mobile version and then a completely separate desktop one people started realizing that maintaining two sites for one site was kind of stupid so luckily that didn't really become a thing but we did have to evolve our mindset on how to make layouts and i think the most important thing the thing that i've said that has hit home the most for most people when it comes to mindset is that one thing you have to remember is before you write a single line of css your website is responsive the layout is going to work on really big screens and really small screens it might not be pretty on really big screens it might be kind of hard to read even because the line lens can get really long but the website adapts to the viewport no matter what you do with it i know images can overflow and that sort of sucks but we're not losing our text we're not losing anything along the way and i think understanding that and embracing that that can really help us out when we're writing our css and it's also when you do run into issues the thing to consider is you're the one who wrote the css that's causing that issue because you wrote some css it was working at one screen size but it broke on other sizes it's that css that you wrote and very often from my experience that means we actually have to take a little bit of a different approach in getting things working and that's what i want to look at with you through the rest of the tips that i have for you today so because it's us who are causing the problems my first suggestion to you and we're keeping this together with mindset and it's embracing this natural responsiveness of everything is when you start writing your css start first global first like the things that kill the most birds with one stone but don't worry about your layout first cover things like typography and colors and setting backgrounds and all of that it's actually going to get your site pretty far along the way without having to even worry about your layouts at all with the really big added bonus that your mobile layout won't be finished but it's not going to be terrible by any means so here's an example of a site where i've started doing things and i've stuck as simple as possible and you can see like there's issues i'm touching the sides of the screen and a few other things and you know there's some spacing issues but overall it's working everything is stacking i know it's a very simple site but you can imagine on more complicated sites as well as you do things and all i've done here is my colors i've set backgrounds and i've put a little bit of padding for each one of these sections that's it there's nothing too fancy going on here at all and i've also done this on my image just again we don't want our images to be overflowing which can happen so this is a nice simple one right there a max width on your images so they can adapt to their container so then i can come in and i have a container in my html already but i could just come in here and say padding of 0 on the left and the right and 2m on the right and the left and then i even maybe that's a little big actually let's go with one and i've solved that problem of my text touching the side so it doesn't take a lot for the mobile layout to be responsive and as i said the layout will be responsive as i grow this things are going to grow just fine it doesn't look pretty but it's not broken somebody could access this site and it's going to be perfectly fine now you're saying but kevin i don't want this ugly layout like that i want something that's a little bit more and i totally get it so the next thing is when you start thinking more about layout the very very first thing i'm going to suggest is avoid fixed sizes when i say fixed sizes i mean things like width 1000 pixels height 500 pixels or whatever it is setting like a fixed height or a fixed width it's only going to cause you problems so if we jump back into the editor here where i had my container if i come on this and i give this a width let's just say 600 so i think that will fit within my viewport there we go so i get this locking in at 600 pixels and then we can even do the margin 0 auto to center my containers on the screen and let's give them a border as well just so we can visualize a bit more 2 pixels solid red to make it easy to see so you can see i have a container in all those spots and it's doing its job it's holding the content in the center but when i go smaller than that it it overflows and that's terrible one thing i see people doing with something like this is they actually come through and they start doing a width and then they make a new media query to change it and then another media query to change it we're going to talk about media queries in a minute but here instead of that i could just come on this and say max width and so i don't have a set size but i have a maximum size so now as that gets smaller it will be allowed to shrink but if i get too big then things can go that way and i think 600 is a little bit small i personally work with m's and rams most of the time so i'm just going to throw in a 60 rem here there you go i can shrink smaller than 60 rem but i can't get bigger than that size and you can see that it's working everywhere and it's perfectly fine so i don't have any overflows and that's awesome and an even bigger issue i find in widths because people have an easier time with this but say we go into my header and i say a height and heights are like the bane of my existence don't set fixed heights is my general rule of thumb so there you go you can see i set it at 300 pixels and you know use flexbox or something on there so we can even do that display i'll do a grid because it's easier and then a place items center and it centers that red box perfectly in the middle and you're super happy with yourself but then you run into this issue where as the content gets longer and longer and longer and i'm exaggerating but i don't have a lot of content this spills out the bottom and it overflows and that's because i've set a specific height on that we can exaggerate it here to 200 just so we can really see how that could cause a problem as it like crashes outside it mixes up with the other things going on um so in general like height it's a dangerous dangerous property to be setting but there is a solution again don't use fixed ones but you can use ones that can adapt so you can say a minimum height and so i could say it's a minimum height of 300 and that means over here you'll see actually like it's not balanced out if i take this off we can see it will get smaller and this is my padding that's giving me that space so what i can say is 300 it's gotten bigger so it has to be 300 pixels or if i if it runs into a situation where the content is getting longer that it's gonna it will grow to adapt to that just the way it naturally would anyway and it's it's a basic thing of area right this text here and let's move down to here this text here has a certain area that it needs to live in so width times height as viewports get narrower that means that that this is shrinking so to keep the same area we need to grow the height and if we set fixed heights on things that cannot happen so even if you're setting a like 100 viewport height because you have this big hero area that needs to fill up the whole thing setting it as a min height will just solve potential problems that you could run into when you start going on to narrower viewports now i promise we would talk about media queries and media queries are something that i think are still an important part of web development and a few of my points here are actually going to talk about them but the first thing i want to say is try as much as possible to use your media queries to add complexity so what i mean by that is if we come in and let's say i have this i have this split class that's here which is what i'm using to create my columns and i'm just going to take this off first um so you can see here that's come in and created columns and i want that at my large screen sizes and so then i also come in and we have flexbox gaps now which are the best so we can do a gap on that just to space things out a little bit more um and you can see that it's coming through and it's working and i'm getting my three columns here which is awesome but then when i go to small screen sizes well that's kind of annoying right like we're shrinking down it's getting too narrow so then you come in with your media query so at media and you do a max width of 40m and we'll talk about why i chose 40m after as well uh and then we do our split and in here then you say that the display is i guess you go back to block which is the default or you go to initial uh which is a little different actually but you know then i get this thing going on but what i'm actually doing is overwriting the default that we had here in the first place so what i could do if i wanted to is i could actually take this and put it in my media query and delete this completely and switch this over to a min width and that's going to give me the exact same result and this is a really simple solution where i'm only doing like a display flex but what i'm doing is i'm instead of adding com instead of adding the complexity in and then having to overwrite a whole bunch of properties that i did in the first place what i'm doing is just adding that complexity when i need it and in general desktop designs happen to be where things get more complicated the bigger the screen you get columns you get fancy things going on and all of that stuff so in general and like 99 of the media queries are right are min width ones i'm doing mobile first and again when i say mobile first i just mean i'm doing all the things i talked about in the previous tip doing my colors my backgrounds and then a bit of spacing and then i'm gonna look at it and go okay that looks pretty good on on mobile maybe i have a few tweaks to do and then i go okay now i need some columns so where are those columns gonna happen and then i can add that complexity in now i have a one that's commented out here so just as another example of something you might need to do something like this where you are overwriting a property to change it and that's perfectly fine and that's where i have less padding when i have a narrower viewport and let's turn off that red container because it's driving me nuts but we have less padding because we don't have as much screen real estate and then that padding increases at larger screen sizes so personally like something like that yes you're going to have to overwrite some things that you've done that's completely normal within a media query all right so i was talking about having breakpoints before and how i was going to how i chose 40m and really for me it's about where the layouts start to break when i'm creating one so if my layout when those columns are just getting too narrow okay i need a breakpoint there to stop those from getting too narrow but the other thing that's really important is i try to avoid having too many break points and i find for a lot of designs you can get away with one sometimes two uh break points and sometimes you need something very specific for one thing but a lot of the time you can do general groupings so all of my break points happen to be happening at 40 m and it just so happens that's where in that layout based on the font sizes i have and all those other things that's where the layout worked and that's where that breakpoint worked really well and i just make general observations on that with the design now another thing that i realize is you might be writing code and not be a designer and you're not too sure or comfortable making those decisions if you're writing css that does come down to you but if you do have a designer you can talk with then talk with the designer and see where he thinks things should be changing at but you can always round up round down to try and get everything happening within the same break points instead of having 18 different break points to try and maintain which just would be a complete nightmare and also on that note i would completely avoid doing device specific breakpoints we have way too many devices now even like an iphone like which iphone are you going to target and there's there's so many different of every single device that's available right now and every single screen size is available so just look at your layout and see where problems are occurring and adjust it from there and make those tweaks that you need to make instead of worrying about okay at this screen size then this one then this one or on this phone it looks like this because then your buddy next to you is gonna have a phone that's 15 pixels wider or 20 pixels an hour or 20 pixels taller or whatever it is like the the differences between them it's just there's too many variables there and if you start going device specific it's just you end up with too many devices that you'll have to worry about and tip number five is to use more modern css approaches so you can get away without even having to make these decisions sometimes you don't have to worry about break points as much a lot of people rally against the idea of even having break points in the first place and with modern css we can start moving away from them i don't think they're the devil i don't think we need to get rid of them but we can start moving away from them and going more based on intrinsic design and stuff like that so if we jump back into the browser here uh one way that we can do that is actually and i don't necessarily like this with small font sizes but with really large ones i think it's a decent way to work so here my title that i have what i could do is come in and select it and say that the font size is a clamp and this is going to clamp it between a minimum and a maximum font size so the smallest i want it to go to is three ram the biggest i want it to go to is seven rem and then in the middle of that i can come in and say that this should be a one rem plus and i'll do this on another line just so it's not going off screen so we can do a one ram plus say 10 view port width and there you go it just got gigantic but you'll see that it will actually shrink with my screen or grow with my screen and review port size the viewport width here and it will hit a maximum size at one point so here it's not actually getting any bigger or smaller even though i'm changing the size of the viewport and then here it shrink shrink shrinks but it will hit a minimum size at one point and it will stop shrinking and i can see that's actually oh we're down to 300 so i don't even have to really worry about that but again you could come in and say this should actually be a two instead of a three and then that could actually continue to shrink down at one point they will lock in and stop though and again don't worry about like 270 width nobody has a phone that's 270 wind so unless you're trying to do it for a watch maybe um but you know 320 if you really want to be careful and a lot of modern devices are at 370 i think now i usually do 320 just to be on the safe side though it's like the iphone se and the se2 i think we're both in that range of 320. so yeah that's a nice modern approach and actually i'm going to clamp this just a little bit smaller just so we can really see how it's working so you can see it's shrinking and then it clamps there and it stops growing and you can use this for other things too i could use this for padding for example to make padding where i don't need a media query like i did before which is a really fun technique where you can use a mino or a clamp like this and we have other modern approaches like min and max and other stuff i put a few links down below but one of the links i've also included below is to a free course i have called conquering responsive layouts it's a 21 day drip course that's all about getting you in the right mindset learning how to use flexbox a little bit to pull off a lot of these layouts and then adding media queries in at the very end to make sure we can get our layouts working properly again it's a completely free course and the link to it is just down below so if this is something you're struggling with you enjoyed this video and you want to dive deeper in it is there and waiting for you to dive even further into the world of responsive design and with that a really big thank you to my supporters of awesome both zach and randy as well as all my other patrons for their monthly support and of course until next time don't forget to make your on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 72,791

Rating: 4.9850454 out of 5

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, responsive design, responsive layout, css responsive, html responsive, responsive website, responsive web, responsive web design, responsive web design tutorial, responsive website using html and css, media query, responsive css, media queries, css media query

Id: VQraviuwbzU

Length: 15min 54sec (954 seconds)

Published: Thu Aug 19 2021