Welcome to the Responsive Design Demo
Okay, welcome to the Responsive Design Demo. We’re going to do a webpage layout that looks good no matter what the browser size and in preparation for this if you would like to fire open some of the alternative web browsers and check things out you can. Such as, Firefox, Chrome and things like that. We’ll also test it in Internet Explorer and I tested this demo myself, it seems to look good in all of our browsers here at the school so that should be no problem except that I don’t think, I don’t know that it looked good in IE7 but hey, you can’t ask for the moon right!
Okay, we’re going to naturally set up some kind of HTML webpage and the key focus of getting this to respond and things to change size is going to be to use CSS in some new ways that you may or may not be familiar with called Media Queries and so on. So, we’re going to set up a typical web folder for our project. So we’re going to start from scratch, maybe go to your E Drive, right click, make a new folder – Resp_Demo. Resp_Demo so later you can look at this in your notes and think it’s a respiratory demo of some kind which wouldn’t make any sense.
fire up the Dreamweaver
Alright then we’re going to fire up the Dreamweaver, make a HTML five page, make a CSS page and attach it to that. So here I go trying to do exactly that, typical kinds of stuff right, if you’ve had any web classes. Oh and Dreamweaver is going to launch, good. Okay you can take the trouble to define your sites if you want to manage your two file, your whopping two files so went to site and new site and browsing to choose my route folder, browsing for the D drive into my folder. Telling it what folder I’m working out of basically, so save. So that now my file shows me where I’m working and I can see files that get put in there. If you would like to right click and make a new folder for a CSS over there, right click on your main route folder or make it outside of Dreamweaver, either way.
And let’s go ahead and make ourselves a page. File – New – Blank Page – HTML – HTML 5, although I imagine this would work in any kind of HTML document. And by the way, I’m actually going to be able to get a nice structure going without even resorting to the question of whether I should use the most modern HTML 5 Tag. I’m not even going to have to make any containers with this simple demo so you’ll see what I mean but, here’s a HTML page, I’m really not going to change much, maybe I’ll give it a nice title to show up at the top of the browser. A Big Whoop right, we all know about this. Alright so, File – Save As – we could call it Index HTML again, probably nothing impressive to you since you probably already know how to make a simple HTML page right. And to begin with I’m not even going to necessarily put anything in the body but we will revisit this page later and put some stuff in here.
To start off with though let’s make our other page our CSS page
To start off with though let’s make our other page our CSS page and explain a media query and how you can develop nicely using a little trick. So go ahead and make a blank CSS page, nothing special, it may or may not want to have a character set definition at the top in a little comments thing what kind of a document it is but that’s kind of optional. Let’s save this into our CSS folder, maybe just call it Style-CSS or whatever you’d like to call it. This one we will definitely be doing some work in. We do have to and as I’m perpetually forgetting we have to tell the HTML page to read from that CSS document right. So, I’m sure you’re familiar with this little trick, go to your HTML page – make a line brake before the head section closes and then looking at your files panel you should be able to drag your CSS page, drag it right in there and it creates that wonderful link connection for you so that changes you make in a style sheet affect your page.
Okay, have I baffled anybody completely? I hope not. Even slightly, anybody need a hand? Okay, maybe I’ll dowse one of these lights too.
Now the first thing I’m going to talk about is a Media Query. A Media Query is going to let a section off different parts of our CSS and we’ll be able to say hey, use these CSS properties, things like background colour, font size, anything that we want to know how to do in CSS. You could say we’ll use these measurements and settings if the screen is yay big whereas use these other measurements and settings if the screen is a different width and this is perpetually changing you know so in deciding what screen width should I accommodate, the field changes daily. iPad 97 is coming out, so there’s always going to be different resolutions and sizes here. But, lets kind of start in our CSS document and I’m going to make a section up at the top. For starting style designing for small screen size first. So ‘m making myself a multi-line comment that eventually ends right so this is just me leaving myself little sticky notes essentially. I’m going to reserve this section here for any kind of formatting I want to do when the screen is small. We’re designing for mobile first which is a popular philosophy. So for example, let’s say that the background of my HTML page is going to be yellow, very exciting. Ultimately you can use extra decimalisation for colours but while your developing it’s nice just to see a word so you don’t have to think FS FS 00 – oh that’s yellow. Who needs to spend that extra time? And of course we’re going to design with some hideously looking colours that eventually you’ll want to get rid of anyways so while we’re developing, there’s no right or wrong to how you mention colours.
This is a Media Query
Now first of all what we have there to tell you that so far has nothing to do with what size your screen is, all screens no matter what size the browser window is are going to get this. So like, if I go to Firefox and I hit “O” and I browse for this document to look at it in here, really you can’t tell if there’s any response going on if I resize my browser and that’s really what we’re going to do today to simulate what would it look like on a small screen, a larger screen, a larger than that and even larger and so on. So, we’re just going to basically do a little of that. However, now we can make some areas of our screen, of our CSS page that is, sorry, where we define styles that should only happen if the screen is a little bit larger. Right now I’m going to be make one, not arbitrarily but based on certain popular screen sizes. I’m going to say well, you know what I’d like to maybe make some changes if the screen is between 421 and 760 pixels wide. So maybe I’d like to do certain things with my styles if the screen is that wide, different from if the screens were very small. So down here I can do the same thing again but I’m going to kind of couch it in this phrase. It almost looks like the structure of a function or something like that, it’s going to have some curly braces. This is a Media Query, it’s going to find out what media, what screen format the current browser is and it’s going to enact any styles I put in here, if and only if, the screen is between these widths I’m about to say. You notice I’m defining a maximum and a minimum. Uh oh, what did I do, what did I do, mex! Okay well this is, we’re in the United States now this is probably what you would use in Mexico but it’s actually max width and there we go. I’m glad I have my proof readers here today, that’s good. And this will be the thing to test out so, as we’re resizing the browser who can tell how wide it is? I don’t know I’m not good enough to count pixels that quickly so but the browser is. Oops this would actually say 4210, it should be 421. So I want it between 421 pixels and 760. I’m going to give the page a different colour, very dramatic but it’s the beginning, we all have to start small. So it’s going to change orange. We’ll see if the browser recognises when the screen is between a minimum width of 421 pixels wide, up to 760 wide [0:09:52.3]. So let’s see if I got that right. We got that right we got the pattern down we can copy and paste and define all kinds of other sizes. Okay so refresh in the browser when it’s less than 420, you can tell because the background turns yellow, whereas it’s orange in between another circa range there, okay. Make sure you get that right, I mean there’s lots of crazy punctuation that I accidentally got right, colons and what not and of course this overarching set of curlies. Anybody who thinks they’re doing everything right but it’s just not turning the colours for them? Is it working out? I mean if you follow along with as much as you want to follow along with but if there’s anybody who’s trying to follow along but it’s like it’s not turning orange, help me! I’ll be happy to help because, once we get this one… yours is not working? Once we get this one down of course we can copy… There you go. Always remember your colon. People who are over 40 can confirm that that’s a good rule of thumb, remember your colon. Alright! Wait I just recorded that horrible joke didn’t I? Oh boy! Maybe I can take it out in post.
if it exceeds 760 it jumps up to this one
Alright, so now you know we can keep doing this kind of thing over and over again. I’m going to copy this see, make a few line brakes at the end and define. I’m not going to overdo it this time. In the last demo I did like 12 of them or something but… and of course like I said, this changes you find out oh there’s a new device that came out whose screen size is exactly 622 pixels wide and suddenly you say, well I guess I’d better cater to that! But I’m going to do one between 761 and 960. So notice this number picks up where the other one left off. So if it exceeds 760 it jumps up to this one and whatever styles I put in this section are going to take hold right. Maybe there we will change the background to blue and so on. We will pad these out and put some useful stuff in here but while your developing the back colour it can be a nice thing to…. Let’s see which current Media Query zone is firing off when the browser is whatever size I’m looking at it right now right. So it can really help you develop. So now I have a third one and that’s going to cover… you know what I’m going to do here, I’m just going to say if the screen is above 960/961 but, you can of course go higher than that because screens are starting to be able to be higher than that and you may have crazy or not so crazy ideas about how to make something look. So for your last one, when you say anything above this size, go with this, you don’t have to say the and max width, you can just say minimum width… sorry that should be a 9… minimum width of 961 and higher, you know anything above that will get whatever I put here which I’m going to say background green and so on. So just have some fun watching the background be green when your browser’s really big, blue when it’s a little smaller, orange when it’s fairly small and yellow when it’s smallest. Now, I don’t know whether my screen size my monitor size is going to accommodate that. Oh good it does. So we’ve got some green when it’s really wide, blue. If you can tell which zone you ought to be in, you know if you’re developing and you say you know my header font size is too big, what zone am I in – oh I’m in the one where the background is orange Then that’s nice right. And ultimately when you’re all done just get rid of this stuff because I would assume you don’t want the background to change colours with different sizes but, while you’re developing it’s kind of a nice little thing to do.
orange is between 421 and 760
Okay so once again if we did that correctly we should have green, down to blue, down to orange, down to yellow and again you can have a zillion different ones in between. So orange is between 421 and 760, blue is between 761 and 960 and green is minimum width 961. You need anything bigger than that, unless there’s another rule, that’ll work. In fact sometimes you just see people do the minimum because cascading means further down the page if something overrules something higher up on the page, it takes effect so I could just keep saying another minimum width of 1024, lower than that and that would take over and over and over ride this without this one being told it has a maximum width. Minor point.
Anybody need a hand or are you all okay so far?
a rudimentary structure to teach you about percentages
Okay so we did something without even putting anything in the body of the index page but now we are going to ahead a put a rudimentary structure in there and teach you about percentages and to do that I’m going to start to define what is the width of my page? The body that is going to be floating in front of this colourful HTML background. In order for the body to look like anything it needs to have something in it otherwise it has an infinitely small height and you don’t see anything so, I’m going to go ahead to my HTML page and throw in a little fight title here using my most important tag. And, by the way, it’s probably going to come back to bite me that I’m not doing the HTML… the CSS reset that gives each one things like H1 and already some kind of format but you know a width and a height and things like that, but I’m going to skip that for now just to mention that it’s a good idea, as is putting in your [0:15:21.9] that you’re going to use HTML 5 tags which both that’s a good idea and I’m not going to take the time to do that today.
So in addition to our most important header, an H1 that says site title, I’m going to put an H2, less important header which by default should look a little smaller than my H1, under our control if we just want to change that order of important look in formatting and then, P-tags which are your basic body [0:15:55.4]. Put those words in there a few times. You can put gibberish in there, whatever you like. I’m going to… actually that paragraph is done, I’m going to start a sub-header H3… I guess its called sub-header. So, we’re sort of simulate some contents. I think I’ll just put another copy of this paratext under there. Simple, nothing to fancy smansy. But, we have a hierarchy of things which will come into play when we move onto the next point, plus this will force our body to actually look like something and have a certain height to accommodate. It’s going to stretch just tall enough to accommodate these items, they have to show up right. If you want to go ahead and do File – Validate – Validate Current Document, send it to the W3 schools and it’ll tell you if there is a… if a line does not have an appropriate ending tag, or it’ll crash, one or the other, let’s see. File – Validate – Validate Current Document. Is it thinking about it or what? What if I mess up and don’t close my P-tag! Will it let me hear about it then? It doesn’t seem to be working but anyway you need to make sure you didn’t mess up. Validate – yeah it seems to not be doing its thing today, I’m not sure why.
let’s start to define an area for the body
Alright, but let’s go ahead to our style sheet and let’s start to define an area for the body. So, now I’m scrolling back up to the top of my style sheet and I’m going to say that my body is going to sort of look like my page floating in front of the background. Now in order to see the background you’re going to have to have the background peeking around the edge. So, first of all let’s say that maybe the background has… the body has a background colour of white, oops… background white, hello! Okay, let’s also give it the margin combination that will centre it – Margin – Zero – Auto. Now before we close that style let’s talk about the idea that you may be familiar with giving it a fixed width in pixels so, for example, however wide you want that page to be you may be accompanied… accustomed to using a PX measurement. Let’s see what that looks like, refresh… currently it’s going to stay 600 wide no matter what but obviously as the screen gets small you kind of like to still see it and not make people scroll left and right which is technically not done very often in web design. So, instead of saying 600 pixels here’s the novelty, now we’re going to work with percentages. We’re going to say 90%. Now what this means is 90% of the available space that this has to work with so this body had the whole browser to work with basically so that means that if the body covers only 90% not 100% of the browser the other 10% is covered by the browser, by the HTML, background colour and since we said to centre it, it splits up the extra 10%, 5% yellow on the left side, 5% yellow on the right side. Make a little sense? Oh, I haven’t saved my index page so I’m going to do File – Save All which saves both, Refresh. So there you see, kind of ignore the idea that the text isn’t changing size, we’ll take care of that shortly but see how the browser is… the white body is filling 80% and of course that 10% that’s left over on the side becomes smaller as the browser does too which is kind of a nice look actually, you know when the browser’s bigger you have a lot more space to play with so it’s kind of nice. 5% is relative right to the size of the browser, it’s different from saying it’s exactly this many pixels right.
we’ll say that maybe the margin on all sides is 5%
You can do that as well with margin and patterns. So we’ll say Margin… this is also in the body… we’ll say that maybe the margin on all sides is 5% and I’m going to go ahead and set a little bit of padding… first of all margin 5% so that clarifies it and says okay it’s definitely going to be the 5% on the side. So without saying that it sort of had the same effect didn’t it. But, I think what I’d like is a little bit of room at the top and bottom of the body as well so I’m going to say Padding – 10px – Zero. Now you may remember that the padding just like margins can take four numbers for top, right, bottom and left. If you only say two then it takes them for the top and the right and repeats them for the bottom and left. The bottom is now going to get a little bit extra room you know above the word Site Title and below the bottom [0:21:33.4]. So you see you can combine pixels, you can use pixels for the height and percentages for the width. You probably don’t want to mix them you know pixels for the margin and percentages for the width because those are both kind of in the same dimensions. Be advised this is kind of sometimes the area you have to wrangle with number wise to get things to work.
the text is right against the side
Now what about the idea that the text is right against the side, how are we going to do that? I would like to address that issue with a little zone in my CSS that you may or may not have been aware of where you can… I mean it’s basically just a trick in CSS that you may or may not have been aware of where you can give several items the same characteristics at the same time, separating them with commas where you define them. To begin with you realise that now I’m styling the block of text that’s my H1 the block of text that my H2, the one that’s my H3 and the one that’s my P-tag and let’s talk about this width which you might be excited to learn about but you have to understand a couple of things about. Let’s momentarily say that the width of my body is 50% across the screen. Okay so there you can see it in action, 50% across, only half the available space. Now, what I [0:23:00.9] width. The question that should be crossing your mind is well, does this mean that these text items are supposed to fill 50%, fit 50% across the whole browser or is that 50% of the container they are in, namely the body and if you test it you should find the answer. So you should be able to see that if the item is in a container the area it’s allowed to work in is limited, that percentage is how much of the containers provided width can it fill. So, notice my paragraph text which is long enough that it would fit all the way across if we let it. It would fit all the way across the white body, does not. So it’s relative okay so with that in mind then you want to say well, alright, these items maybe should fill 90% of the white area so we can have a little room on the left and right and again we can specify that the margins, which is the space to the left and right outside this text have a certain percentage and that needs to add up so, you kind of have to do a little math. When I say margin 5% it’s going to be left, right, top and bottom but when you measure the width you have to say well if there’s 5% of the available spaces on the left and 5% on the right, that’s 10% and then that means there’s 90% left for the width. So, you have to do a little math, If you don’t expect a really strange… if your math is bad expect some real strangeness going on.
90% width for the body
Okay I’m going to change this back to 90% width for the body. I just chose 50% to prove a point that the percentages are relative to the amount of available space and some things are nested inside other objects.
So what do you think so far not too bad right? You have content that’s going to look pretty nice and not require left and right scrolling, no matter what size the browser is. Then we put a little padding on there so there’s nice generous room above and below items. Anybody have any questions or thoughts so far? What do you think? You didn’t know that before? Some of you knew that before maybe.
Alright, Part 3.
Notice that as you’re browser gets large the paragraph text width gets ridiculously wide. There are rules in typography that if your body copy column gets too wide that when the eye finishes reading one line, it kind of has to dart back to the next line to pick up, you know it kind of can lose its place. Especially if you have line after line, after line, after line in your paragraph. So it looks bad. Now, if we proportionally made all the text get larger we’d be in business in fact, without Media Queries what we’re going to do now will allow our screen font sizes to enlarge kind of proportionally. And what’s more, which we’ll explain in a minute, the user has some control over that which is really, really cool and this is the thing I don’t think I’ve ever demoed before. So we’re going to set some text sizes okay. Here’s the first thing I’m going to do. Up in the HTML section I’m going to define font size for the entire document twice. First I’m going to measure it I pixels, then I’m going to say it again in percentages and this is sort of an overall statement for the document. The first is for situations that maybe don’t do well with font sizes measured in percentages which we’re going to explain in a minute but, then we’ll do it in percentages so like you know if ever there’s a situation or device that says I don’t understand this, at least we did this for it to fall back on.
I may have shrunk font sizes just by 10%
So let’s take a look, first of all I may have shrunk font sizes just by 10% right because normally font sizes, 100% means you know whatever it’s inclined to be they’ve done other browser situations and set it but now we’re saying we’re going to make it a little smaller than that. Again I’m kind of measuring it for the small screen size so you would [0:27.10.4] with that number while your screen is small and say well what’s legible you know. Can I make it small or is it… it would be too hard to read if I made it 80% or 70%. So we’re really remember we’re designing for mobile first, that’s what we’re saying, let’s get everything right in this view. Along those lines I’m now going to kind of explain in my CSS how much bigger a H1 is than a H2 and things like that. I am now going to say I need some space in my CSS to define H1’s that is different from H2’s okay and, I’m also going to give them some whacky colours so that you can tell which is which in case you’re not, you know savvy as to can’t remember which one is your H1 and your H2. So I’m going to say that my H1 is the biggest one of all and I’m choosing 200% but of course you can [0:28:04.7] with those numbers until you’re happy with the overall result but, obviously that’s going to be pretty big you know, twice as big as 100% so that’s pretty big and I’m going to say for right now that’s blue okay. Let me copy and paste that definition to others and make minor adjustments and I’ll say that my H2 is going to be maybe 160 so a little smaller than the H1 but that’s still pretty big and maybe that’s going to be green and again that colour’s just for testing so I can tell what’s what easily. I can easily come in here and change it rather than having to do [0:28:37.8] thinking. Page 3 I’m going to say is maybe a little smaller than that 140, colour orange and of course if you had other things, H4’s, H5, H6’s you could work with that. And, my P-tag of course I’m going to say that’s going to be 100 percent and the colour is going to be brown or something like that. Okay. So far I still haven’t made a change size as to the browser resizing so we’re really just defining how much bigger one item is than another, kind of just relative hierarchy. I got a little bit of change there, not a whole lot even the paragraph text size, it says 100% it’s actually reading from up here it says okay well it’s the normal 90%, 100% of that I believe.
what we’d like it to do is get bigger and bigger as the screen gets bigger
But what we’d like it to do is get bigger and bigger as the screen gets bigger so let’s take care of that. Let’s go down and here’s the cool part, wouldn’t it be nice if we didn’t have to copy these paste it into every Media Query zone and do them all by hand right. Well, now the screen’s a little bigger this could be 220% right. That’s the beauty part of working with an REM measurement. This is a set of TX for pixels or even EM which means the average height of a letter, there’s an REM a Relative EM Height. What we do is in our Media Query we define a font size for the body and all the other font sizes we’ve got in percentages read from that. So, notice that inside my 421 – 760 screen size Media Query I’m going to now define a font size for the body which I’ve never really done up above and I’m going to define it as 1REM whereas as I copy this and [0:30:37.1] down in my 761 – 960 area, I’m going to make it 1.2REM. When you’re working with EM’s or REM’s a measurement of one means, you know standard size but as you do more than one, like you’re heading towards the two but not too much, 1.2 is a little higher than one, it’s going to be 20% larger and that’s relative to the settings you gave it before so, in one statement I’m saying all my font sizes should [0:31:08.8] which is really cool. I’m going to copy that 1.2 that I gave to the 761 – 960 area, paste things above 961 and say 1.5. Change all you like. Alright, now I don’t expect any real change when it goes to an orange background because I just said let that be 1REM which kind of means saying 100%, same as you were but, when I go to green now, sorry to blue, do you notice that it gets a little bigger. When I go to green, oops I have to move this over so I can go to green, watch it get a little bigger yet. Okay, so this is going to save you a lot of time because you’re going to say as you’re designing what I’d like is this sub-header to be a little bigger than the body copy, you know 10% bigger, 20%, 30% and yet now depending on the screen size all that kind of stays in proportion, you see how that works? Now in reality you might not want to just start small and get bigger and bigger and bigger in fact, you know the smaller size, the iPhone size maybe you want the text to be a little bit larger because technically people have, it’s a really small screen and people have trouble seeing but, maybe our middle size, which is the 421 – 760 zone, maybe we can go to .8 and actually get a little… because that might be for you know iPad or something where the screen itself is actually a little larger, even if the resolution isn’t. So it’s not uncommon to say okay you know you start with big text when the screen’s really big, smaller, smaller, smaller but then when you get down to the smallest sizes go back to being a little larger again because otherwise people are going to go I can’t read that! It’s not necessarily a curb of smallest to largest but whatever seems right to you. You have full control over that and with changing one number, everything else proportionally gets bigger. Let me show you the beauty part of this too. The reason I say this is extra beautiful working with REM’s instead of EM’s you can work with EM’s but they’re sort of relative to it’s like a family tree to the next item up or outside them whereas, REM’s are… they’re information all the way back to the body and the HTML so it’s kind of nice, it works a little bit more predictably than working with EM’s. And the nice thing is, I don’t know if you know this but one of the things that designers were not supposed to do is we’re not supposed to deprive people from setting their own browser amounts. So, for [0:33:39.4] let’s say I’m testing this I’m more familiar with how to do this in Internet Explorer than in Firefox but there’s probably a way to do it in Firefox. In Internet Explorer have you ever noticed under View, you as the person browsing the web, you can say you know what I’d like to see text larger or, I’m young I have good eyesight I’d like to see text smaller. You have that ability as a user and in defining things in PEX, pixels in our style sheets we sometimes can deprive people of just having any effect. They might say I want to see it larger and nothing happens but, the way we’re doing it here they still have full control. Look at the size of your type and go to Internet Explorer, go to View – Text Size- Largest and we’re saying that’s cool because you have a right as a user to say I have bad vision and I need to see this bigger right. Or, you know, again, if forever reason they’d say I’d like my text size to be the smallest, go for it right. Then when you’re done you can set it back to medium or whatever it’s currently on. But that’s the beauty part of it so we’re now putting some of that control in the user’s hands as well which is a good thing, it’s a positive thing.
you have full control
Any questions on that? So, kind of nice I mean you can of course add to this structure as many times you want and control them and get a much more complicated structure than this but it actually works pretty well. Keep in mind with these Media Queries you can openly decide how big the page should get. Let’s say for green maybe for green we say you know I just don’t want it to get that much bigger when it’s huge so maybe in that case maybe the body does have a fixed width. You know, maybe that body’s never going to get over 900 pixels wide but you can decide that [0:35:18.8] like I just don’t want that to get any bigger. So, you just come up here, get that big and notice there is nothing I can do at that point to make it any bigger than that. So, you have full control to say at some point the screen, you know the page just doesn’t get any bigger and that’s perfectly fine however, at this point I don’t know maybe my text actually would.
Right, so, those are just some considerations, you know, make adaptations for different screen sizes using whatever CSS you think is appropriate and make sure it looks good at various screen sizes.
Okay, moving on pretty good here. Part 4.
This is going to be real quick I just want you to know that this is possible to do with images as well. If you have a jpeg or something lying around that we could put into the content, let’s do that. Let’s go, you know go to your computer or wherever you have the koala bear and the hydrangea and the you know just go grab something, I’ll go and grab a picture of myself, not that I’m like vain and egotistical or anything. Pop that into your folder so that you can use it. If you want to put it into an images folder you can. I’ll just slap it in here beside my HTML page. Okay so that way we can reference it and then go to your… go to the body and I’m going to say maybe after the first paragraph is done, make a little room and go ahead put an image tag in there. Don’t give it a height and width because that will… if you said to give it a height and width, delete the height and width. And then go browse for that image okay, nothing fancy there right. Image – Source – Equals – Whatever. Browse for the thing. Make sure it shows up. There she blows, looks to me like I’ve got to give that a little margin, a little margin on the left. Okay and let’s go ahead and style that using these percentages. They’re useful for you know for containers we’ve seen so far, widths and things but they’re also useful for width on images so let’s go ahead and do that. Now, normally we might now want to style every image exactly the same but let’s do that in the name of speed so, I’m back above, I’m in my CSS stage, above all the Media Query stuff, right after I’ve defined stuff about my H1’s and H2’s and P-tags and so right now I’m going to say all images share this style again, you might not want to do that, you might want to think of classes so that all your images don’t do the same thing it’s up to you. And we’ll say well how about this image fills 90% of its given area which will be just like the text, it’s that white space, not the whole browser but just the white body. So, we say okay I want my image to fill 90% of that with some margin space. Margin 5%. Actually let me do Zero for top and bottom and 5% for left and right. Oops – 5% see what that looks like. Remember that’ll mean that this is the top and bottom margin, this is the left and right margin because we didn’t say all four numbers. Let’s see what that looks like. Wow, hideous but anyway it works. You can see however that not only are my features hideous but the fact is this image was never made to be this big so if you’re expecting it to take a small 100 pixel by 100 pixel image and suddenly fill in all the extra details eh eh, it ain’t going to happen right, you better start with an image big enough to withstand this and of course it’s the biggest page size you want to allow, you could fix the size and say no, no, no right here you know images have a width of X number of pixels right, it’s never going to get bigger than this, I don’t want anybody to see it bigger than this because that’s the size it was saved at or whatever. Remember you owe it to the user to use good enough media and of course remember that if you do put in a media big enough that it looks good at a huge screen size, it’s probably got a big file size than on a small smart phone or other kind of small device. It may take longer to load in so be aware of getting exciting saying I’m going to have every image enormous you know, there’s a reason why you probably don’t want to but it’s kind of neat. So your whole layout can kind of upscale including images and text.
How are we doing so far? Have you got enough stamina for the big boy here, the column set ups?
Okay, get what you can out of this there may be some people afraid to ask for help but you can always ask for my help later when the Demo’s over or sometime talk one on one and get these things sorted out.
Alright now, what I’d like to do is talk about the idea that on big screens you might have room for multiple columns. On big screens you might say okay in my content area maybe I have two columns next to each other with text and images and so on but on the small screen there isn’t room so I’m just going to do one column. Okay and we will deal with this example, we’re not really going to do content columns, we’re going to do something even a little bit trickier we’re going to do it with navigation. Okay what I’m going to say is that I’d like my navigation to be stacked across the bottom to begin with on the small screen. Remember that at the top of our CSS here we’re making this work on the small screen. So let’s do that. I’m going to go over to the HTML and I think navigation belongs right underneath my sight title before my page title. That makes sense given the choices of the project so I’m going to go ahead and do a little of that. I’m going to go ahead and start an unordered list and each element in there is going to be a list item in a list, each link in my navigation. This is a time honoured tradition that helps in case people are looking at your page in a situation where there are no CSS styles it’ll still look like a list which is nice. However, as you’ll see one of the first things we’re going to do is keep it from looking like a bulleted list because we want it to look like these maybe rectangular buttons right. So, you could put some H or F’s in there for each of these links, maybe I’ll do like an absolute link to Yahoo if you feel like testing this out or something but, it’s going to be an A-tag and we’ll just have the text inside the A-tag say link one, close the A-tag, close the list item, okay and close the unordered list. Right now we have one link and it looks like a bulleted list. We’ll put three of four of these, line one, link two, link three, link four okay. There’s nothing too weird but each of them is an A-tag wrapped round a word or two and a list item tag wrapped around that and then an ordered list wrapped around all of those. Let’s take a look at what that looks like. Bam okay and that’s not too far from the orientation I want on a small screen. Maybe there’s no room for these things to fit left to right, right next to each other so maybe this is alright but, I am going to take some trouble to get rid of this indenting, to get rid of the bulleted and make these each look like they’re on a coloured background with a little space in between.
I’m going to give it a background
So here we go in our styles, before our first Media Query so still up in the top section somewhere, I’m going to do it right under the image, I’m going to go ahead and say that every UL in my project, on my page shares some characteristics. First of all I’m going to give it a background, it’s kind of a darker purple. I’m going to get rid of the bullets by saying Lift – Stop – Tighten on. That gets rid of the bullets. To get rid of the indenting I’m going to have to control the patting and margin so patting is going to be zero that ought to do it. If I had done the CSS reset I probably wouldn’t have to do this but I didn’t. And I’m going to give it the same kind of margin, this bulleted list we have the same kind of margins that everything else in my white area has but there’s a little room left and right. So let’s see where that get us. Don’t forget to close your curly. So check out my new box for my navigation now, see that? It’s a box stretching across. I just want to make each one of these things look like an actual individual box, like an individual button. Okay so, let’s go ahead with that. I’m just going to give… actually quite a few characteristics to my A-tags. I’ll give them a similar purple but a little bit lighter, I’ll choose the lavender, oh sorry violet is what I have in my notes, maybe there is no lavender. Now, I’m about to give a… I’m about to ask them to kind of have some padding and so on around them and margins and A-tags by their nature are not block level, I can’t have those things so I’m going to say that my A-tags display as a block and that’s going to enable things like margins and if I feel like, width and height I could throw that in as well but, I’m going to let width and height kind of be automatic. I’m going to say display block. I’m going to put a little room on the bottom because otherwise whatever background colour I gave these they’re going to all mush together because there will be no space between them. So I’m going to say there’s three pixels of space in between them you know. Paddings going to give me a little room in between the edges of the violet coloured panels and the text itself so that’s going to be a good idea to make it look nice. Now within their boxes I would like to align them to the centre so I’m going to give these A-tag boxes a text alight centre. Each will be centred within its box.
close your curly
I don’t remember why I did this in my notes but I’m just going to explain that these… every time I do some text I’m going to say what font size it has relative to the base font size and then of course you can choose a colour. Ultimately close your curly. And of course just to remind you that you’re sort of under an obligation to make links look a little different when they’re hovered and completely control your colours so here’s how we say the differences that happen when it’s being rolled over and I’ll just suffice it to say that I can choose a colour that I haven’t used yet and that’s what the words will turn, that’s the colour the words will turn right. The normal colour of the words is defined by a colour property as black and here my colour property is [0:46:59.8] so, when they’re being rolled over you have a difference.
Wow, nice hideous colours
Alright let’s see what we got. Refresh. Wow, nice hideous colours. Can anybody tell me why I didn’t style the LI tags when I could have? I style the A-tags instead. Anybody have a guess? It has to do with the hit state of a button. If I style… is that what you’re going to say. If I style the LI tags that’s not really the clickable thing, the A-tag is the clickable thing so now notice I get the finger cursor anywhere in the violet area for each button, so that helps.
now we have a couple of things to take care of
Okay now we have a couple of things to take care of and we’re done. This looks pretty decent when the screen size is small alright it’s like okay I’ll see why you would do that Mr Schurter there’s no room for these things to be next to each other but notice as the screen gets larger they take up more and more room and you really don’t see websites taking up this much room with navigation when the screen size is this big right. So when they get larger I’d like them to be side by side so let’s do that.
do you really do this calculating, well sometimes you have to
I’m going to jump down to the, you can do it anywhere but I’m going to say that if the screen gets to be 761 and larger that’s 761 – 960, that’s when I’d like this to take effect and say alright my LI tags and here we are defining LI tags, these are now going to float left. That will enable these to be side by side. I’m going to, and I did this math very carefully, I want these to look like boxes that are to the left and right of each other so I figured out that because I have four of them and of course this isn’t true of every project, because I have four of them each one needs to have 22% of the space they’re allowed to run around in. Which leaves us a little margin in between… and here’s the thing I’ve said margin left, 4% so the space in between these boxes is 4%. And here’s where some of you are going to go oh my gosh do you really do this calculating, well sometimes you have to. Now, the thing is I don’t want that much space between all of them because if I put a little space to the left of the first one, that looks a little weird, why is there space to the left of the first one. So what I want to do is I want to say the first one doesn’t’ get a margin left so like this… I want to say alright I have to define that, somehow make that first one have a margin left of zero, you don’t want any space to the left of it. So how am I going to do that? Well I’m just going to give that one a class and there [0:49:45.6] you can do this but I’m going to say alright this first link, this first LI has a class of first. Okay only that first LI, not the other three just that one and then as you might have guessed that’s how I can then refer to it. I can say right here’s an LI and it has a class of first, it doesn’t get that.
I don’t need that extra padding
I also figured out in my notes that I want to get rid of that bottom margin on my A-tags so I’m going to say, now that they’re side by side instead of top to bottom I don’t need that extra padding on the bottom, that extra margin on the bottom. So notice I’m overruling something that happened higher up. This is the kind of patients you have to have to deal with this kind of stuff. Let me see if I got that right. Refresh. Make my browser size big enough and suddenly bam okay, left to right.
On A-tag zero, margin bottom zero okay.
more power to you
Now you know you may say I have better ideas and more power to you, go to it but that’s awesome. Notice it turns green though, I forgot to say when it’s nice and big and the background turns green it also should be side by side. So in that sense maybe I just want to grab all this new stuff about the… make it float, copy and paste it down here below in the other zone. If you want to have some kind of change you can but that should be pretty decent and that’s a really more complicated example of what you might do if you wanted body copy content columns to be beside each other when the screen size is a certain width, let them float beside each other. Giant columns full of text and images or other kinds of media whereas when it’s a small screen size and it’s ridiculous to have them next to each other then let them stack on top of each other. Side bars can be below main content, you know, whatever you think should come first, second, third.
do what you can
So what do you think, not a bad screen design that you can adjust width, height, whatever you think. Obviously adjust colours because I don’t want people putting out portfolio projects with these hideous colours but do what you can.
And that concludes today’s demo. Thank you so much for showing up. Save your work hopefully it’ll allow you to make a web page that responds to different websites without much trouble.
About the instructor...
Frank grew up in Columbus, Ohio and moved to Pittsburgh to attend Carnegie Mellon University, where he majored in Illustration and graduated with a Bachelor of Fine Arts degree. He spent ten years working in the video game industry, first as an artist, later as a game designer. In 2001 he turned to web graphics and discovered how rewarding teaching can be. He obtained a Masters in Multimedia from Duquesne University in 2007.
Frank believes that expressing oneself creatively is as vital as breathing, and he always seeks to inject creativity into any task at hand.