Making our site responsive

So to match our mock-up we're going to do a couple of things, like I'm going to grab the Type tool here in Photoshop, I'm going to click. I know I want 62 point for the font, and I want to push it down from the top and away from the left here. So let's go and do that now in CSS.

So in Dreamweaver here, let's put a 'return' in, and let's type in 'font'. You can see, it's given me some pre-filled options. So I want 'font-size'. You can see, I put the colon in there first. Now in our case, we want it 62. Actually I changed my mind, I'm going to use 55 pixels. Yours might be a little bit smaller, just because. And I didn't forget to add the semi colon at the end. And you knew that happens a lot. Put a 'return' in, we're going to do a couple of other things. We're going to type in 'padding'. So I've typed in 'pad', and you can see Dreamweaver, super helpful, goes, "You mean these?" And I say, "Yes", click on the top. And for the top, we're going to do 120 pixels. Remember, semi colon at the end, and the last one is going to be 'padding-left'. And I want it away from the left, about 60 pixels. Let's hit 'Save'. And 'Save All'. And let's jump into a browser, and check it out. Awesome, huh.

So that's basically it. We've dumped in our HTML, which is our H1, and then we spent a lot of time in CSS, styling it, getting it looking how we want. But now is the time to look at what Responsive Design does. Now, Responsiveness is an umbrella term used to describe some things we do in Code to make it adjust for different screen sizes. One of those things we do in Code, and probably the main one is something called a Media Query.

Now what a Media Query is, think of it as a trigger. And it only gets set off when a screen size is activated. So let's have a look at something I'vemade earlier. So this is what we're going to create, something called Media Query. And it just says, trigger this H1 when the screen size is 768 pixels, or less, but if it's bigger than that, don't worry about it, ignore this stuff. So that's what it is, it's a trigger. Only gets activated when the screen is a specific width. You can see down here, there's a Mobile version as well. Trigger this H1 only if it's 400 pixels or less. So let's go and create that now in our version. Where does it go? We're going to put it underneath our H1. So put in a couple of 'returns'. And this is the hardest bit of syntax you're going to have to write, I promise. It's not that hard, but we're going to have to type it in, follow me verbatim.

There's the '@' symbol, and we're going to type in 'media'. Then after that we're going to type in a set of brackets ' ( ) '. Inside those brackets, we're going to type in 'max-width'. We need to put a colon ':', make sure it's a colon, not a semi colon. And now we need to decide how big our Tablet's going to be. You can pick any size here. A really common Tablet size, or an iPad size is 768 pixels wide. We're just saying this Media Query here is going to be for Tablet, and that's what it gets the size as. Now, as time goes by, this default will change. And you'll find different sites use slightly different pixel widths for Tablet. It's a really common size, use that for the moment, but know it's not an absolute rule.

Last thing we need to do, after this last bracket here, is put in a curly brace. So we add the curly brace, and put in a return. That is a Media Query. I guess it's a bit hard, there's a lot of syntax that goes into that but what you can do in the future is just copy and paste it, like I do, and do all other jobs. Now, what goes inside this Media Query. Anything you want to do, but only be triggered on Tablet. What I'd like to do is change the font size. If you can see here, my version, it goes from left align, and quite big font size down to this smaller size, and centered. That's what I want to do. I want to say, when the width gets down to Tablet I want you to change this H1 to just change the size and positioning. Don't want you to change the color, the color's fine, so we'll leave that. Just the size and the positioning, so let's go and look at that in CSS.

So all we do, is, as long as it's between these two curly braces, so just here, I'm going to type in 'H1'. And just like we did above here, we need to put in our curly braces, put return in. And now we're going to go and Style it. I'd like to say something like, font-size I'd like you to be down at 40 pixels. And remember, semi colon at the end. Make sure the syntax is right, you've got curly braces either side of it. You've got a colon there, and a semi colon there. Let's see if it works, let's hit 'Save'. Let's prepare ourselves. We're about to enter an unchartered Responsive territory. Maybe, for you. So let's go and check it out in a browser.

And the way to test it, is we're looking at Desktop view here. It's quite wide, but when we get down to 768 pixels… Where that is? Just keep dragging until you figure that out. Watch this, come down… Looking at this font, I'm pointing at it, you can't see me pointing. Look at that. That my friends is all Responsive Web Design is. There's other things, but that is the main core part of it. It's that Media Queries trigger at certain widths that goes and changes your CSS. Your HTML is exactly the same. The text doesn't change, just changing the CSS for it. And that gets triggered with our Media Query. Well done, you. Hope you're excited. I remember, when I first figured this out, I was pretty excited.

Let's go and do a few other things. Jump back into Dreamweaver. What I'd like to do also is, remember, we had to do a few things we had to do our Text Align. So in Code, it is 'text-align', there it is at the top there. And I'm going to click 'center', see, this is the nice thing about Dreamweaver. I don't have to type it in, or remember the syntax. I can just click on this and all I have to remember to do-- what is the last thing that goes on the end of all these lines that everyone forgets? Semi colon. Awesome. Hit 'Save', 'Save All', Preview. Now, it's centering, it's kind of centering. Can you see, it's kind of flopped down to be centered-ish. It's because, watch this, up in H1 here, this H1 is the one that gets triggered for my Tablet. But this H1 at the top here is telling it to do Padding Left of 60 pixels. So it's using that as well. So it's got centered, plus the 60 pixels at the side. So we can override, actually, I don't want that. So 'padding-left', I would like to be '0 pixels', please. Semi colon at the end. 'Save', check it out, now we're good. Awesome, so it's centered, it's a new font size. Drag it out, be impressed.

So now we're going to go and do one more Media Query for Mobile because nothing much changes, except the font size gets smaller. So that's what we have to do. Let's jump into Dreamweaver. So inside Dreamweaver, we could type all this out again or we could just be lazy and select it all, Media Query, including the last curly brace. We forget that all the time, go to 'Edit', 'Copy'. And I'll put a couple of returns underneath here, and hit 'Paste'. And what I want to do is, a couple of things. One is, I want to change this max-width. I want to change it from 768 for Tablet to our generic Mobile size, which is 400 pixels. Now this changes quite a bit as well. There's so many different mobile phone sizes. I find 400 is a really good kind of cover all for them all. I think the new iPhones are 375 pixels wide but some of the bigger LG, Samsung phones are a bit wider. So I just make it a little bit bigger just to cover all those ones.

What I do need Left? I don't need Padding Left, and I don't need Text Align. All I wanted to do is change the Font Size So I'm doing all of it, except I want to change you down to 20 pixels. Let's hit 'Save', check in the browser. Desktop. Tablet. Mobile. It's probably a little bit small. But, let's say 28 pixels, I think that's what I wanted. A little bit bigger. So that is our Media Queries for all of our different sizes. We're just doing three in this class to keep it simple and often, for smaller websites, that's all I do. Some websites go a bit harder, they describe seven different sizes. So they have seven different Media Queries, it's up to you. But I like to stick just to the basic. Desktop, Tablet, and Mobile.

One thing we'll do in CSS, and before we go on, is we'll add some CSS commenting. All this means is that-- I know, because I just made this what this thing does, and what this guy does here, but I'd like to add some notes to myself to my future self of Dan, to say-- just so I remember what these things do. So, with your cursor just in front of the '@media query' for this one here, that 768 is I'm going to, on the left hand side here, click and hold down the one that says 'Apply Comment'. That is a comment in CSS, click on it. Nothing much happens, you can see there's a forward slash, and two asterisks ' /** '. But inside of here, if I type in 'tablet', this just means, this gets ignored by the browser, nobody sees it, it's just there for humans. It's for other Web Designers, it's for yourself in the future to know what you're talking about. I'm going to copy it, use it down here, and I'm going to call this one 'mobile'. So let's go to 'File', 'Save All'. Check it's working in the browser.

If yours isn't, yours isn't going down to Tablet, then down to Mobile sizes for this H1, you can just hit the reset button. Let's all do that. You don't have to, if yours is working, carry on, I'm going to do it. So you can close down 'index1' and open up 'index3' actually, click on that one there. Preview in the browser and it should look exactly how we had it a second ago. Nice! So if yours goes horribly wrong, open up this one up here and we'll reset, and go back to this part here.

So the next part of our Responsive umbrella, we've looked at Media Queries, that's considered Responsiveness. Another one is Responsive Images. And what it just means is, if I check out one of my final examples here, it means, when I re-size the browser, or it goes to different devices, the images actually re-size to best for it. You can see, this background moves here at the top. And all of these bottom ones kind of re-size as well. The best for the space provided. So, we're going to look at this Background Image first then we'll look at these images down the bottom here. They're both slightly different in the way we approach it.

So, jump back into Dreamweaver, open up our 'styles'. And what we're looking for is the Hero Box. That's the big box I've got here, let's look at the one we're working on. You can see, that's the big pink box I've already created for us. And what I did is I gave it a height. And I gave it a background color of pink. What I'd also like to do to it, is I'd like to give it a background. So I'm typing in 'background'. You can go down here to 'background-image'. What I meant to know, is I meant to use URL, hit 'return'. This is the long way, 'Images', I started typing in 'im'. This is really handy, this pre-filling out stuff. Especially when you get down to here, when you get to pick these images. And you get to hover above them, and it will preview them for you. There's even a quicker way that Dreamweaver uses. So I'm going to undo all of that. Up to you, you can type it in the long way. There's some really good code [?? 00:10:54] and it's this case, it's 'bgi', so 'background image'. And all I need to do instead of hitting return, or clicking one of those options is just to hit 'Tab' on my keyboard.

Can you see, it filled up background image colon, added the URL that I needed. And I'm ready to start typing. If you're new, you might be typing out the full thing just to get used to it, but once you get going typing out the whole word 'background image', and URL, remembering it as well can be tough, so just type 'bgi', and hit 'Tab'. What we want to do is, grab my Image from the Images folder. So I typed in 'i', thank you, Dreamweaver. And that just looks at my Images folder, and sees the images that I've got. And I want this one called 'background-image'. Hover above it, and that's the one I want in the background. It's even added the semi colon at the end. So I'm going to save it, and check in the browser, it's not going to work. It's there, but it's not responsive. I want it to be all stretchy, and full in the background. We do that by using our CSS property. And it's a CSS3 property.

When people talk about HTML5 and CSS3, what they really mean is just some of the newer things we can do in CSS that we couldn't do before. Before this, there was HTML4 and CSS2. So it's just a newer version, but it sound quite fancy and intimidating but really, they're just new things like this. One of the new CSS features is 'background' and I want the one called 'background-size', there he is there. And there's an option called 'cover'. That's a really cool new CSS3 feature. Add the semi colon at the end, hit 'Save'. Check in the browser. Now we're talking. Now it's all responsive, and kind of fills the space provided, gets all stretchy, and it's that CSS3 feature called 'cover' and 'background size'.

We've unveiled one of the secrets of new modern Web Design. And it's this thing called CSS3. You've seen in lots of parts, but really it's just some new things we get to do that we couldn't do before, in the new version of CSS. Now if that went horribly wrong, and yours doesn't work - I'm going to save and close that one. - open up 'index4', and that should get you back to the exact same spot. Just there's a little reset, check in the browser. And yes, it's working perfectly. Cool. If yours is working fine, you don't need to reset. Just carry on with your index1 throughout the course. If you do get lost, you can follow me, or these little resets.

So next thing I want to do is, I want to build out-- we've got this kind of top part going on, I want to build out these smaller image groups down the bottom here. So we're going to have to put in a box for these images to go into. So let's have a look in Dreamweaver. So these boxes are generally called Divs. We've got a Div already, there's one called 'div hero-box'. That's the thing that was pink, but now has the stretchy image background, so we have to create one of these for ourselves. So underneath our Hero Box put a 'return' in, and we're going to type in a 'div'. So we go, angle bracket, and we type in div, '<div' and we also give it a Class name. The Class is just the unique name that we give it. And all the syntax should be pre-filled in for you. You can see that as I type the word, as I type the word 'class', I can just click on it with my mouse and it fills in the syntax. I'm going to give it a name, you get to give it any sort of name. You just got to make sure you don't use capital letters or spaces. We're going to call ours 'col', short for column. It's really common to use that term. And to finish it off, we need to put in square brackets. And then open our last square bracket, and just like our H1, we put in forward slash. And it finishes it off for us.

So that is exactly what Hero Box got made. We've just made our own version called 'col'. Now if you are a little bit more advanced with HTML and you’re like, "Man, it's a long way of doing it. I wish there was a shorter way" there is, if you just type in '.col'-- dot at the beginning just refers to it being a Class name, and if you hit Tab instead of return it just assumes you mean a Div Class with col and it fills it all in, so it's super quick and easy. You can just type in the long way if you're new, just to get used to the syntax. Either way, Dreamweaver is awesome.

Inside of this, I'd like to put in my Image. So I've made the box, but the box doesn't really do anything yet. It's just an empty box, I want to put in an Image inside of it. The way to do it, the long way, I don't want you to do it this way because this is a really long way. You type in, <img src, and then inside that src, we go off, and find our image. Then we add Alt Text, there's all sorts of other things we need to do just to put in a simple old image. You can kind of see it up there, I've already done it. So, 'img src, there's the image, then we got to put in the Alt Text. It's a little bit long. So I'm going to undo it, and what I'm going to do is use our super-secret Dreamweaver awesomeness, and just type in 'img'. Hit 'Tab', not enter. And you can see, it puts all that stuff in for me.

Now, inside of this source-- where is my Image coming from. I type in 'i' for images folder. Thank you, Dreamweaver. And then it looks at my images folder, and says, "Do you mean these?" And I say, "Yes, I need that one there, image1, please." Let's hit 'Save All', let's jump into our browser, check it out. And he's in there. He's not responsive, yet because we just put in an HTML image, we haven't done anything else, but that's the first part, we've put in our image, now we need to make him responsive. And you do that by doing it in CSS, let's have a little look. We do it a slightly different way from the first way we did because the first option, we wanted it to be a background image.

Remember, this guy here, he needs to be a background. So it works slightly differently. So what we want to do is jump to our 'styles.css'. Then down the bottom, I want to put in the Style for Desktop view, not in Tablet. I'm putting in a few 'returns' underneath my top H1, but before the Tablet. Hope you're ready, we're going to learn something fancy called Compound Selector. So a Selector is referred to as-- that's a Selector, our H1. That was a Selector as well, these are all Selectors. So what I'd like to do is do a Compound Selector. I'd like to do it to images. So I want to make all images responsive, but not all images. I want the images that are only inside of our columns. That is called a Compound Selector, just means images, but not every image on every page, and every website, just the images that are inside that thing we call 'col'. Remember, we called it a Class called 'col'.

Now, in CSS, we refer to Classes by having a full stop at the beginning. The things that you write yourself, made from nowhere, had full stops, that's different. The ones that pre-exist in HTML often don't. You can see this one here, I made this thing up called Hero Box. So it's got a full stop in the front but this H1, I didn't make up, it's just pre-existing HTML Selector, so we don't have it. So images that are inside col, what I'd like to do to it, I'm going to put in 'curly braces' and 'return'. To make it responsive, what I'd like to do is I'd like to make it a width. Just type in 'wi', come down, and I want to make a width of 100%. Don't forget the semi colon at the end.

Now that does most of it but there's a couple of other things to make it little bit better supported across all the browsers. Let's put in 'height', and the height needs to be 'auto;'. And the last thing we need to do is something called 'display: block;' Just do those because they help all the browsers deal with responsive images. That's the guy doing most of the work, width, 100%. Let's have a little look in our browser. Cool, there he is, he is a responsive image. If I scaled him down, you can see, he gets smaller with the browser. And gets bigger as the browser gets bigger. It's not exactly what we want yet, we're going to have to make him get to a certain height, and no bigger, but that's how Responsive Images are done. And the cool thing about using a Compound Selector, where we said, images inside columns, it's not messing around with this image up here, which is my Logo, the image in the background of this. It's just dealing with the images that are inside my column.

Before we go and give it a width to match our mock-up, what we're going to do is duplicate it a few times to get all the images in there. So jump back into Dreamweaver. Jump to our 'Source Code', source code is HTML. Let's call it Source Code instead. And what we want to do is duplicate this 'col'. So I want six of them to match my mock-up here. You can see, I've got six of these boxes. So, what we're going to do is copy and paste the whole line. The easiest way to do it in Dreamweaver is to click anywhere in your image and hit 'Control D' on a PC, or 'Command D' on a Mac. You can see, it just makes a duplicate, because what I want is not just the duplicate of the image but also the column around the outside.

So I'm going to click in here, we want six in total. Then I want you go through, and instead of image1, there's image2. Down here, there's an image3, you're going to kind of click out, click back in, 4. You can see, it's previewing it for me, awesome, thank you, Dreamweaver. 5, and 6. Awesome. Let's hit 'Save', preview in a browser. Now I've got that first responsive image, but now I want all of them. All we need to go. Jump back into Dreamweaver, hit 'Save'. If yours is working, awesome, carry on. If yours is not, and it's totally not working close down the one we have open, and open up index5. That will get us back. Preview in a browser. Back to kind of where we are now.