Creating Breakpoints

Breakpoints define a certain threshold where the layout should change. 0:00 But how do we decide exactly what that certain threshold should be? 0:04 Your first instinct might be to make breakpoints based on 0:09 different popular devices. 0:12 For example, if we know that a popular mobile phone has a width of 320 0:14 pixels in portrait mode, then maybe we can create a breakpoint there. 0:18 However, this is actually bad practice and not a sustainable approach. 0:23 Responsive web design was created to help address 0:28 new devices being introduced all the time. 0:31 So, if we create breakpoints based on specific devices, 0:34 then we're just recreating the same problem for ourselves. 0:38 Instead, we should create breakpoints based on our content. 0:42 Whenever our one column layout starts to look bad, 0:47 we should create a breakpoint and make the appropriate adjustments. 0:50 That said, going from a one column layout to a multi-column layout 0:54 is a pretty dramatic change, and not every breakpoint demands it. 0:59 Instead, we should also make major and minor breakpoints. 1:04 Maybe just one element just needs to be slightly resized, 1:08 or some padding needs to be changed on a list. 1:12 If that's the case, then we can also set up minor breakpoints. 1:16 So, let's take a look at an example. 1:21 So here we have the same site that we have been looking at. 1:23 And if I resize the browser here, let's start out on our mobile look, here. 1:27 And you'll notice that we have these buttons here, and 1:33 that makes sense for this mobile layout. 1:37 This would be on a fairly small screen, a mobile phone screen. 1:40 And you'd want these large tap areas for people to click on. 1:44 You wouldn't want small, tiny links. 1:48 And then we also have a one column layout that really lends itself 1:50 to scrolling up and down. 1:54 Now, if we size up a little bit here, 1:57 we get to something that's maybe more suited for a tablet. 2:00 And again, we have these large tap areas that work really well for touch. 2:05 But still, 2:09 in portrait mode on a tablet, we would want something that looks like this. 2:10 Now, we also have a media query that adjusts based on orientation. 2:15 So if the tablet or maybe a phone is in landscape, 2:19 we have a layout that looks something like this, and 2:24 this will also work on smaller laptop screens. 2:28 I, for example, am on a 15 inch screen, but if you're on a smaller 2:32 laptop than that, a lot of users might get a layout that looks like this. 2:37 Now, this works pretty well, but we have a minor breakpoint here. 2:43 So you'll notice, up at the top, the size of the header changes very slightly. 2:49 And this is mostly an aesthetic thing, but really, it's also slightly functional. 2:55 You want to have a larger header here, 3:02 because it makes better use of the available space. 3:06 Whereas if you go down to a smaller width here, 3:08 you can also assume that there's probably less vertical space as well. 3:12 So you want the header to take up less space there. 3:16 These breakpoints don't have any kind of performance cost, but 3:21 each breakpoint does slightly increase the complexity of your design and code. 3:26 It can be tempting to add lots of breakpoints to make a design look 3:31 absolutely perfect at any possible resolution, but 3:35 be careful to use breakpoints only when a change really needs to occur. 3:39 For more tips about breakpoints, 3:43 be sure to check out the notes associated with this video. 3:45