What do we need to fix

- [Rik] So, in lesson number four, we're gonna talk about fixing a few things. Now the first thing that we'll talk about fixin' is if we resize the site. You'll see that it breaks as I showed you on my phone earlier. Now, what we're gonna do is we're gonna talk about something brand new called media queries. These are based in CSS, because it's how it looks and how it feels. And what we'll do is rather than makin' two versions of the website, we'll change style depending on how wide our page is.

So rather than it being here, what we'll do is we'll fix the layouts and make it look pretty good. The next thing that we'll do is we'll add something to our contact page. At the moment, it just says, "Contact me on my email and I'll try "to get back to you within one business day." But this isn't in our design. What isn't our design is a form. So how do we fill this in? Now the last thing we'll talk about in this lesson is variations.

Now we've worked with three different designers on different variations for this project. We've worked with Alice who's worked for clients such as New York Times and Vogue and she's come up with a completely different version. Alex Mosely is an illustrator. She does a lot of illustration work so she's come up with this site and this design as part of the brief. So, this looks a little bit different. We're using the same brief but in a completely different way.

I've also worked with Jacqueline, who's worked with clients such as Two Dots and Google as well. And you can see here, we've got a very different design system. So completely different even though it's roughly the same brief. So it's again, something that looks very, very different. And we've also worked with Mirror who's worked with places like Studio Moross. And what we can see here is something completely different as well.

Different settings, this is a flower store, it's a horticultural studio based in London. So we've got something that looks very, very different in all of these different settings, but we've got most of the framework that we need for this. We have all of our structure, our HTML, and our style setup, all we need to do is make the tweaks. So if you do want to do different versions of this site, you're very, very welcome to. We're using the exactly the same techniques.

But what we'll show is there's a few things in here that are different. For instance, this layout is different than here. How do we go about fixing that? So we'll talk about that over the next few videos. But the first thing we'll fix is this mobile version of the site. How do we make this look responsive? We're gonna talk about responsive design.