what's up everybody I'm Jesse Showalter and in this episode I'm gonna be talking about the ten basic principles do you need to know about responsive web design responsive web design is an awesome solution to the multitude of different screen sizes and resolutions that we have to deal with as digital designers this would be a great video for those of you who are just getting started building websites whether it's design or development and you want to make sure you have a firm grasp of the basics before you get started personally I miss the days of pinching and zooming in your mobile browser on old-school websites I thought that was really the best way to do it I'm just kidding the first principle that you need to know about is the difference between responsive and adaptive web design responsive web design your content is gonna AB & Flow it's gonna squish and release consistently as the browser or device size changes adaptive web design on the other hand is just going to adapt at certain sizes yeah there's no right or wrong answer it just depends on which one you want the second principle that you need to know about is the flow every HTML document which websites are built on are made up of a natural flow of the elements on that page and as screen real estate starts to get smaller your content starts to take up more vertical space it's something to keep in mind if you're not used to it the third principle that you need to know about is relative units of measurement no longer Suri's you'd be designing with pixels or millimeters or pikas who still designs using PICUs but we now have the opportunity to use relative units of measurement like percentages and viewport width and viewport height as well as m and r e-m-s all of these measurements are relative to the browser size or relative to other elements on the page relative units allow you to design responsive layouts so much more easily so I'm going to put a bunch of information about relative units of measurement down the description the fourth basic principle of responsive web design are breakpoints breakpoints are predefined areas of measurement that allow you to rearrange your layout dependent on the size of the browser or the device so if you have a desk design with a really wide layout in twelve columns and it starts squishing down to tablet or mobile device sizes you might want to insert a breakpoint that allows you to rearrange that twelve column layout to a 6-3 or one column layout this is really really important because it allows you to take control your layout where things start to get a little funky and squished and no longer make sense the fifth principle that you need to know about are maximum and minimum values sometimes it makes sense for your content to stretch 100 of the browser 100 percent of the time but other times it makes less sense and you might want to set a max width so it feels like there's a containing element that it stays in as the browser starts to stretch your content never goes past a certain point this is really important for legible text you don't want to read measures of text that are 3000 pixels wide it's really hard for the eye and so you want to capture control govern and maintain with minimum and maximum values number 6 on our list of basic principles you need to know is containers or nested objects sometimes it makes sense to take chunks of your content like a headline body copy an image that are related to each other and insert them inside of a div you've now nested that content inside another containing element now you can control the containing element instead of constantly having to control each individual element this makes a lot of sense if you look at a layout like a list of blog posts all of those blog posts are contained most likely in a div or an article and each of the individual elements inside of them are relative to the parent container so understanding how to use containers and nested elements is super important the seventh basic that you need to know about is actually an ongoing debate of either mobile or desktop first how do you start designing do you start designing the full desktop experience or do you strip it down to that one column simplified mobile first approach really it's an ongoing debate because there's no right or wrong answer I think the cool thing to say is actually mobile first but I actually designed the desktop first because that's just how I roll basic number eight is web fonts versus system fonts do you want that super duper trendy new typography on your web like you should have it but just keep in mind that every piece of typography or font that you load up in your website is gonna have to go out to a server and make a request and come back and that's gonna slow down your load times for the users who are browsing your site and so maybe consider a system fault because they're pretty stinking fast and if they don't have it on their system it'll default to something else so finding the balance between those two is a basic thing to understand in responsive website number nine is understanding the difference between bitmap images and vector images bitmap images are contained information if they're stretched up too much they start to look a little bit fuzzy or if you have something that's really small on a Retina screen it's gonna look a little wonky so if you have that problem you can move over to vectors which is gonna be nice and clean it's math something like an SVG but you've gotta balance how to use those SVG's are great for simple graphics like logos and icons whereas an image really should be a bitmap because that's too much information to store in the SVG and so understanding the difference how to balance them and when to use them is a super-important basic foundation of responsive web design number 10 and the final item on our list of foundational principles for a responsive web design was coined by Brad Frost whose con and one of the grandfather's were responsive web design and his famous words were make it until you break it which basically means make your website work as much as you possibly can wherever you can and then when it breaks maybe consider a break point or media query or a layout change or some kind of fix for it but you should try to make your layouts and your websites work as much as you possibly can and as many different type of device sizes without having to intervene and create some sort of first aid scenario well that's it that's my list of 10 foundational principles for responsive web design I hope you guys enjoyed the video if you did make sure to leave a thumbs up subscribe the channel I do lots of videos about design and development and websites just like this one so maybe stick around hit that subscription button and the Bell notification icon if you have any questions leave those down in the comments and check the description for tons of links to helpful resources that I mentioned in this video I'll be guys are having amazing week designing amazing things making amazing things and building amazing responsive websites I'll see in the next one