Responsive Web Design Tutorial – 2 – Why Pixels Suck

alright chaps welcome back and in this video what I want to do is I want to explain you guys why pixels suck so you guys probably already know what pixels are if you took magnifying glass and you nursed it up to any computer screen like a Tv your smartphone the computer screen that I don’t know just like a desktop you’re going to see that the image on your screen is made up of these minuscule scatters called pixels so why did they suck they’re just studies right well the above reasons they suck is because these pixels can be different sizes so which is what am I talking about well on some smart-alecky telephones those insignificant screens the resolution on those is 1280 I’ll write it down 1280 by 720 that meant that that little screen has 1280 pixels 1280 pixels on left to right and 720 pixels and top to bottom so all right that’s pretty interesting now the problem is on some TVs like big-hearted TVs like 32 inch TVs it also has 1280 pixels by 720 pixels towering so even if they are these screens have the same resolution or the same amount of pixels they’re dramatically different in size well what’s that matter who really attends well this is the problem say that you obliged I don’t know a website or something that had 14 pixel typeface well maybe you’re looking at this on the computer and you could read it really easy everything was you know looking good and then you went to look at it on a smart-alecky phone with the same resolution in all the text was incredibly small so this is why whenever you become font with pixels and pretty much everything on whenever you’re making a website and you use pixels that is why you should never use pixels in that it’s really annoying um whenever you try to design this direction so instead of pixels what I want to do is I want to show you guys about something announced e/ m and it’s not exactly um you are familiar with different for measuring like an inch a pixel or anything like that it kind of works in a different way you guys are going to adore it so rule number 1 whenever you’re making accept network patterns or accept websites if you ever check pixels think to yourself I’m probably doing something wrong and I probably want to use something else so let’s go ahead and do that right now so what I did previously is I represented two data ones called index.html and I made another one just for CSS and I too kind of assume that you guys know the basics of web development before you start watching these lessons if you don’t actually um watch this is probably the best series of watch forearm this html5 one right here will school you the basics of web design and likewise um CSS but as long as you guys know like the bare fundamentals you guys are going to be able to follow along with this easy so the first thing we need to do is construct very simple html5 website so of course HTML and we have to end it more and also if you guys don’t feel like typing any of this code and maybe you merely want to sit back and learn I’m going to be taking all the code from all of these tutorials and I’m going to be posting it in my gathering in the words at the html5 web design section so again it’s all going to be it’s for you guys don’t have to pay for it or anything just go forearmed adhesive it or follow/ glue it and you guys will be good all right so we need HTML right there language equals the N now let’s just make a really simple head and form so we don’t have to for any other seminars mas for some reason I various kinds of reeked right now and doesn’t frequently distract me but it is must have I have like creepy odor I devour something odd all right I’m just going to list this illustration Bucky’s apartment because you know why not and what I want to do is I likewise want to link to my stylesheet right here because for some reason um I actually don’t like having the Styles right here even though might be easier to explain in regret it’s really bad this so might as well build some good habits right now so relation stylesheet and likewise href equals whatever you referred your stylesheet I appointed mine I like specify of my mode sheets the same as the website or the web page so alright so now we have the basic shell and the empty CSS file no styling whatsoever so first of all let’s go ahead and learn exactly what IEM is and I want to do this by making four different divs so the first div is actually not going to be anything special at all all we’re going to do in this one is just construct some regular text so this is normal text so basically our browser is going to decide whatever text this is is it goes brand-new roman’ is a blue-blooded is it pitch-black is it 14 pixels 12 pixels I don’t know we’re going to leave it up to the browser to follow its feeling place what’s best for us now I also want to see three other ones and I’ll do this so we didn’t do the CSS we’ll do that in a second but this one is going to be class one and the other ones are just going to be class two and three prevent things nice and simple all right so we’ve constitute three different classes so it would probably a good sentiment right now to hop over in our CSS file and actually reach those class or browser doesn’t get mad at us so by default this is what I’m going to do we already know that the typeface length is a hundred percent and this is just pretty much saying that whatever you have by default keep it coming so the reason I even include that is because later on when I’m showing you guys exactly what this is we’re going to be tweaking that and you guys are going to really understand it’ll help me justify exactly what’s going on but right now let’s go ahead and attain those courses one two and three we’re going to construct those exercising those things I’m talking about announced EMS so in class one what I’m going to do is I’m going to set the font width to 1 e em now I’m going to reproduce this because I’m too lazy to sort it out and I’m going to put two and three so one of them is going to be one am one of them going to get 1.5 VM and the other one is just going to be two so you can actually make EMS with a decimal place you can actually make one with less than 1 like 0.5 a.m.So let me first what do we have we have 1 a.m. so this right this is 1 M you know merely write 1.5 m na emt that would be like emergency transport vehicle or something I know what am I talking about and this is 2.0 a.m. so let’s save this and find out what the heck EMS are so run launch and chrome and check it out so this is your regular textbook that we got by default from the browser we didn’t do anything to this it has no am supplying whatsoever now this one right here is 1 a.m.So as we can see 1 a.m. is the exact same as the default now that’s pretty much what an e/ m is whenever you use which click on our own thing whenever you use EMS what you’re saying is this the number we give you is relative to the default font size so if the default is 12 1 a.m. is also 12 now 1.5 p.m.Means take the typeface and it’s going to be the size 1.5 from the default value so limb pretty much whatever the typeface immensity is by default 1.5 that width would be this and twice the immensity is 2 a. m. so it’s not any handed ethic like limb 12 pixels 20 pixels what it is is a relative price so this 2 a. m. right here is twice the size of the default font all right so why would you ever want that what do you want more sovereignty over it to explicitly cause it a pixel cost we’ll check this out what you can do is this if you ever wanted to change your font length maybe to the base 250 well before if this was like 10 you need to go through and make this 15 pixels this 20 pixels and with an part website you were able to take a long time but now all I have to do is change this base size to 150 and check this out all of the font changed because it’s all relative based on such a ordinary textbook so instead of having to go through each one like I said you exactly change the basi and all your typeface adjust appropriately so this way you can do awesome things like if you always miss your header to be or your leads to be twice as large-scale is the normal text well it doesn’t matter how big your text is no matter if it’s I don’t know limb big for bigger machines or small-time for smaller devices whenever you use e/ m everything is relative so you just have to change one thing and the rest of your website fits appropriately so that’s the benefit of arm what eeehm is and why it’s so useful so pretty much that you merely have to change one thing so in the upcoming tutorials what I’m going to do is I’m going to show you guys how to utilize it pretty much to adjust your typeface size appropriately for every size screen in every size machine so for now thing guys for watching and likewise like I said I’m going to be taking all of this system and announcing it on my forum so if you don’t feel like typing it and you precisely want to watch these lessons find on me so umm well I’m going to shut up now and I’ll see you guys later

digital marketing

As found on YouTube

Share this article

Leave a comment