A practical guide to responsive web design

Key Takeaways

hi there my frontend friends one of the biggest pain points that I hear about when it comes to making websites is making them responsive So today we're going to look at how a simple shift and how you approach writing your CSS can make things so much easier on that front because here at my channel everything I do is to help people fall in love with CSS and if I can't get you to fall in love with it hopefully I can at least help you be a little bit less frustrated by it and to do that one of the main things I want to focus on in this video is not looking at how you can do the same layout is I'm making now but cover Concepts that you can sort of put into every one of your projects that you're working on and so we're going to be starting with this I do have some CSS already written just to sort of style things up don't be intimidated by the the custom properties and stuff if you're new and you don't know what that is uh basically though nothing is applying to the layout itself right now I just have you know to make things not completely ugly but that does bring me to sort of my first point actually is right now I haven't really done any layout stuff I've just done some sort of General styling and you can see things are here and it does not look fantastic by any means there's a lot of weird stuff going on but I actually have a responsive website right now so if I come in here and I do an inspect uh and I'm going to going to do my little responsive mode which is here in Chrome it's on the other side in Firefox uh and when I do that my my website is basically responsive there's a bit of a problem and it's being caused by my images um you can see it's growing and it Ing and and stuff is going on with it um and that's like if I come here and I actually remove all of my CSS there's nothing in there I just commented out I select all control forward slash and it comments uh out whatever is selected uh and it's still responsive now I have this image that's overflowing uh which is sort of what's causing things to shrink down a little bit because images are that one thing uh that that sort of can actually cause problems so that's often you know you'll see CSS resets and and things like that where you'll have your image uh and then a display block and Max width 100% And the reason that we do that is because then my image will adapt to the screen instead of it being this really big thing that sort of shoots out the side uh so now you can see that it's adapting as I'm doing that and I have an ugly website uh but at least it's working on all screen sizes with basically one line here um if you have large svgs picture elements other things you might have to add a few other things to the selector but generally that's sort of the Baseline of what we want to do and that does mean that whenever you do run into issues with responsiveness it means you wrote some CSS that caused it and that sucks to hear um but it's not css' fault when that happens right it's our own fault and and often a misunderstanding of CSS and sort of how we should be working with it so I'm just going to turn my other colors back on so we're in a dark mode and stuff it's a bit less bright uh for all of us uh and we can keep on going and we have some nicer fonts set up basically uh for now I'm going to turn off that responsive mode as well though we'll we'll sort of turn it on and off um as we need it as we go through this and the next thing that I want you to think about because there when I was because then there where I was adapting the screen size what was happening is everything was sort of just adapting on its own right so let's actually come and I have a if we look at my HTML all the way at the top up here um I have I have a header here that has some content in it so let's go and grab that header for a second here and you can see under my head now let's get myself out of the way uh you can see we have a background color on there just so we can see what we're working with and I'm going to throw responsive mode on here again because what I want you to look at is as this is getting narrower you can see it's getting taller at the same time right so as this gets bigger and smaller uh as the width gets narrower the height has to increase because my content is changing in size and this is a really important thing to understand about how any websites have to work and how the defaults work within the browser because what's happening is because what's the most important thing here is this content needs a certain area to work so we're sort of looking at the width times the height so as one is getting smaller the other one has to get bigger and as you know the height can decrease and increase in width but we need to maintain that area so we don't run into any overflowing issues so if I have a header like this and I do want to set like a size for it I don't want to come and say that I have a height cuz if I say height here height of say 500 pixels and I hit save uh and actually my image is in there so let's just go and turn off the image cuz we're not going to see this as clearly right now so I'm just going to comment that out for the time being and or let's come in with 600 now and you can see that it's I have 600 pixels which is fine but then as we get narrower and narrower at one point this is actually spilling out the bottom and I'm losing content and it's going behind this next image that we have there uh and then of course as I come this way now I have that that space that's available to me and this is a problem because people like for whatever reason they like setting specific Heights and it might be because you're following a design or you have something else that you need to follow and you're sort of working at it at your desktop screen sizes and everything's fine and then you get to a smaller size and things overflow and then you're like I need a media query or I need something else you don't need that we want to keep as much of those default behaviors as possible from the browser so instead of setting things like widths and Heights and there's exceptions to these but if I'm more about overall layouts you don't want to set a height maybe what you need is a minimum height so if I set a minimum height and let's make this back to the 600 that we had before it's going to be 600 pixels tall cuz that's the smallest it's allowed to get to but if this content needs more space because we're getting narrower and narrower so we need more and more height at one point it hits that spot and it's allowed to grow and you can see it's just getting taller and taller and taller cuz we're saying that's the minimum size it's allowed to be and we can off do this with maximum widths as well and there's a really common place you'll see that I have set up a class of wrapper here and so it's really common that on something like a wrapper or this is you know you might see it as a container um is a common name for this type of uh thing as well where you get a Max width on it right so I could say Max width is 960 pixels or whatever I need it to be and then when I get to that 960 pixels and you can see here it stopped growing it's getting to 96 and it's never getting any bigger than that but it's allowed to shrink and I see some people approaching wrappers where they're going to build multiple break points for it with media queries so they're going to say that the width is 960 uh at a certain break point and then they get to another break point and then another break point but the problem with that is sometimes you need to make changes to it you have the same element that has like six different widths and you have to find the one that you want to change and again you might be following sort of a figma file or a design file that you have you only have four versions or three versions or two versions or whatever it is that the designers actually made for the different screen sizes so you don't always know exactly and you're just following what you have there but it just makes it so much easier to say that it's a Max width instead of an actual width and then the advantage with that is you can come in and you can say that it has a margin in line which is a Shand for the left and the right it's a little bit different because it's a logical property so if ever you had a vertical writing mode it would change but the inline axis in most of work you're going to be doing will be left to right unless you're doing something in a language that would be a vertical writing mode instead but we have our margin inline I can do auto and then it centers it right margin left Auto margin right Auto uh and it centers that on the screen and then we get this thing that's very adaptive because we're saying a maximum width it cannot get bigger than that but we want to allow it to shrink CU if not you have overflows and then you have that opposite approach for your header here because with Heights you definitely want the opposite widths you tend to do Max widths Heights you tend to do Min Heights and it's a very safe approach to doing things now let's say I was doing this guy uh cuz this is like an about the author that has a little blurb about the author that's somewhere where I might actually make a difference uh if I come and take a look at that just because this is sort of like the Avatar that might be something where I just set a width of 100 pixels and that's it because that's just how big my avatar is for small little elements where they're not going to cause overflow and you have a specific size that's completely fine though sometimes just still putting a Max width on there could be handy cuz if it gets into certain situations you might need it to shrink anyway but setting a width on small elements little icons stuff like that is completely fine but when you're going and you're trying to do layout wide stuff I would really recommend as much as possible at least having this as your starting point and how you're going to start doing things to prevent problems from happening another thing that's super super important is also don't declare stuff that you don't need okay uh especially with your widths and your Heights because this is a problem I see all the time I have a Discord Community where people can ask questions and get help on stuff and a lot of the time they have these little overflow issues or these little problems and it's caused by declaring stuff they don't need an example of that is coming on your body and saying that this has a width 100 VW and a height 100 VH CU people love viewport units um and if I do that though uh if you take a look at this and all the way down at the bottom here I actually have a horizontal scroll now because on at least on Windows in Chrome we have these fixed scroll bars that come in like this one and when we have that the VW doesn't account for the scroll bar it's looking at the whole width including the space underneath the scroll bar and so when you do that you get these little things like this and it's really really frustrating so my width on my body and let's just highlight this I'm going to come here and put a border of like 10 pixels solid red just so we can see it um you can see there is my body and you can see and I have a height 100 100 VW which is why it's stopping there and everything's overflowing but you can see like it's it's bigger than that but let's turn off this 100 VW and hit save and there's no width declared anywhere and it's already filling up all that space because that's just what Block Level elements do they fill up all the space that's available to them so I don't even need to come in here and say a width of 100% or something like that this isn't really going to break anything but the default here is actually Auto and I've done a video that looked at the differences between 100% And Auto so I won't get into it but basically uh Auto is better than 100% for most things there's always going to be exceptions but if you don't declare something because you think oh this has to be that big declare it because when you put it together it's not already doing exactly what you want it to be and you need to change the behavior of what's actually going on right now if you do want to check out that video I'll put a card popping up and a link in the description um and there'll be a few links because I'll probably mention a few videos along the way as well um but yeah just stick with the defaults embrace the browser work with it not against it and so don't declare things that you don't need especially things on viewport uh you know on the body setting viewport widths for widths that you don't need it's just it's going to get in the way and it's not actually going to help at all speaking of ort units actually people love them especially when they're starting to get into responsiveness because it feels like the type of thing that it's a viewport unit it's going to be responsive it's going to be flexible and most of the time they don't quite work the way you want them to um so I I actually there are times where I use vport units but they're quite Limited in where I use them I often use them for padding within like a clamp because I want the padding to be able to adapt but I want a top end and a bottom end um or there's other things like that but I never use them for like I need this thing to be this size the one exception might be if we come back to my header is setting a Min height and doing like 100 VH or something like that because when I do that now like I I might want this area to actually be 100 VH and I want it to to fill up the entire space or often even I have like a hero area or something I might do an 0 VH cuz I want people to see that there is more content a little bit lower down but the nice thing with this is like no matter what happens it's going to be there so that's kind of cool and this is I think a decent use case for viewport units but then of course I did this as a Min height so if they're on you know somebody's going to go on your site on a phone and have it horizontal for whatever reason doesn't mean there's a good reason for it but someone will do it and so at least it won't break and cause any overflows if that's the case because we used our Min height but in general use viewport units sparingly and sort of see if there's try other things first and if they're not working then maybe go to the viewport unit I just find that so many of the problems that I'm solving uh a lot of the time are helping people with on layout side things are often caused by viewport units just being used when you don't need them and so far a lot of what we've been looking at is sort of letting the browser figure things out for us right we're saying like the browser is going to figure out how wide something should be but don't go bigger than this now if it can let's go to the height that I want but if there's you know we're getting too small I don't want any overflow so we're going to prevent that from happening so we're we're sort of hinting at the browser what to do rather than saying this is the absolute thing that I need and this is that mindset shift that you really need to take is let's work within all these weird constraints that the browser has because there's just all these different environments and all these different things that you can never account for every possible thing that could happen so just by more hinting at things and letting the browser sort of live within those constraints it just makes your life so much easier and obviously I'm looking at very simple layout things so let's jump into other ways that we can actually get that to work so if I look here at like this list that I have that's right here where I have this class of tags so let's come and this is like the really simple way like don't overthink things if you if you need stuff I can come in my tags I could style these up and make them actually look like tags but let's just throw a display of flex on there cuz then they go next to each other and we'll throw a gap of two REM to to spread them out and maybe we'll do three just to spread them out a little extra and that's awesome like it works but then we run into this issue where now they overflow out the side uh like this because now we're too narrow and flex box is flexible as it is if you run out a room this type of thing can happen so what's the solution do we need a media query do we need to find out a way no all you have to do is come on here and say Flex wrap wrap and just like that now if there's room they're there there's no room let's just even come on these and change like we'll do a color red just so we can that's terrible uh we'll we'll bring this color down on the background just so we can really see those things coming through and we'll change this over to an orange red cuz it's going to look a little bit nicer uh not terribly there we go um but you can see now nothing's overflowing it just works the browser is figuring out how to do it uh maybe you want to change the Gap left to right in top and bottom so I could do that here with like one R for my Gap this way and a three REM for my Gap that that way but it just works I'm letting the browser figure out when it should break cuz it's when it's running out of room and I'm trying not to say this is exactly what my layout should be here's I want them to go next to each other if there's not enough room wrap down that's perfectly fine for that type of thing uh the other thing that we often see too down here uh we have another thing and I'm going to turn off that outline or the border on my body while we go down here um so we'll get rid of that but I've set up all these products down here at the bottom um so you can see I've product or actually let's just go look at the HTML here so here I have this div uh class of grid and then inside of that grid I have all these products right here and this is a really common pattern to have so we have our grid and I do a display display grid cuz that's what I want to do you probably want a little bit better of a name here um but then I can do my grid template columns and if you haven't used grid and you're only using Flex I would really recommend that you do learn grid Flex is amazing it's fantastic but grid does some things better than flex and flex does some things better than grid does um or I don't know if I said that right but each one is good at certain things and less good at other things and so you want to sort of lean into what they're good at um so I could come in and do something like this right and make a two column layout so I'm just saying template columns give me two of them and and they go next to each other and I have two columns or I could come here and I could say I want three columns and then I have three but once again we run into this problem of you know when is it going you know at one point they get too narrow do I need a media query to decide on when things are changing and breaking and it's like well we could do that or we could take the more intrinsic approach and this is a term that was coined by Jen Simmons called intrinsic design or intrinsic layouts where the brow you're sort of hinting at the browser what to do and it's just going to figure it out for us it's so much easier to work this way and you can the whole Pixel Perfect thing first of all please don't try and do that um but you you can get really close and line things up and get really adaptive good designs much easier to maintain by taking this type of approach so here I'm going to come in with a repeat of autofit and if ever if you've never seen this for your good template columns it's there's an autofit and there's an autofill autofit is the one you want 99% of the time um and just you just use autoit uh and basically here we say like autofit and then it is a bit weird we have to do a min max this is I think one of the reasons people get a little bit thrown off by grid but I swear there's if you learn this and you just learn like the basics of how to like set things onto different based on line numbers and and maybe that's about it at the beginning that's all you need at the beginning of using grid so like it it the syntax of this one's a little bit weird it takes a little while to get used to but learn this maybe this is the only thing you use grid for at the beginning um and and the 1fr 2fr 200 pixel type things for your specific columns um and your golden that's you know there's a lot of complexity with grip but you don't need to know all of it sorry for the tangent um my minmax here I'm just going to say 250 pixels 1 FR and now it's going to let them get smaller but as this gets bigger as soon as two of them can fit next to one another and be 250 pixels well then we'll get two and then we get three and then it's going to stop there cuz I'm in my wrapper so we never have more space so they can never grow bigger than that but if I had more room it could go to four and it could go to five so it's all depending on the space that's available but I just get these they're working it's super handy it's works amazingly well and I don't have to worry about when this is happening that's always a question I get from people is what you know when I'm using my media queries where do I put them like what what are the break points I should be using I don't know if I can avoid it I just won't put any at all cuz I can let the browser figure it out for me whether it's things wrapping along like this or whether it's my layout that's going like this anything like that it's just fantastic and we're letting the browser do the heavy lifting for us and this idea of letting the browser this is where let go of the controls it's really the purpose of this entire video is that mindset shift of Leaning into letting the browser do its thing and just sort of hinting at it what we need now there's 100% times where you do want to use media queries uh so it's not to say never but sometimes they can be useful and it's usually when you have like a specific thing that's just going to switch and there are there there's actually like other ways we can approach this but let's keep things really simple and if we come and look at my HTML here I have this uh div class of withd sidebar and it just has two children in there their names aren't really terribly important it's basically the we'll see what it is once I style this a little bit more um but I'm just going to come in and drop this here where my width sidebar I'm just going to say it's display grid to sort of set the stage and it also will help with my spacing a little bit uh and then I'm going so let's just come here I'll hit save and you can see it adds a little bit of spacing I probably want to style this top bit a little bit better uh if I was actually doing this but then I'm going to say when we hit this minimum width size of 760 pixels well I'm going to add in some template columns here so I'm going to give myself a column of 300 pixels on the left and a 1fr so just take up the rest of the available space and we can throw that on the right side and let's check this out and you'll see that once I get to that well now I have my two column area set up right there and it's exactly what I want it to be uh I also increased my Gap just to make sure that the spacing here wasn't too big and so at smaller screen sizes everything stacks and it works fine this area is just doing what it needs to do down here and actually because of how it's working you can see it goes back to one column because again we're we're in a space where those were too small and they couldn't fit at 250 pixels and this is the nice thing with that intrinsic approach uh is we're not looking at the viewport we're looking at where that item is living so it can adapt to whatever you throw at it basically uh and eventually it'll go back up to the two columns there but then I have this two column area here and the way I like to approach media queries is I like to be doing it where I'm adding complexity so that's generally how I think about it and I'll talk about my breakpoint choice in a second um but on that idea of adding complexity I'm setting the stage here display grid sort of set things up but display grid will keep everything just stacked and then we okay now at larger screen sizes we're going to go up and I'm going to add the complexity of having a new declaration here that's going to set up two columns and so I wouldn't want to set this up here and then use a Max width media quy here to remove it because if I did that then I'm have to overwrite this and so then and and make it one column well I already had it as one column and then I'm adding the complexity it makes it so much easier than doing it the other way around right so uh that's how I approach that of just adding complexity through my media queries and that could be a Max withth Media query the one I always reference for that is a mobile navigation where often the mobile version is much more complex and has a lot more declarations than the desktop version does so there I might use a Max width media query to add in that complexity but most of the time most of my media queries do happen to be minwidth ones and as far as how do you pick a breakpoint it's definitely um it can be a little bit tricky if you don't have a designer to tell you where to put them but I just wanted to do it somewhere where the sizes like you know this is getting pretty narrow things are going to start getting pretty squished seems like a good place to actually just have everything stack instead all right so that's how I decide on the breako that I want to use but the main takeaway I want you to have this is that you need to work with the browser and not try and be absolutist in the layouts that you're creating and just sort of be hinting at the browser and telling it the best way it should be doing things and if you'd like to sort of have something that's going to help you go through on like a day-by-day basis to get you there I have a completely free course called conquering responsive layouts it's all about making this mindset shift with little micro lessons every day uh over a 21 day period where it just sort of gives you little hints and help and one lesson Builds on top of the other lesson and uh if that sounds like something that could benefit you and you'd be interested in the link for it is just in the description down below and with that I would like to thank my enablers of awesome Andrew Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome