Intro to Responsive Design

Quick reference

• 00:05 Okay, so in this video, I wanna start to talk about responsive design.
• 00:08 So we've learned a lot in this course so far, now it's time to put it all together
• 00:12 and really talk about some more advanced stuff.
• 00:14 In the world of CSS,
• 00:15 responsive design is just about the most complicated stuff there is to do.
• 00:19 In fact, I'm always looking at websites like indeed.com, job website for
• 00:23 programmers.
• 00:24 And there are constantly tons of jobs for responsive designers.
• 00:28 Because that's the cool thing right now, right?
• 00:31 Mobile design.
• 00:32 You need a website that looks good in web browser,
• 00:34 and at the same time looks good on cellphones, mobile phones.
• 00:38 And that's what responsive design is all about.
• 00:39 So I've created this very simple website using lorem ipsum text.
• 00:43 Gave it some fake links here.
• 00:45 Now if we resize our browser, and
• 00:47 I just pull this in, you can see everything gets squished together and
• 00:51 it sort of resizes but it's still in the same general layout, right?
• 00:56 We still have links on the left, text in the middle, and
• 01:00 a folder down here or header up here.
• 01:02 It kinda resizes a little bit and that's good.
• 01:05 But this is not a responsive design because it looks the same as it does when
• 01:09 it's large, it's just all squished together.
• 01:12 So this is not responsive, this is not what we want in responsive design.
• 01:16 And these days, whenever you design anything it's important to design,
• 01:20 we'll call it responsive first, all right?
• 01:22 Mobile first.
• 01:23 You want a design with an making it look good, first on a cell phone,
• 01:27 and later on a regular website.
• 01:28 And the reason that is it's because as we know cell phones have overtaken actual
• 01:33 computers.
• 01:33 More people go online on their cell phone,
• 01:35 on their mobile phones than they do with the computer anymore.
• 01:38 So it's important to make your website, your designs, look good on mobile.
• 01:42 So exactly what I mean and exactly what we're gonna do, created another page
• 01:45 called responsive.html and we'll get into all this a little bit later.
• 01:49 But you could see it's the same basic thing but this one is responsive.
• 01:53 So if we drag this in, you see it resizes.
• 01:55 Boom! And
• 01:56 when it hit a certain level, the site changes and those links they grow,
• 02:00 they move up here, and everything changes around.
• 02:02 So if we we go as far as we can, this is the design of a cell phone, right,
• 02:07 this size.
• 02:08 So, we can sort of mimic what a cell phone looks like just by resizing our browser.
• 02:11 But you can see these buttons here, have now moved over, they have grown,
• 02:14 everything sort of lines up naturally and fits good on a screen like that.
• 02:19 So that is Responsive Design.
• 02:20 And that is what we are going to be learning in the next few videos.
• 02:22 Now I could teach you the entire course on responsive design.
• 02:25 This is complicated stuff.
• 02:26 And we're getting towards the end of this course so
• 02:29 we're just gonna a very quick polish on this.
• 02:31 And you're gonna see some key concepts and some basic ideas on how to do this.
• 02:35 And then if you wanna go on and learn advanced techniques in responsive design,
• 02:39 you can do that.
• 02:39 But that's responsive design, one thing I will show you really quickly,
• 02:42 it's kinda cool.
• 02:43 So if you have the Chrome web browser and you come down here to more tools and
• 02:47 then you click on this developer tools tab, you can see,
• 02:53 doc size, let's put, yeah there we go, so I moved this over It's over here.
• 02:55 So you can see up here, you can toggle between devices.
• 02:58 Now this is Desktop.
• 03:00 We toggle again.
• 03:01 This is what your site will look like on a phone.
• 03:03 And if you click here, you can pick which cell phones.
• 03:06 So you can come through here and click and check and see what your website is
• 03:10 gonna look like on all these different devices, Nexus 6, Nexus 5, iPhone 5.
• 03:14 And this is a good way to test to make sure your responsive design looks okay.
• 03:19 Even iPad it has.
• 03:20 So if we go back to our non responsive design and I click Galaxy,
• 03:25 you can see all this it squish the whole thing together does not look good.
• 03:29 It's hard to read even the text it gets kinda smaller, right?
• 03:34 Versus if we do our responsive, everything gets bigger,
• 03:37 this is easily readable, and very, very cool.
• 03:39 So this is the Chrome web browser, Google Chrome, it's free.
• 03:42 If you don't have it, you can download it for free.
• 03:44 You can go ahead and close that, and
• 03:45 you just come up here to this little guy right here and click.
• 03:48 More tools and then Developer tools.
• 03:51 Yeah, so anyway, that's responsive design.
• 03:54 We're gonna dive right in and get into this in the next video.

Lesson notes are only available for subscribers.