Responsive Design Patterns

[MUSIC] 0:00 So far, I've hinted at the idea of a single mobile column becoming multiple 0:04 columns on desktop, which is a pretty common feature in many responsive layouts. 0:09 However, thinking about it more deeply, it's important to consider how 0:15 different design patterns will translate from one breakpoint to another. 0:20 For example, if you want to include a full screen background or 0:24 pagination or an image carousel, you need to think about how 0:28 each atomic piece of design will look when it's scaled up or down. 0:33 There's a huge number of design patterns that are in common to many websites, and 0:38 there's also a lot of variation between them. 0:43 Rather than try to explain each one specifically, 0:46 let's take a look at a few select examples just to 0:49 outline the type of thinking that's necessary when building these layouts. 0:53 So, here I have the same site that we have been 0:58 looking at before in previous examples. 1:01 And you'll notice that not only do we have two columns here 1:04 that turn into one column, there's a couple of other things going on here. 1:09 There's also the navigation, and 1:13 the navigation starts out using this tabbed design pattern. 1:16 However, it ultimately ends up being a vertical menu. 1:22 So, we size it down here, and we're still using tabs here. 1:26 And then it becomes a vertical menu. 1:33 So, those two things are two examples of how you can take an atomic piece 1:37 of design like this and think about it in terms of a design pattern. 1:43 You may even want to switch between two different design patterns if one might 1:48 work on mobile like this and one might work better on desktop like this. 1:54 Same thing with the columns. 2:00 We're going from a two-column layout to a one-column layout. 2:02 But in the orientation example, 2:06 we kept the two-column layout because it looks better in landscape view. 2:09 So, the thing to remember when thinking about design patterns and 2:14 breakpoints is to think in terms of these atomic units, 2:18 something like a multi-column layout, or something like the navigation, 2:22 pagination, something like a image carousel, and so on. 2:27