Website build process

So first up let's talk about the process, so first up you'll need to design your website first in something like Photoshop or Illustrator. So you can see here, I've designed what my website looks like on a Desktop, what it looks like on a Tablet, and what it looks like on a Mobile. And you can see, they are very similar, but each design kind of takes best use of the device sizes. So, it's just some font size changes, it's some reordering of a box, just to make it look on different devices. And this is what we call Responsive.

So the website's going to change shape and change form a little bit depending on whether it's Mobile, Tablet, or Desktop. So that's our first big term out of the way. Responsive Web Design just means the website changes to best use the device. So it doesn't matter, Photoshop or Illustrator, but I've designed mine here in Photoshop, now we need to translate it into this. This is the finished version of our website where you can see it matches my Photoshop mock-up for Desktop, but when it gets down, watch this, down to Tablet, can you see, it changes there. I'm kind of dragging my browser in and out.

You see the font size changes, it becomes centered. The columns go from three across to two. So that is our term Responsiveness. And we're going to build this and get down to Mobile, where it just stretching one across. We'll also do some stuff where, we'll notice that there are six on Tablet, but only four on Mobil, so we're going to deactivate some of them.

We're also going to change the Menu along the top here. You can see, in my Photoshop mock-up they're all straight on Desktop but they kind of collapse into this other version on the smaller devices. So we've worked out what Responsive means and we know what we're going to be building. Let's go off now and start building it.