Hi everybody. Every once in a while, I like to step back and think about some of the terms I use in this class and make sure I've actually defined them for you so we're all in agreement or understand what the general meaning is. One of those terms is breakpoint. People hear it talk about it all the time when they're talking about responsive design, but what are they? Breakpoints are sizes or positions that define a change in your site layout or content. So you might say, I'm going to set a breakpoint at 500 pixels, 800 pixels and 1,000 pixels. And depending on those sizes you're expecting to see some sort of change. We use these breakpoints to provide the best possible experience for users based on the device information we have. Now, there's more to it than just breakpoints. You might also want to talk about resolution, whether using print, but breakpoints are really a key element that you want to understand. The other phrase I use quite a bit in conjunctions with breakpoints is this idea that they trigger something, breakpoints trigger changes. And to be honest, it may not be the best phrase to use. That's because most people don't actually resize their window when they're on it. You open up your screen and there it is. As developers, I encourage you to open up your browser, make it big, make it small, kind of resize it all the time. But most people aren't going to do that when they're viewing your page. So when we talk about triggering these changes, we often mean triggering rules in your style sheet instead. That's why I'm going to use breakpoints to refer to which rules I apply in different situations. So how do you determine what those breakpoints should be? While I'm teaching, I'm kind of notorious for just randomly picking numbers and throwing them out there, because I'm just trying to do things on the fly. In the real world, people tend to set their breakpoints based on one of two things. The first is devices. They'll think ahead and think of all the different devices out there, and try to figure out which breakpoints correspond to the different machines. Other people feel strongly that you shouldn't think at all about the different devices that are out there. Because they change all the time. There's always a new phone, a new tablet, and you can't keep up with that. Instead, you should base your breakpoints based on the content of your page. You figure out what it is you want there and decide when will it really look good next to each other versus not. Let's talk about using devices as a breakpoint. So what I have here is just a quick little shot of some of the most common devices and their screen sizes. So with the iPhone 4, you'd want to think about breakpoints at 320px and maybe 480. The iPhone 5, when that came along, all of a sudden you'd need to think about a different max width because it's up to 568px. iPhone 6 got a little bit bigger still, and then the iPhone 6+, well, let's just agree it's ridiculous. The new iPhone is supposedly going to be even smaller so you'd need to think about new screen sizes for that. We also have the Galaxy S3 and S4, they have very similar breakpoints. And then, the S5, again, the same thing, just a little bit bigger on the smaller screen. I think this is how most people come up with their breakpoints. They'll look at the screen sizes, find some that are similar or find the lowest possible number for the smallest screens and maybe the biggest possible number for the larger screens and just build around those. In most cases, your content's going to fill in just fine. And it would be impossible for you to go in and try to have a different view for each one of these sizes. And of course, when we talk about breakpoints, we want to talk about mobile first. In a lot of paradigms, you're never going to see a breakpoint of 320 pixels or even 360 pixels. You're not going to see that because they're already designing as if the default style sheet covers the smallest possible screen. The good thing about this or the great thing about this means that your page is going to work successfully and show all of your content even on much bigger screens, because you don't have any breakpoints that you may or may not miss. So that's a really great thing about designing mobile first. That also means though, that if you're going to be using code that isn't yours, maybe you have someone else's style sheet. If you see them using max-width instead of min-width in their rules, that means they did not design for mobile first and you might need to move things around. But as I mentioned at the beginning of this lecture, today, I really just wanted to talk about these key words. Breakpoints, triggering, mobile first. You won't really get a good feel for them until you've had the time to write some code yourself. So don't worry if your not familiar with them at first. But make sure your constantly thinking back, hey, what does a breakpoint mean again, is this an example of triggering, and I really hope you'll really understand mobile first by the time that we're done with this course.
