Michael T Ganschow Green: zynga there we go, so we are now officially recording so that anything and everything I say will be preserved for an eternity God help us all.
Michael T Ganschow Green: So there's going to be just just madness okey dokey so.
Michael T Ganschow Green: So so so so So here we go um let's get started so.
Michael T Ganschow Green: Today we're going to go over a little bit more about the practical applications of responsive design um.
Michael T Ganschow Green: You guys have kind of started seeing the practical applications with it from your project tues there was a lot of wailing and gnashing of teeth on the project tues.
Michael T Ganschow Green: Where they would have certain fail points, depending upon the browsers available or depending on the browsers resolution either up or down your website would would would would would fail in interesting ways and you were having a.
Michael T Ganschow Green: Having a little bit of a moment.
Michael T Ganschow Green: trying to get your websites to work so i'm quite a few of you.
Michael T Ganschow Green: discovered quite a few of you discovered.
Michael T Ganschow Green: liquid design and that was using percentage with come on browser be cooperative using percentage with as much as possible yeah so.
Michael T Ganschow Green: percentage wits are basically they're kind of a stopgap to proper responsive design and so what they do is they, let the web page FLEX a bit based upon the.
Michael T Ganschow Green: Based upon the browser window so here, let me share my screen here we go so with a percentage based layout.
Michael T Ganschow Green: What you can find is as a crunches down anything that you've set for percentages or not set of with on it all will crunch down.
Michael T Ganschow Green: At at a.
Michael T Ganschow Green: Basically, will crunch down.
Michael T Ganschow Green: At a percentage base level from the width of the browser now that's very helpful that buys you a lot of time in your design, you can you can it gives you a lot of flexibility and lets you.
Michael T Ganschow Green: kind of open up your design a little bit as you're shrinking and expanding it so.
Michael T Ganschow Green: This it's called liquid design is the technical term for it, these liquid designs are sort of the gateway drug to to.
Michael T Ganschow Green: responsive design they're kind of the beginning of it.
Michael T Ganschow Green: And they help they help do they help make up for a lot of.
Michael T Ganschow Green: A lot of the issues that you will run into with browser size so basically what this does is this is this takes care of a lot of the.
Michael T Ganschow Green: kind of intermediate breakages you'll run into in your browser side, so you try, you want to try as much as possible to stick to.
Michael T Ganschow Green: percentage bates with and percentage based placements so you've got some flexibility in your layout, as you can see, this one's quite a bit of it as percentage, but not all of it, as you can see, by Homer over here, for example, who is sticking in place and looking ever so delightfully photorealistic.
Michael T Ganschow Green: So gives you a lot more room to maneuver if you try and use percentages as much as possible doesn't really matter about percentage heights per se but.
Michael T Ganschow Green: But percentage with a really nice because you can you can get a lot more flexibility, however liquid design does not replace responsive design, at a certain resolution point liquid design will.
Michael T Ganschow Green: fail, it will break and it will look weird and it will and and you will have to step in and bring in responsive design so.
Michael T Ganschow Green: A lot of you were kind of gnashing of teeth about this and I basically kept responding well that's what we have responsive design for so today we're going to go in and we're going to use the.
Michael T Ganschow Green: The bit of responsive design, we know and expand upon that with our ugly website as an example here of when we when we want to or need to change things up, based on the resolution of the viewing window and so as you see.
Michael T Ganschow Green: This thing right here is pretty dang pretty dang liquid look at that so.
Michael T Ganschow Green: If.
Michael T Ganschow Green: Things are kind of shifting around nicely, the only thing that's not really shifting all that well is Homer and he has black over here, which we will mess, with a bit.
Michael T Ganschow Green: But otherwise things are kinda sorta working Okay, at least up to a certain point, you know, obviously it breaks past, a past a certain point, so at at certain points, we will need to change how the.
Michael T Ganschow Green: How the the the the whole thing works.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Here we go let's see let's see let's see what we're going to do here alright so let's play around with this a little bit let's have some fun let's have some fun.
Michael T Ganschow Green: let's modify this responsive design a little bit so right now it's pretty liquid, as you guys have seen to do to do to do to kind of oops i'm trying to grab the edge of the browser to liquefy it it's highlighting text there we go so it's decently like what.
Michael T Ganschow Green: If a little odd Dun Dun Dun so what i'm going to do is, I am going to improve upon that now um one thing liquid does help with your responsive designs as well, is that.
Michael T Ganschow Green: A liquid website will need less alterations when it finally comes to the point of needing a responsive.
Michael T Ganschow Green: responsive layout here so.
Michael T Ganschow Green: So it will it will.
Michael T Ganschow Green: It will allow you to move fewer values fewer selectors fewer properties than you would, if you were.
Michael T Ganschow Green: just doing like a hard place to design so like if you've got a design where everything is everything is placed and everything is exact with.
Michael T Ganschow Green: You basically have to do, responsive at pretty regular intervals, whereas if it's liquid, you might only need to put in one or two or three media queries and something like this guy here.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Let me do a couple things here first we're going to go into dream Weaver i've got this thing open, but I think just for practice i'm going to make a new site route.
Michael T Ganschow Green: just for fun because I got a lot of site root questions about project, too, so I think a little practice might help you guys out just a little bit.
Michael T Ganschow Green: Oh, speaking of project to while we're here well we're all here just a little bit of.
Michael T Ganschow Green: Class little bit of housekeeping on on on the.
Michael T Ganschow Green: Class so don't forget to go leave your critiques for project two so you guys turned in your finals on project to on Friday Thank you all, by the way.
Michael T Ganschow Green: In the ftp server managed to hold up for most of it, which is good, we didn't have too many explosions thank thank Thank you server So if you could go leave your two cents for everybody for project two that would be great I see several of you already are, which is awesome.
Michael T Ganschow Green: And I highly encourage the rest of you to do so as well alrighty then Sir.
Michael T Ganschow Green: let's see here okay.
Michael T Ganschow Green: All right, so what we've got here it's gone to the other page no don't go to the other page go here okay so let's open up where's my dream Weaver when we were there you are.
Michael T Ganschow Green: starting to do a new site route just for fun so let's go site manage sites and we've got GR C 175 clients demonstration seven, complete with an external server.
Michael T Ganschow Green: sitting here ready to go, but you know what we don't need it, we don't need it because we're gonna replace it with class demonstration eight.
Michael T Ganschow Green: So we're gonna minus out of that you know you can do this action, I can do it, you guys oh snap yes, I would like to delete the selected site it's gone it's gone I deleted my server I deleted all my history.
Michael T Ganschow Green: So now we have to Riyadh know you have to Riyadh oh snap fine new site G RC when 75.
Michael T Ganschow Green: A space in there, Michael class demonstration.
Michael T Ganschow Green: eight.
Michael T Ganschow Green: Looking site root folder let's hook it up to the local site root folder desktop.
Michael T Ganschow Green: let's go GR C 175 there is we're going to go choose and then we're going to go to advanced settings and we're going to set an images folder right now there is my images folder and we're going to set a scripts folder we will be.
Michael T Ganschow Green: possibly using that scripts folder today, if not, we will be using the scripts folder definitely by next class, then we choose.
Michael T Ganschow Green: And hit save and it says it's already inside of the root folder I am aware, I am aware, promise so we're going to go a save on that and there it is show me my ugly website Thank you ugly website will open the ugly website in a browser move you you guys out of the way, so I can see my.
Michael T Ganschow Green: browser here boom there we go that's quite a Bob there it is there is everyone's favorite very nice very nice so.
Michael T Ganschow Green: Alright, so let's have some fun we've got ugly Homer over here.
Michael T Ganschow Green: we've got.
Michael T Ganschow Green: This whole websites brutal we've got our background colors we've got our sewage, we got realistic stitch was all angry about everything and nothing I blame him, I mean.
Michael T Ganschow Green: I probably be a little certainly two fives in his position, so there it is, let me throw it open, though in firefox as well, now the reason why i'm throwing it up in in firefox is.
Michael T Ganschow Green: Because firefox has a neat little development tool pre built into it, this development tool lets us called responsive design mode and it lets us.
Michael T Ganschow Green: Do to do, let me scoot you guys over again i've got you sitting over the top of my developer toolbar so we're going to go in firefox i'm going to go to my upper right here to the this little firefox and then you will, which is a nice little three striper hamburger menu in the top right.
Michael T Ganschow Green: And I am going to come, all the way down to the bottom, second one up from the bottom is web developer, and here i'm going to go and then moved it again, but it is still.
Michael T Ganschow Green: right here in the middle now responsive design mode, this is really cool basically responsive design mode lets you crunch websites down and expand them.
Michael T Ganschow Green: so that you can see what they look like a different resolutions and, more importantly, it gives you precise numbers to play with up here.
Michael T Ganschow Green: So, for example, this is it at 1200 78 pixels whereas if I crunch it down a little bit, this is it at 812 pixels, for example, so I can find, as I crunch these things exactly how small they get and I can start.
Michael T Ganschow Green: Making changes, based on exactly how small these guys get using responsive design media queries.
Michael T Ganschow Green: So, before I go any further, do we have any questions on them kind of theory behind responsive design or media queries or on anything project related or any general questions like that.
shadow to.
See if anybody's talking or chatting.
Michael T Ganschow Green: Alright cool.
Michael T Ganschow Green: So.
Michael T Ganschow Green: So the.
Michael T Ganschow Green: everybody's searching with responsive design for definitive industry standard breakpoints to put these in and also definitive industry standard things you do when you hit these various breakpoints.
Michael T Ganschow Green: So.
Michael T Ganschow Green: dashboard confessional time, there is no industry standard breakpoints where you put them what to do, where they go how you use your break points when you insert them what you do with them that is entirely your responsibility so.
Michael T Ganschow Green: Which is that is quite a lot on your shoulders, but fortunately you have tools to help you so the first tool is this guy right here this firefox right here so.
Michael T Ganschow Green: where you can see exactly at what point your website starts sucking and when that point comes, which in this case we're going to call it 1010 pixels here.
Michael T Ganschow Green: When that point actually will will start it out here at let's start it at 1100 pixels i'm going to scoot over down at 1100 pixels so we kind of sort of clears the about.
Michael T Ganschow Green: I might even screw them down a little a little beyond that.
Michael T Ganschow Green: So we'll start out here now, you can use your media queries to do very subtle resolution based changes as well, like maybe a selector or two and inside those selectors a property or two, so I think i'm going to use this to scoot Homer down at 1100 pixels.
Michael T Ganschow Green: So time to go into.
Michael T Ganschow Green: My CSS so there's Homer hi Homer how are you okay and Homer is he's a figure okay alright so first of all top here, we got some old school media queries these.
Michael T Ganschow Green: phases, which are feeding in all of the custom fonts, by the way you guys like really knocked out of the park with custom fonts on your project tues you guys were all feeding in like all the most bizarre fonts in there are.
Michael T Ganschow Green: Several of you did your entire websites using nothing but fonts you yourselves that in and i'm very proud of you guys you did you did one heck of a bang up job with that one so that was good.
Michael T Ganschow Green: Alright, so let's add a Santa media query here down at the bottom, we got everything going on where's our figure, so our figure there's our there's our figure.
Michael T Ganschow Green: Such as it is.
Michael T Ganschow Green: There is our figure caption.
Michael T Ganschow Green: let's see there's our main with me and hide a 400 pixels and display a FLEX on it being separated by the content and then.
Michael T Ganschow Green: Our aside is the side a up the side as the figure in it, so the aside he's being wedged open by its padding it's got an enormous amount of padding 40 pixels on it, so we can crunch, the aside in a little bit as things get smaller as well.
Michael T Ganschow Green: And then we have our Homer with his negative 60 margin being pulled up here.
Michael T Ganschow Green: there's my firefox being pulled up here so that he clips through the menu like he did on our photoshop But what if I don't want them to what, if I want to make sure that he safely clears the bottom dissenter in about here, and so.
Michael T Ganschow Green: What i'm going to do is i'm going to add in a little just a little baby media query here, and as you guys remember from last class.
Michael T Ganschow Green: These little media query guys right here are at media.
Michael T Ganschow Green: very similar to these guys up here at fun face the Scott and at media.
Michael T Ganschow Green: Only.
Michael T Ganschow Green: screen.
Michael T Ganschow Green: and
Michael T Ganschow Green: Max width.
Michael T Ganschow Green: Do do do do do do do do do do kind of Max width or under Max width or anything so.
cool.
Michael T Ganschow Green: OK cool so.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: Max width.
Michael T Ganschow Green: So at 1100 pixels.
Michael T Ganschow Green: or small.
Michael T Ganschow Green: And then here this thing includes a bracket and a second bracket very similar to a regular CSS rule, because it functions as a Meta CSS rules so.
Michael T Ganschow Green: Basically what this media queries saying is when the screen is 1100 pixels or smaller apply whatever media in here, you want to apply now.
Michael T Ganschow Green: When people are building out their babies first media query is they're getting used to responsive design, one of the things they do is they make a media query and then they basically copy their entire style sheet into it.
Michael T Ganschow Green: You don't need to do that okay anywhere outside of this media or anywhere.
Michael T Ganschow Green: Any rules and properties and values that are not overwritten by whatever's in this media query will apply just fine.
Michael T Ganschow Green: So you don't want to make an entire duplicate copy of your CSS and your media query that will drive you crazy.
Michael T Ganschow Green: So what you want to put in your media query is only those selectors properties and values that you are editing Okay, that you are editing so in this case, right now, I just want to move Homer down and maybe maybe take some of this padding out on the side okay so.
Michael T Ganschow Green: i'm gonna go ahead and do that.
Michael T Ganschow Green: i'm gonna go ahead and do that might even take some padding out of the main two let's see the first of all let's start with our figure and then we'll work our way through this so.
Michael T Ganschow Green: let's start off by giving our figure a margin top instead of a negative 60 pixels.
Michael T Ganschow Green: we're going to have a margin top of zero pixels so that should overwrite that negative 60 and then come in here we go oh nope nope that's the chrome version Michael.
Michael T Ganschow Green: We come in here to the firefox version and we go refresh and then we scoot down until hits 11 and we go snap at 1100 pixels it snaps in look at that look at that right at 1100 pixels.
Michael T Ganschow Green: snap there we go snap there we go okay snap Bam all right now, I think, also in 1100 pixels I am going to remove or not remove i'm going to lessen these huge.
Michael T Ganschow Green: pieces of padding we have here on the on my main so but take a look at my html right now, of course, we have a main containing all of the content, so we got these huge pieces all along the edges of it Okay, so what we're going to do.
Michael T Ganschow Green: Is we are going to edit the main first I think i'm probably also going to do it to my side as well, so, but the main is a good demonstration here it's got a nice subtle gradient on it it's got a display FLEX it's got some other things going on in it, so what copy my main.
Michael T Ganschow Green: And and it's above my figure in the CSS structure so i'm going to put in i'm going to paste in the main here tab and then we're going to.
Michael T Ganschow Green: tab over these guys alright so First things first i'm going to do is i'm going to delete out anything that I am not going to modify yeah so in this case i'm only going to modify the padding.
Michael T Ganschow Green: So if I come in here and I take a look at the padding see right now.
Michael T Ganschow Green: It has a padding of 30 pixels on the top 30 pixels on the bottom and 50 pixels on the left and right so i'm going to leave the 30 pixels in because, if I take it out, it will apply 50 pixels everywhere and i'm going to narrow up the padding along the edges of my main save.
Michael T Ganschow Green: A little bit and then we're going to open this up or i'm going to go refresh.
Michael T Ganschow Green: So what will happen now well right now we are, as you see, with this nice big padding as the site crunches down and then at 1100 pixels snap there is now suddenly a lot more room snap on fact I think snap I think i'm going to edit the.
Michael T Ganschow Green: Article and aside just a little bit, so it tightens up just that much more so come here let's see Article let's see let's see the main article, yes, the article has padding as does aside so i'm going to edit both of those as well.
Michael T Ganschow Green: First things first is i'm going to bring in my side.
Michael T Ganschow Green: okey dokey so.
Michael T Ganschow Green: Go.
Michael T Ganschow Green: i'm going to bring in my aside and.
Michael T Ganschow Green: tab and then i'm going to get rid of the border right we're not editing that.
Michael T Ganschow Green: I am, however, going to leave in the five pixel on the padding so the panel does not get confused and think that i'm putting into universal value all over the place for it.
Michael T Ganschow Green: And I think i'm going to tighten up the padding on my side, just like that down to 10 pixels guys 10 pixels of padding left and right monster going to do the same to my article grabbed my article.
Michael T Ganschow Green: i'm going to copy paste my article.
Michael T Ganschow Green: It does comes after all the figs to so he's gonna come right down here.
Michael T Ganschow Green: And then.
Michael T Ganschow Green: i'm going to count everything in freezes things and then take all of this out by by no need to change the font although you can, if you want.
Michael T Ganschow Green: me to make that 10 pixels so having tightens up a little bit and enlarges slightly we go, so now, when I take this guy and opened him up you buy books and i've read.
Michael T Ganschow Green: Now, what happens is, as I stretch everything and we get below 1100 pixels it tightens up just just that much so notice notice things have gotten a lot tighter, in fact, a little too tight.
Michael T Ganschow Green: From what I see I think i'm going to edit that a little bit further can see our title works, I think i'm going to add a little bit of extra padding on the right side of my figure and on the left side of my article I don't know how much yet, but we'll see here so.
Michael T Ganschow Green: there's my actually not my figure my aside so come into my aside 510 let's see that's right we're going to go five pixels again for the bottom at you know yeah we're going to go five pixels again for the bottom 10 pixels.
Michael T Ganschow Green: For the Left and I think i'm going to add my side 20 pixels in for my right padding.
Michael T Ganschow Green: And then for my Article five pixels.
Michael T Ganschow Green: For my padding left i'm going to add in 20 pixels there as well, it's saved let's see what we've done with that.
Michael T Ganschow Green: yeah we go that's a little bit more, I think I might even add just a touch more just for the aesthetics of it so let's go.
Michael T Ganschow Green: 30 pixels and again you guys can feel free to mess around with your websites there your worlds, and you can do with them what you want to so we're going to refresh refresh there we go, so now we're yes, there we go we're thousand pixels in think.
Michael T Ganschow Green: notice there's a lot more room to expand.
Michael T Ganschow Green: So we can move this thing around.
Michael T Ganschow Green: I might even add a little bit of whoo I might even add a little bit to clear the dissenter on our about up there, I might even add in a little extra margin top on our home or oh that's the that's the the chrome.
Michael T Ganschow Green: firefox.
Michael T Ganschow Green: OK, so now I.
Michael T Ganschow Green: think we go in fact he's down a little further so that he can clear that dissenter yep look at that okay cool so.
Michael T Ganschow Green: rolling right along here, so now, so you see our first we're making like kind of little adjustments, this is what a lot of media queries are is they're not big.
Michael T Ganschow Green: Sweeping website adjustments their little things to patch spots where your websites are breaking okay so anywhere where where you see any breakages just drop into media query and fix it and so.
Michael T Ganschow Green: Do to do to do to do to do so here we go, so you can see kind of the crunch issue we're having okay.
Michael T Ganschow Green: Alright, so now.
Michael T Ganschow Green: Let me double check something.
Michael T Ganschow Green: double check the whip on my figure and make sure.
Michael T Ganschow Green: i've got an idea.
Michael T Ganschow Green: got an idea got an idea you guys background.
color.
Michael T Ganschow Green: equity.
Michael T Ganschow Green: All right now, a lot of you, when we were working together on these things we wondered why I was constantly using these hideous background colors okay to see what was going on, and I use them basically as di bombs to see with some things to see heights on things to see.
Michael T Ganschow Green: how things are functioning okay so i'm checking my web tier of my image.
Michael T Ganschow Green: And I think I can insert another little fuzzy here as we shrink down so let's see where does that snaps so right at 861 pixel.
Michael T Ganschow Green: let's see one of the other things you can do with firefox is you can come in here and type in numbers and see exactly down to the pixel where breakpoints are so there's a.
Michael T Ganschow Green: it's 62 861 okay cool so 862 pixels is where our next break point is going in and So what are we going to do with that well, I was thinking we're going to shrink Homer a little bit okay now.
Michael T Ganschow Green: Right now Homer is a foreground image okay he's an IMG src foreground image yeah and there.
Michael T Ganschow Green: Previously, have told you guys that they are not hugely editable by CSS and they are not, but there is one little party trick, we can do to IMG in CSS and it's called.
Michael T Ganschow Green: A responsive image now one way to do responsive images is just make them background images and stick them in within a particular container, whether that be a div tag or a main tag or a nap tag or a header tag whatever and give them a.
Michael T Ganschow Green: A width and height, not with them or give them none of it tonight the container would do the width and I give them either a background container a background cover and they will fit and fill that thing as it expands and as it contracts, however there's one little thing you can do to.
Michael T Ganschow Green: To IMG tags, to make them a bit more responsive, so I think i'm gonna apply that as we get down here, so it was 862 yes, it was so let's make another one, and another one.
Michael T Ganschow Green: And again, there are no defined intervals, where does your website break at media only screen.
Michael T Ganschow Green: and
Michael T Ganschow Green: Max width.
Michael T Ganschow Green: 862 P X.
Michael T Ganschow Green: No, no, no, no, semi colon yet.
Michael T Ganschow Green: And then.
Michael T Ganschow Green: Are you going.
Michael T Ganschow Green: cool and then bracket ology yeah there we are sweet.
Michael T Ganschow Green: So here we go.
Michael T Ganschow Green: All right, let's do this thing so.
Michael T Ganschow Green: Here we are now at media only screen and Max width.
Michael T Ganschow Green: Time ended our image now I couldn't stick a class style on him if I wanted to what I think i'm going to use a tag style a nice compound tag selector to go get this guy yeah so i'm going to do, once you select your figure.
Michael T Ganschow Green: IMG.
Michael T Ganschow Green: So what does that do well, that looks for any IMG tags that are within figure.
Michael T Ganschow Green: tags so inside of figure tag isn't i'm G tag this will apply, which should find out in second of it does now here's the dirty little trick okay so.
Michael T Ganschow Green: notice in my source code right here notice at look at my I am dealing.
Michael T Ganschow Green: Look at look at.
Michael T Ganschow Green: Look at what is different with my IMG link than most IMG links, you see, time and it's i've been doing it differently, the whole semester my one difference that a lot of applied IMG links and dreamweaver and other tutorials do do that I do not.
Michael T Ganschow Green: There is no size is no size attributes in this property, so you only attribute in this property as an alt.
Michael T Ganschow Green: To describe the image, but there was no with attribute and there's no height attribute a lot of tutorials tell you to put a width and the height in their new let the image define its width and height, because this leaves you open to doing cool stuff like this down the road okay.
Michael T Ganschow Green: So we're going to give the figure image now a width and height, because we do not programmatically have it in here in our html so yeah so again this this really opens us up to some really, really good.
Michael T Ganschow Green: Really really good.
Michael T Ganschow Green: kind of.
Michael T Ganschow Green: modifications, we can make check this out.
Michael T Ganschow Green: With.
Michael T Ganschow Green: 100% so that's smaller than 862 pixels my Homer now has a width on him.
Michael T Ganschow Green: Fresh.
Michael T Ganschow Green: Do boop okay now.
Michael T Ganschow Green: notice of course he's very distorted.
Michael T Ganschow Green: And indeed, we may have to do some adjustments to his container but he is now feeling 100% in this container yeah we're probably gonna have to make some adjustments to that so um one other thing you can do.
Michael T Ganschow Green: Along with this is given the height.
Michael T Ganschow Green: And the height.
Michael T Ganschow Green: Of auto make sure that you want to start the auto height recalculates itself each and every time you mess with it so fresh.
Michael T Ganschow Green: There we go let's see here we're going to shrink them going to shrink them okay cool so now.
Michael T Ganschow Green: The image is 100% of the width of whatever its container is now, in this case, I think, because the container doesn't have with the actual type is providing the whip, so we will probably have to go in.
Michael T Ganschow Green: A little width to our finger but Homer is shrinking this is good we're shrinking and down.
Michael T Ganschow Green: So i'm going to go, I went to the bigger look at that all right, so we got to add a little bit to our figure fine fine fine we're going to go I don't know figure.
Michael T Ganschow Green: I don't know how much we're going to put on here let's see we're going to go, maybe 15% with.
Michael T Ganschow Green: 15% just kind of eyeballing these things let's see is that enough fresh going down below.
Michael T Ganschow Green: Well nope that's really small okay we're gonna make it bigger than okay so it's not the figure that needs the width got it.
Michael T Ganschow Green: No, no, no, no i'm gonna say that.
Michael T Ganschow Green: I want to save this so not the figure that needs, so the figure that needs the with it's the aside alright cool so let's go aside.
Michael T Ganschow Green: Save.
Michael T Ganschow Green: Fresh it is still super tiny should be a little bigger than that, I think, but we're gonna work on that so.
Michael T Ganschow Green: There we go.
Michael T Ganschow Green: Alright, so let me, let me put a dive bomb behind me aside and see background color.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: do that.
Michael T Ganschow Green: it's not the right one, this one is.
Michael T Ganschow Green: cool so we now see kind of how the figures working inside here so i'm going to push the figure out just a little bit here.
Michael T Ganschow Green: oops still no, no, no, stop stop stop stop minimizing we're going to do this alright so let's get a little wider on our side.
Michael T Ganschow Green: 30% should get.
Michael T Ganschow Green: home or just why not widening Now we just announced being funny with me now it's not widening, because it should push this guy apart well hang on a minute let's go me.
Michael T Ganschow Green: One moment we're having a lecture explosion.
Michael T Ganschow Green: refresh there we go okay cool so just needed to be made into a Min width so that it would slowly shrink down there we go Okay, so I can see the structure on my website here.
Michael T Ganschow Green: And we got a Min width where it's kind of slowly shrinking down, so this is how it should work Okay, this is good so.
Michael T Ganschow Green: That means that if it's wider than 30% it homers pushing wider it will go that Okay, but if it's if it's ever crunched down to where his image is not pushing it open, then it will stick to 30%, as you can see here so.
Michael T Ganschow Green: My Homer is now minimizing himself, based on the width of what we have here, look at this look at look at him crunch down.
Michael T Ganschow Green: He so part of the lecture explosion, I had to throw them in I had to throw a Min width on the aside, so that it would it would properly balance itself alright, so now, then this figure image with 100% and height auto this actually real technique are called responsive images.
No way.
Michael T Ganschow Green: Here, so let me show you the article on it.
Michael T Ganschow Green: let's go responsive.
Michael T Ganschow Green: images.
Michael T Ganschow Green: Now this responsive images thing here is one of the things that you can do.
Michael T Ganschow Green: To.
Michael T Ganschow Green: To make a foreground image responsive to the size notice it's shrinking.
Michael T Ganschow Green: And again notice on here with 100% height auto so it scales evenly because watch what happens if I take the height or the height auto off of it.
Michael T Ganschow Green: Say run.
Michael T Ganschow Green: No, no, I don't want to save it, I want to run it Thank you run now watch.
Michael T Ganschow Green: we're getting a little distorted then word if you don't make the sound, so you have to have that height auto on it, otherwise it will rake yeah.
Michael T Ganschow Green: I won't break it'll just smoosh alright, so now we got some with on our Homer won't take the hideous background colors off because we don't need them anymore.
Michael T Ganschow Green: i'm one of the other reasons that I will use hideous background colors, by the way, is as size flags but i'm not care if I want to see when things are applying I can come in and basically add in size flags in order to.
Michael T Ganschow Green: allow everything to.
Michael T Ganschow Green: Are in order to show me everything kind of percolating here so alright cool so we're getting.
Michael T Ganschow Green: decently small with Homer boop.
Michael T Ganschow Green: Alright cool.
Michael T Ganschow Green: cool cool we're crunching down there is.
Michael T Ganschow Green: So there is huge and then we go and then we hit certain sizes and we're crunching down and crunching down and crunching down so we're working pretty decently.
Michael T Ganschow Green: let's see where it breaks here Okay, so it breaks right there but we're also clipping in here so let's do let's do our next media query at 700 pixels.
Michael T Ganschow Green: oops that up.
Michael T Ganschow Green: Our next media query will be 700 pixels.
Michael T Ganschow Green: let's get that color out to where's the we don't need any stinking aqua but my figure save alright cool so all the background colors are out, and I can add in a new media query.
Michael T Ganschow Green: But Michael is it always just kind of eyeballing like this yep yes, it is, where does it break, where does it break up on the screen and Max width.
Michael T Ganschow Green: 700 pixels.
Michael T Ganschow Green: Where I could technology, I think, are new couple of things that 700 pixels here.
Michael T Ganschow Green: First things first is i'm I am going to tighten up the pattern here a little bit give these guys just a little more room and then I am going to shrink my navigational buttons as well because right now they're Nice and big I am going to shrink their type a little bit.
Michael T Ganschow Green: And then.
Michael T Ganschow Green: let's see something else, I want to do at this stage, I mean we'll see we'll see what shrinking the type here does a little bit and shrinking the padding I may also shrink the padding on the overall thing as well, so we will see here and then.
Michael T Ganschow Green: Probably do one round of shrinkage and then probably at I don't know, maybe five or 600 pixels we will flip on the cell phone style Dun Dun Dun duh cell phone style.
Michael T Ganschow Green: Alright let's do this so here we go.
Michael T Ganschow Green: So first things first, let us, let us shrink the button.
Michael T Ganschow Green: So Doo Doo Doo Doo Doo Doo Doo Doo Doo okay.
Michael T Ganschow Green: Time to shrink a button.
Michael T Ganschow Green: or buttons sorry button sizing is sized clear up here in our.
Michael T Ganschow Green: In our NAB ul Li a right up here and there's a lot going on, you know me Li a sound is going to grab like the top chunk of it.
Michael T Ganschow Green: will come down here to my at media only screen blah blah blah blah blah blah blah blah and and only use.
Michael T Ganschow Green: The property and value that I want to modify which is just my font size so we're going to have the size of our funds at this point.
Michael T Ganschow Green: I may I may play around as well, I may shrink the padding as well, so I may do we're going to shrink the padding also so we're going to go padding.
Michael T Ganschow Green: 10 pixels all the way right.
Michael T Ganschow Green: Now, what will this do this will shrink my nav buttons down.
Michael T Ganschow Green: Maybe a little far.
Michael T Ganschow Green: Maybe maybe just a little.
Michael T Ganschow Green: poop yeah.
Michael T Ganschow Green: Maybe just a little far all right fine to EMS, it is then not 12 two ends, it is then you do you if you've got a convincing case, your fire, but maybe even.
Michael T Ganschow Green: Oh that's too tiny as well, I.
Michael T Ganschow Green: I don't even oh I don't even know if I need to play with my padding I think I might leave the padding where it is and shrink it later so let's see what this looks like with my padding in place now.
Fresh.
Michael T Ganschow Green: I think I might even expand just a little bit just a little bit just a little bit let's expand so.
Michael T Ganschow Green: we're going to go instead of two m's let's go 2.5 m's.
Michael T Ganschow Green: Fresh and we go I OK so just to think ever so slight we'll probably do another one at.
Michael T Ganschow Green: will probably 600 as well to shrink them a little further, but there we go we're going to do that so first of all let's take this down to 699 so we can see it, there we go and.
Michael T Ganschow Green: i'm going to take a little bit of the padding out of everything here just a little bit of the padding out of everything.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: let's grab our aside.
Michael T Ganschow Green: Now again i'm only messing with the padding not really too worried about the top and bottom padding, but I am going to.
Michael T Ganschow Green: definitely play with the.
Michael T Ganschow Green: With the other go to the mean as well.
Michael T Ganschow Green: means actually above the side, though, in my thing, yes it is so what am I doing placing that they're looking at that bad placement you guys cheese why didn't anybody tell me.
Michael T Ganschow Green: Alright, so we're going to go back there we go so they're ordering our html and then we're going to come down here and we're also going to go bop.
Michael T Ganschow Green: bop know and we're going to shrink the padding on our main just a little bit so.
Michael T Ganschow Green: again left and right padding we're gonna make 10 pixels.
Michael T Ganschow Green: I think i'll make this.
Michael T Ganschow Green: Just a little bit around and then we're going to go article.
Michael T Ganschow Green: and
Michael T Ganschow Green: don't even play around figure nap figures figures doing just fine in his own so that 30 is going to turn into.
Michael T Ganschow Green: So that will make the two edges tighten up to each other, a little bit and 700 like so I may even kick them just a little bit further back out again maybe back out to 20 look at that yeah maybe back out to 20 you know what browser you drive a hard bargain.
Michael T Ganschow Green: 20.
Michael T Ganschow Green: And 20.
Michael T Ganschow Green: Save now what i'm doing is I am adding just a little bit of that left and right padding back in so as it shrinks we're doing pretty well, I mean even the largest buttons another round.
Michael T Ganschow Green: meanie meanie meanie meanie.
Michael T Ganschow Green: And yeah I think I might leave the buttons where they are, I think I might also ever so slightly.
Michael T Ganschow Green: shrink I will do another one at 651 that will shrink the page title shrink the buttons again actually at yeah 650 will shrink the buttons to touch and we will shrink the page titling but, as you can see it's coming down nicely do to do to do to do to do to do boom.
Michael T Ganschow Green: Alright, so now that.
Michael T Ganschow Green: let's that looks nice I think we're we're coming along quite nicely now, we just need to.
Michael T Ganschow Green: Change the size man what ever so slightly and then change the size of our buttons and then we'll put in our phone style and hit 500 so it will do 650 will shrink these guys down so right there yep 650 alright so we're going to add another one in.
Michael T Ganschow Green: How many how many do you need as many as you need there's you don't have to put any if you don't want, and you can deal with the consequences of your website exploding.
Michael T Ganschow Green: at certain sizes, but I think it's perhaps best 650 Pex it's perhaps best.
Michael T Ganschow Green: To put them in wherever you want to adjust your website's design, I think you guys are all kind of following along here.
Michael T Ganschow Green: As I am sort of chipping and poking at this guy right here, you know I haven't saved it yet when when when when it's getting all upset I haven't saved it I haven't saved it you guys, I was bad alright so.
Michael T Ganschow Green: we'll come down here where's my.
Michael T Ganschow Green: where's my H1 there it is Article H1 at you first we're going to do buttons First things first will do buttons.
Michael T Ganschow Green: So at 650 pixels my buttons are going to shrink from 2.5 m's to 2.25 ends, I think that will carry me through and then i'm going to go grab my.
Michael T Ganschow Green: My.
Michael T Ganschow Green: My H1.
Michael T Ganschow Green: And i'm going to shrink it a little bit.
Michael T Ganschow Green: Because I don't think it necessarily needs to be five mans.
Michael T Ganschow Green: At this size, I don't know about you guys.
Michael T Ganschow Green: So tab we go okay so.
Michael T Ganschow Green: Do to do to do to do it, then so.
Michael T Ganschow Green: i'm going to make this thing let's try forums.
Michael T Ganschow Green: like this is weird yep it is just wanted to show you guys how it worked okay cool so don't want to go smaller nope that does just fine well not quite so let's go let's go.
Michael T Ganschow Green: We.
Michael T Ganschow Green: Go.
Michael T Ganschow Green: Now this thing gets skin get really tiny.
Michael T Ganschow Green: yep and it will fit all the way down to another menu shrink at 600 and then we'll get our phone style out at 500.
Michael T Ganschow Green: Alright, so let's do that menu shrink.
Michael T Ganschow Green: Do that menu shrink yet.
Michael T Ganschow Green: Do 600 so.
Michael T Ganschow Green: media.
Michael T Ganschow Green: Only screen.
Michael T Ganschow Green: and
Michael T Ganschow Green: Max width.
Michael T Ganschow Green: 600.
Michael T Ganschow Green: And we'll do another nerve shrink.
Michael T Ganschow Green: We go.
Michael T Ganschow Green: boom.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: Fresh there we go.
Michael T Ganschow Green: yeah that'll take us all the way to 500 look at that now we can look Oh, we need to shrink our footer what point does the footer I even see a footer being devious down here what point does footer.
Michael T Ganschow Green: crunch will put them in with will shrink it with shrink our footer at the 700 pixels.
Michael T Ganschow Green: rule here, so let me go back to my footer.
Michael T Ganschow Green: And all that look at all that styling information in my footer that I will not need I just need that type size so i'm going to highlight everything to turn it over and then i'm going to delete out.
Michael T Ganschow Green: All of this stuff that I don't need that I do not need in my life don't need any of it we got it all set up I just need to shrink this guy down to one and a half.
Michael T Ganschow Green: That should carry me through about everything.
Michael T Ganschow Green: Fresh.
Michael T Ganschow Green: There it is.
Michael T Ganschow Green: boob women tiny we're gonna go 500 and then we'll have to do.
Michael T Ganschow Green: will shrink it again at.
Michael T Ganschow Green: 600 as well.
Michael T Ganschow Green: There we go, so now we're going to go one point to fiver save alright, so that should shrink us down and get us all set to do our.
Michael T Ganschow Green: Our phone style now once I get down to.
There we go.
Michael T Ganschow Green: Okay, so we're all set and ready to go on our phone style so.
Michael T Ganschow Green: i'm not going to do a phone menu, which is a hamburger menu just yet, but.
Michael T Ganschow Green: I will do everything else here pretty much the way that I would on a phone now again you guys, by the way, feel free to adjust this as you need, so let me do a real quick, let me double check my notes here.
Michael T Ganschow Green: Baba Baba Baba Baba Baba Baba Baba Baba where did you run away to wounded you no way to alright so.
Michael T Ganschow Green: One minute.
Michael T Ganschow Green: about our rights where did you go.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: Once we get down to phone size columns really become counterproductive yeah.
Michael T Ganschow Green: We were we we really run into issues with multiple column layouts at this point so it's at this point, and by the by the main nav area is the main nav excuse me, the main content area is being controlled by a FLEX here on the main tag so.
Michael T Ganschow Green: What I am going to do is at 500 pixels i'm going to turn that FLEX off so i'm going to go at media.
Michael T Ganschow Green: Only.
Michael T Ganschow Green: screen.
Michael T Ganschow Green: and
Michael T Ganschow Green: Max width.
Michael T Ganschow Green: 500 pixels.
Michael T Ganschow Green: And again, this is all kind of my eyeball stuff if you want to play your phone earlier like 600 or something like that it's 650 feel free so we're going to go mean where I could tell a G and we're going to go FLEX direction.
Michael T Ganschow Green: column.
Michael T Ganschow Green: Sorry FLEX box naturally takes everything and stacks it on its side well when the FLEX direction column what that does that, at this point at this resolution.
Michael T Ganschow Green: Why are we Oh, we got to go into any 500 is that it takes everything and it stacks it vertically now basically, I just have to come in here take off that.
Michael T Ganschow Green: That.
Michael T Ganschow Green: lovely border over there even out the padding maybe say Center line the footer.
Michael T Ganschow Green: and
Michael T Ganschow Green: say.
Michael T Ganschow Green: stack my buttons maybe actually I would put in a hamburger menu here we'll go over those as we get further in but I might vertically stacked my buttons as well, and then this thing's ready for phones I love the one I have stitch human what you're looking at.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: Here we go so let's even out all the patterns.
Michael T Ganschow Green: Right.
Michael T Ganschow Green: Actually, you know what you know what i'm gonna take all the paintings off, except for the mains patterns so.
Michael T Ganschow Green: and leave the main with.
Michael T Ganschow Green: me, I will mess around with it a little bit will mess around with a little bit alright so First things first.
Michael T Ganschow Green: i'm going to go to my side.
Michael T Ganschow Green: And i'm going to do zero pixels of padding on the side.
Michael T Ganschow Green: And then come up here and i'm going to do my article.
Michael T Ganschow Green: Because we already stripped.
Michael T Ganschow Green: up here and figure we already stripped any padding figureheads we're going to go to article.
Michael T Ganschow Green: And we're going to go.
Michael T Ganschow Green: Article.
Michael T Ganschow Green: Zero pixels of padding.
Michael T Ganschow Green: lips.
Michael T Ganschow Green: leave your side, had the border on it.
Michael T Ganschow Green: Yes, it does.
Michael T Ganschow Green: Yes, it does alright so we're gonna go border right.
Michael T Ganschow Green: Yet.
Michael T Ganschow Green: go away border.
Michael T Ganschow Green: None.
Michael T Ganschow Green: safe.
Michael T Ganschow Green: Fresh goes now, we just need to adjust the.
Michael T Ganschow Green: main patterns or mean.
Michael T Ganschow Green: The main patterns, a little bit we're good to go alright so we're going to appear, the main.
Michael T Ganschow Green: Yet the patterns I padding and we're going to go.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: 10 pixels top and bottom and 20 pixels left and right.
Michael T Ganschow Green: Save.
Michael T Ganschow Green: that's looking appropriately phony right there now looking at that thing, so now, lastly, well not lastly there's a couple of things I want to do so now second Lastly, is my footer.
Doo Doo Doo Doo.
Michael T Ganschow Green: make this guy text align Center.
Michael T Ganschow Green: So that he will.
Michael T Ganschow Green: kick to the middle.
Michael T Ganschow Green: alrighty then let's save them.
Michael T Ganschow Green: And do fresh all right so.
Michael T Ganschow Green: Look at that it's sitting in the middle, so now we're pretty phone looking we're pretty phone looking Okay, the last thing I think i'm gonna do is i'm going to take my buttons.
Michael T Ganschow Green: And we're going to do the same thing I did here with my FLEX direction on the main because I believe i've got the FLEX on the.
Michael T Ganschow Green: NAB you well there it is yep right on that nav ul so imma steal you.
Michael T Ganschow Green: imma steal you.
Michael T Ganschow Green: And then go FLEX direction.
Michael T Ganschow Green: column.
Michael T Ganschow Green: Save co terrible these look.
Michael T Ganschow Green: Good, we need to add just a little bit of height on the container take some padding out of them and then we are all set their big pushes buttons make the text bigger again, this will be nice alright so.
Michael T Ganschow Green: Now we turn that nav into a.
Michael T Ganschow Green: from a height of 100 pixels.
Michael T Ganschow Green: To down here.
Michael T Ganschow Green: we're gonna make this nav.
Michael T Ganschow Green: Technology poop midnight of 100 pixels I stretch for me nap stretch yeah we go let's see refresh it did not stretch well why did you know strange okay so we're going to go.
Michael T Ganschow Green: let's see here safe alright so let's go now.
Michael T Ganschow Green: Okay, so we're going to go that.
Michael T Ganschow Green: So for a couple things here we're going to go.
Michael T Ganschow Green: we'll come back to the name of the second and they have ul.
Michael T Ganschow Green: Li yes, I did I did a NAB ul Li na cool so we're going to go.
Michael T Ganschow Green: And you ll I a technology and then we're going to grab a couple of things from there's First things first, I am going to cheat be chopped down the padding.
Michael T Ganschow Green: Of ul Li a wind chippy chopped down the padding to five pixels top and bottom 10 pixels left and right so they're a little tighter and then we're gonna go grab text size we're going to blow them back up again, so the Nice and big fat touchable buttons So there we go full size.
Michael T Ganschow Green: The same.
Michael T Ganschow Green: finish there we go nice big touchable buttons now why is navigation not expanding.
Michael T Ganschow Green: Already, then so.
Michael T Ganschow Green: That thing at the height of 100 pixels on it so let's go didn't like the Min height huh yeah on the double check something.
Michael T Ganschow Green: oops.
Michael T Ganschow Green: double check something when I do a quick troubleshoot and we're going to go refresh oh it didn't like that either Okay, well then fine, we will go height 300 pixels.
Michael T Ganschow Green: Night well.
Michael T Ganschow Green: hype.
Michael T Ganschow Green: Fresh that's too tall but we're getting there and then we'll go to 75.
Michael T Ganschow Green: make it a Min, why not.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: refresh oh one more we can shrink it a little more just a little more so we're gonna go here and we're going to go to 70 so it's Nice and tight to the buttons a little further than that to 50.
Michael T Ganschow Green: Yes, it is all eyeballing, why do you ask let's go refresh there we go, so now, these are nice and big and clickable with fingers, so now we took a design that looks like this at full resolution and turned it into a stove pipe okay so really with.
Michael T Ganschow Green: With responsive design um.
Michael T Ganschow Green: it's really just a matter of seeing where your website breaks and then going into your CSS and resizing and readjusting a few things to make sure that it works correctly.
Michael T Ganschow Green: Oh, I can blow my my each one backup to there's my article H1 would blow it back up to five.
Michael T Ganschow Green: Alright, so we can do this so we're going to go article, Article H1 let's get that thing back to full size.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: We go man what so you can take a website that looks.
Michael T Ganschow Green: pretty much like a computer style website and with just a little bit of editing and a few media queries wherever it breaks, you can make it work with about any resolution.
Michael T Ganschow Green: So questions on this Oh, I see a chat hang on looking at here, we knew shrinkage of the computer version two yes, yes, other yes so um so.
Michael T Ganschow Green: If you want to start with a mobile version and expand out.
Michael T Ganschow Green: um you just change your media queries So if you want to build them a stove pipe and add detail as it expands instead of Max with such a such a size.
Michael T Ganschow Green: Min width such and such a size so basically you take your phone version and you stretch it and then, as it starts getting to like spaghetti it out all over the place, you can add in.
Michael T Ganschow Green: You can add in.
Michael T Ganschow Green: bits and pieces essentially as it expands outward now I personally am a computer first.
Michael T Ganschow Green: And then I simplify down to phone but that's just the way that that works for me if you were if you work better starting off with the mobile and building out you absolutely can so did that answer your question.
Michael T Ganschow Green: I think I got your question.
Michael T Ganschow Green: cool she yeah, in other words, you can go both ways.
Michael T Ganschow Green: You can also.
Michael T Ganschow Green: Let me see here just make sure I get the language correctly, but I believe.
Michael T Ganschow Green: web let's go.
Michael T Ganschow Green: let's go media.
Michael T Ganschow Green: want to make sure it gets language correctly.
queries.
As multiple.
Michael T Ganschow Green: yep okay cool Sir.
Multiple sizes.
Michael T Ganschow Green: we'll make sure I get the language correct for you guys.
Michael T Ganschow Green: don't want to mislead you.
Michael T Ganschow Green: I believe you can do multiple.
Michael T Ganschow Green: Multiple measurements hang on a minute.
Michael T Ganschow Green: I just want to make sure I get this correct.
Michael T Ganschow Green: Yes, Okay, so you actually can mix and match these two things, so what you can do is you can is you can pick them so that i'm.
Michael T Ganschow Green: The media query appears only in a certain band of sizes so, for example, if I wanted to have one of my media queries.
Michael T Ganschow Green: Be at a certain size, I can set it so that it will have a Min width basically basically where it kicks in, and then I can also add a and a.
Michael T Ganschow Green: Max width so and a Max width so I essentially establish upper and lower boundaries of it if I want I don't tend to use those a lot myself I tend to just sprinkle them in where I need them as i'm working.
Michael T Ganschow Green: Oh one second you guys are going to attend to something i'll be back real quick.
Michael T Ganschow Green: uh pardon the interruption, so do we have any other questions during that little pause that refreshes has anyone thought of any additional questions.
Michael T Ganschow Green: By the way, a tool like this and there are developer tools that you can download for chrome that will show you exact browser wits like this.
Michael T Ganschow Green: Absolutely invaluable to building a media query website no cares what the website and look like in an apple watch okay an apple watch is 144 pixels wide so if an apple watch ever gets a browser on it fear that day.
Michael T Ganschow Green: Fear it.
Michael T Ganschow Green: Then.
Michael T Ganschow Green: This is what your website would look like on it.
Michael T Ganschow Green: So any questions.
it's been this back.
Michael T Ganschow Green: All right, alright, so there is one thing you do have to watch out for if you start on the computer side occasionally.
Michael T Ganschow Green: And that is that mobile browsers will sometimes attempt to display the default version of the website.
Michael T Ganschow Green: In your browser area, despite what your media queries and CSS say this does happen Okay, so what you have to do in order to make sure that this doesn't happen is, you have to force mobile devices.
Michael T Ganschow Green: to display the media query and here's how you do that, you actually don't use CSS to do that, you actually use html.
Michael T Ganschow Green: responsive design viewport okay so.
Michael T Ganschow Green: This little piece of code right here this little this little viewport right here.
Michael T Ganschow Green: This little piece of tag it's actually a Meta tag it's our first Meta tag we're going to use in class, but this Meta name viewport basically is.
Michael T Ganschow Green: A control over the viewport, which is the.
Michael T Ganschow Green: web design technical term essentially for the viewing area in your browser window, so you have your browser chrome appear that's doing all the navigation, for you and then this area here where things are viewable is the viewport okay.
Michael T Ganschow Green: So this guy right here is the area that things things view through, and so this Meta tag that we've given here modifies that viewport.
Michael T Ganschow Green: What it does is it says okay hi address the viewport yes, thank you we're talking to the viewport sweet, and then it says okay.
Michael T Ganschow Green: Take the content and display it at exactly the width of whatever the device that's displaying it and scale everything to 100% so essentially what that does is those to trigger the device to go through everything that it's displaying and when it does that boom it pops up the.
Michael T Ganschow Green: It pops up the Meta tags and notice notice here this viewport Meta tag example which is interesting.
Michael T Ganschow Green: The the without the viewport Meta tag it's showing this page example up here it's showing this page as a computer browser would see it, which means it's basically illegible on a phone.
Michael T Ganschow Green: Okay, whereas over here with the viewport Meta tag enabled boom it's magnifying everything in and displaying it properly at the phone style so.
Michael T Ganschow Green: This little this little guy right here i'm just going to copy paste him because i'm lazy he lives.
Michael T Ganschow Green: up in your head tag in your html not in your CSS he actually lives, right up here with the other Meta tags.
Michael T Ganschow Green: bloom I actually tend to put my Meta tags, by the way, when i'm building html is below by page title actually you know it depends on how i'm feeling so, for example, if you look at the class website.
Michael T Ganschow Green: i'm tempting right click, please let me right click Thank you.
Michael T Ganschow Green: So you will see, I have my Meta tags below the page title I frequently do that.
Michael T Ganschow Green: because that way, the page title is the first thing a browser sees and a search engine sees And why is that important because.
Michael T Ganschow Green: It helps your search engine rankings the further up you have genuine content so frequently I love the title me, the first thing visible and then I will have these Meta tags below it.
Michael T Ganschow Green: So now, with this viewport Meta tag right here and don't worry we'll go over the others as time goes on, now we are completely immune to a browser displaying anything but what its actual sizing is supposed to be.
Michael T Ganschow Green: I know I know odd times I get it, I get it.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Questions viewport Meta tags.
Michael T Ganschow Green: Media queries.
Michael T Ganschow Green: anything like that.
Michael T Ganschow Green: alrighty then cool means so.
Michael T Ganschow Green: guys want to learn something fun like really fun there, how many of you left, I heard people running away because they found the media electrical there's five of us in here, that means there's four students.
Michael T Ganschow Green: here's my a's alright so let's go let's go.
Michael T Ganschow Green: let's go learn some things okay.
Michael T Ganschow Green: So.
Michael T Ganschow Green: i've packed your brains full responsive design I think most everybody here, because most of you who are watching this as a video probably have a better grasp of responsive design than you did previously so.
Michael T Ganschow Green: Shall we shall we.
Once more, I think, which.
Michael T Ganschow Green: Okay, so time for another concept that we are going to hear, time and time again throughout the Semester and.
Michael T Ganschow Green: time for another concept to play with.
where's my zoom there's me and there it is.
Michael T Ganschow Green: Alright times time for.
Michael T Ganschow Green: jquery.
Michael T Ganschow Green: So.
Michael T Ganschow Green: What is jquery you may ask.
Michael T Ganschow Green: jquery has its own website.
Michael T Ganschow Green: So jquery is a yet another programming language.
Michael T Ganschow Green: It is a.
Michael T Ganschow Green: A scripting programming language that is used to add.
Michael T Ganschow Green: behaviors and multimedia functionality to your website essentially what it's used for is adding in.
Michael T Ganschow Green: All sorts of interesting little shifts and.
Michael T Ganschow Green: views and even some capabilities, let me show you let me show you a few jquery is out there, so.
Michael T Ganschow Green: animate on scroll.
Michael T Ganschow Green: animate on scroll is a nice little library of scripting commands that, as you scroll through a website boop.
Michael T Ganschow Green: boop.
Michael T Ganschow Green: boop causes things to pop in in different directions, based on what amount to a little attribute that you put.
Michael T Ganschow Green: On each tags.
Michael T Ganschow Green: As you go through so essentially what these do is he's add just little pieces of animation that things like that.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: So we also have jquery parallax scrolling what does that mean.
Michael T Ganschow Green: As you scroll background images scroll at different rates so it looks like they're further away, and you can stack multiple Dems.
Michael T Ganschow Green: with absolute positioning that I have different images that are scrolling at different things to give you a website, a feeling of immense depth look at this thing go.
Michael T Ganschow Green: Another little thing they do light boxes, what are light boxes you ever gone to a photo gallery click on an image and it does this, it darkens the screen and shows you the image that is a light box, this is done with jquery.
Michael T Ganschow Green: This is done with jquery.
Michael T Ganschow Green: And these galleries talk to one another, so as you go through you can.
Michael T Ganschow Green: move through the images here there's the ending image.
Michael T Ganschow Green: So it's all done by one little programming language I have.
Michael T Ganschow Green: A whole bunch of these things.
Michael T Ganschow Green: On the resources page I gave you guys.
Michael T Ganschow Green: There are a whole bunch of little Jane queries oh yeah smooth scrolling I forgot about that thing.
where's the example.
Michael T Ganschow Green: De de de de de de de de de de de de de view DEMO ah, no.
Michael T Ganschow Green: We I am an absolutely smooth scrolling website so yes smooth scrolling.
Michael T Ganschow Green: let's see i've got a whole let's see get all kinds of J queries got there's a parallax as the enemy scroll.
Michael T Ganschow Green: Now we got some we got some good tutorial links here you guys have all been at least the lint the things that I get back from you guys you've all been exploring this page or several of you have anyway so there's all kinds of fun jquery oh yeah.
Michael T Ganschow Green: And even on jquery is a little homepage right here is jquery ui jquery ui is a series of.
Michael T Ganschow Green: fun little effects that you can add.
Michael T Ganschow Green: to your site to do all sorts of fun things and where is the here we go add a class.
Michael T Ganschow Green: More there we go we're adding and subtracting classes, we can.
Michael T Ganschow Green: Make dragonball objects.
Michael T Ganschow Green: We can make.
Michael T Ganschow Green: All sorts of things we can make tab based navigation in the web page there we go again strictly with jquery and C s s.
Michael T Ganschow Green: New tool tipping boop highlight over this little guy and you can build in tool tips notice again, as I hover over there's things here there's things there boom there it is there.
Michael T Ganschow Green: You can add all sorts of facts.
Michael T Ganschow Green: explode.
Michael T Ganschow Green: Alright, so you can add all kinds of fun things with jquery so jquery is very fun to add all sorts of fun little interactivity now we've already done a little bit of that with CSS rollovers and CSS drop down menu, so there are.
Michael T Ganschow Green: Very good.
Michael T Ganschow Green: there's there's a ton of stuff you can do with jquery we're just going to scratch the surface on it.
Michael T Ganschow Green: This semester, but I want to get you guys going in jquery.
Michael T Ganschow Green: So jquery works in a very interesting way, it is a mutant variety of a programming language called javascript.
Michael T Ganschow Green: And javascript is a.
Michael T Ganschow Green: behavioral and instructional language that lets you add all sorts of additional capabilities to the web.
Michael T Ganschow Green: Well, what jquery does is rather than having to write lines and lines and lines and lines and lines and lines and lines of javascript.
Michael T Ganschow Green: jquery takes a lot of the processing the javascript is doing and throws it in what's called a library what you hear commonly referred to in jquery tutorials as the jquery engine OK, so the jquery engine is basically this library of.
Michael T Ganschow Green: This library of.
Michael T Ganschow Green: behaviors that you can call into an animate with very, very limited scripting in your website if you're using javascript.
Michael T Ganschow Green: You would have to write in like every piece of it to get it to go, whereas with jquery you just have to light enough of it to.
Michael T Ganschow Green: To to your right, just a little bit of code and then you point it at this jquery library.
Michael T Ganschow Green: or or jquery engine as you'll hear it called and it will go through, and the and and basically pull all of the behavior work out of the engine and do it there, so you don't have to learn.
Michael T Ganschow Green: How to program a whole bunch of different weird behaviors you just have to learn how to talk to this engine and access things out of it, and we are not even really per se going to get that far we're just going to kind of dip our toe into this thing with some with some jquery.
Michael T Ganschow Green: bed that are basically little scripts that we download that we link into our files and then we use to make various things go so.
Michael T Ganschow Green: i'm on the jquery website and so that you guys can have it.
Michael T Ganschow Green: I am going to.
Michael T Ganschow Green: download the current version of jquery.
ui.
Michael T Ganschow Green: Is rabbit oh it's not okay.
Michael T Ganschow Green: So let's see here, what have they done to the newest version and Susan filters blah blah blah blah.
Michael T Ganschow Green: All right, alright, so I am going to download our lovely little uncompressed jquery engine.
Michael T Ganschow Green: Oh snap what have I done well, I clicked on the download link and it didn't actually download it it's designed as a save as link what it does, if you just click on it.
Michael T Ganschow Green: Is opens up the jquery engine and it displays it in our browser yes jquery is another text file in a fancy hat so html is one of our text files and the fancy hat CSS is another one, and now we have a third javascript and jquery use the dot J s file extension.
Michael T Ganschow Green: But all it is, is another txt file in a fancy hat, so this is lines and lines and lines and lines of code that are basically doing all kinds of animation work and.
Michael T Ganschow Green: Movement work and all sorts of things and you basically just have to go in and activate the portions of it that you need.
Michael T Ganschow Green: But the rest of it is sitting here in this thing waiting to be used, whenever you need it and they're constantly updating it and tweaking it to add new things new behaviors new.
Michael T Ganschow Green: New.
Michael T Ganschow Green: animations new I mean I knew.
Michael T Ganschow Green: All kinds of things just just just all kinds of new features to this thing get get regularly grafted in look at the size of this file.
Michael T Ganschow Green: So what i'm going to do.
Michael T Ganschow Green: Is I am going to.
Michael T Ganschow Green: download this lovely file and i'm going to.
Michael T Ganschow Green: put it in my scripts folder or oh darn here we go we're going to begin using our scripts folder So here we go all right, look at this thing alright so let's go back and i'm going to click on this guy right here, and I am going to copy.
Michael T Ganschow Green: That copy the link address, I am going to save the link as.
Michael T Ganschow Green: There is jquery 3.6 point zero js i'm gonna stick that in my route in fact i'm going to save it directly into my scripts folder we are actually going to put our scripts folder to use.
Michael T Ganschow Green: Oh snap dog look at this we're using our scripts folder Oh, oh no oh no we've got a scripts folder actually being used, and now, if I come to my site root.
Michael T Ganschow Green: My desktop fine all right fine i'm going to minimize everything you.
Michael T Ganschow Green: Good up good okay cool yeah so now that's the gic 175 website I don't need that just yet what I need instead is to open up my.
Michael T Ganschow Green: GR C 175 move you guys, are you are was hiding behind you guys alright so, and if I go in my scripts folder and Double Click on jquery.
Michael T Ganschow Green: There is the jquery engine ready for our usages.
Michael T Ganschow Green: Look at that.
Michael T Ganschow Green: One boom boom boom boom boom boom ready to be corralled and used so basically what this is is this adds all kinds of fuzzy little behaviors to your website.
Michael T Ganschow Green: That you that that can be both important for functionality purposes, like light boxes, or just cool like little things popping in as you scroll through so there is and there's many, many, many I mean I mean just I mean if I do a I do have just a search for Jane query effects.
See here.
Michael T Ganschow Green: These are our sexy programming in it, no, I want to see a DEMO was in effect, did you do today to do.
Michael T Ganschow Green: Gene query examples.
Michael T Ganschow Green: Its effects was not well and here's w three schools doing some fun things jquery let's see here.
Michael T Ganschow Green: they've got all sorts of examples.
Michael T Ganschow Green: So you click me, I will disappear boop boop boop and they're gone.
Michael T Ganschow Green: So look at that it does have a big thing, let me see if I can find some good spectacular ones, because I got some good ones, here are some fade ins.
Michael T Ganschow Green: demonstrate the fade in.
Michael T Ganschow Green: fade out I don't anticipate in all fresh.
Michael T Ganschow Green: So you needed to add all kinds of little things to your website.
Michael T Ganschow Green: So questions on the theory of jquery basically a little engine stood on my design to make javascript and javascript based behaviors oh lot easier, a lot easier.
Michael T Ganschow Green: To use and play with so.
Michael T Ganschow Green: Oh lot easier.
Michael T Ganschow Green: So.
Any questions.
Michael T Ganschow Green: well.
Michael T Ganschow Green: looks like.
Michael T Ganschow Green: Oh, I got finished early I was going to show you guys jquery download the thing we might you might, let me double check them i'm missing anything in the syllabus but we might be done a little early I thought there would be more questions and see here, where are we on the floors.
Michael T Ganschow Green: Around time introduced jquery.
Michael T Ganschow Green: Look at that we got some things like that alright so.
cool.
Michael T Ganschow Green: All right, then we're going to, then I think I will.
Michael T Ganschow Green: want to be Tommy a complete sadist and jump into building something with a jquery now your brains are full.
Michael T Ganschow Green: Now you know what.
Michael T Ganschow Green: I think i'm going to give you guys some open time to ask me questions, and I think we will I will we're going to do next class, if you want to jump ahead a little bit and see what we're going to do we're going to for our.
Michael T Ganschow Green: Our first jquery project is we're going to build.
Michael T Ganschow Green: One of these lovely little light boxes, right here we're going to build one of these nice little light boxes and i'm going to show you guys how to install it, how to set it up how to modify it.
Michael T Ganschow Green: The other thing we're going to set up to is this little guy right here.
Michael T Ganschow Green: responsive slides.
Michael T Ganschow Green: responsive s Li D s.com so we're also going to install this thing right here, this is a nice little slideshow that is built to fill whatever area it is assigned and then run through a pleasant little slideshow of images.
Michael T Ganschow Green: into jquery very similar to that light box and we're going to install it and set it up and have it.
Michael T Ganschow Green: whip through a whole bunch of images very nicely for us we're going to even get to play with initialize there's in our script links so.
Michael T Ganschow Green: Because I figured right now, your brains a full on responsive design plus you've just come off building project to and are now gearing up to build project three so.
Michael T Ganschow Green: I think I will wait until your brains and my brains are maybe just a little bit fresher to do that, because it is.
Michael T Ganschow Green: Oh, look at that it's like 740 so we're pretty good so does anybody have any questions anything on any projects anything on anything about the class don't forget to provide feedback for a project to.
Michael T Ganschow Green: So that you guys can.
Michael T Ganschow Green: so that everybody can get the benefit of everybody's brain.
Michael T Ganschow Green: So do we have any questions.
Michael T Ganschow Green: alrighty then so, then I will give you guys this class time to ask me questions if you want or to do what you like, and I will be hanging out here to answer anything you got.
Michael T Ganschow Green: So stop share.
Michael T Ganschow Green: If you wish to go have a great evening and I will see you.
Michael T Ganschow Green: Thursday Thursday night see all Thursday.