 How do you build websites that work well for all your users, no matter what device, screen, or window size? Why do we need responsive design? Well, the problem is that on the web, one size does not fit all. We have different devices, browsers, and screens, and even different data requirements. And this is a core part of the progressive web app attitude. We need to build layouts, content that work for everyone everywhere. If your site doesn't adapt to the user's device, you break engagement and lose trust. Now, check out these two quotes about responsive design. As Liza says, you know, manage risk, focus on content. The first thing to remember is that you can make virtually any site usable simply by sizing elements and content correctly. Now, the golden rule for great progressive web app is not to let content overflow horizontally, especially on mobile. This sounds basic, but lots of sites break this rule by styling wide images, inputs, and other elements with fixed pixel sizes. Instead, use relative measurement units, AMRAMs, or percentage, and make the most of CSS Grid and CSS Flex. These are both widely supported and by far the best way to build layouts and achieve responsive sizing. There are good fallbacks as well. Anyway, adding a meta viewport tag will also solve a lot of problems. This tells the browser the size of the imaginary or virtual viewport on which it renders a web page. Without setting the viewport meta tag correctly, most browsers scale down a page to fit a virtual viewport that's 980 pixels wide. The best examples I've seen are the ones that we're linking to here. The initial scale value sets the zoom default for this page. Now, don't set a maximum value. That'll make it impossible for users to zoom, and that's a big problem for accessibility. And one other thing you should be aware of, the viewport meta tag will mess up the layout for fixed width sites. The meta viewport tag is designed to work with responsive layouts. If you use it in a fixed-sized layout, it will break things until you convert the site to a responsive layout. So try document dot document element dot client width to see how the viewport meta tag affects the virtual viewport. And here's another really simple technique. This solves many layout problems. You set the preferred size and the maximum size. This works for video and audio as well. So you might think that relative sizing would fix everything. In fact, for a while back in the day, some of us thought that relative sizing could solve everything. We had liquid layout. Maybe even text could be relatively sized. But it turns out relative sizing is not enough. Simplistic relative sizing like this means that you have content areas that are too big on desktop and too small on mobile. And this is why media queries were invented. It's a simple concept. Use different CSS for different sized viewports based on width. Now, that doesn't just mean making the same layout fit every device. On a phone, you might want a single column layout, two column on a tablet, three column for desktop, and so on. You can use media queries to select different layouts and element sizes depending on viewport dimensions. Here's a single column layout on mobile, two column layout on tablet, three column layout on desktop. So you think about devices, and you might think you could get away with this. Now, ask yourself, what could go wrong with this approach? What about new devices, new viewport sizes? What about changing window sizes on desktop? We'll come back to this. So is that all there is? Well, no, of course not. There is a better way. Remember, content is what matters. Devices keep changing, and device viewports are getting bigger and smaller, not to mention pixel density, pixel shape, display quality, and so on. Now, don't force your designers and developers to make a change every time a new device appears. Start the design process with the smallest form factor, then add the major breakpoints for the form factors that you work with, phone, tablets, laptops, and widescreen devices. You can then create minor breakpoints to handle specific changes to elements that don't affect all elements. The final detail to keep in mind is to optimize the content for reading. Now, ideally, keep the width of your content to 70 to 80 characters. Wider than that value, it makes content harder to read. That doesn't mean you stop thinking about devices and device classes. You might want one column for phones, two columns for tablets, three columns for desktop, or whatever. You can find out more about these recommendations on web fundamentals. Now, remember the earlier media queries example. In the mobile-first world of PWAs, we need to turn that around, make small viewports the default. You can see an example here. By the way, there is no fixed rule about whether or not to include media queries in line or to use a separate file. Also, you might want to consider using M's or REM's for units here, but I won't go into that now. By the way, you can also do responsive layout in JavaScript. The code sample here shows a simple way to do conditional content. The match media method used here is well-supported and there are polyfills. But anyway, getting back to CSS, the calc function is really useful in responsive designs where you want to use a combination of fixed widths and percentages. In this example, we have two thumbnail images side by side, 50% the width of the parent element with a 10 pixel margin between them, no matter what the size of the viewport. As I said earlier, you should also look at CSS Grid and CSS Flex for layout sizing and margins. But now, responsive design, you know, it's about more than just changing sizes and layouts. You may also need to manipulate content. For example, on a phone, you might want to make sure important page content is visible when the user arrives at your home page. So you could opt for a hamburger menu for navigation and put banner ads lower on the page. Also, you know, if need be, you can just get rid of stuff. On desktop, your users will want full functionality but not on mobile, right? Well, no, wrong. Don't guess your user's needs based on viewport size. Don't assume users will want less content or less functionality on phones than desktop, say. Again, this is a crucial part of the PWA attitude. Understand your users, don't second-guess them. Design should be driven by data. So build content layouts and functionality to help users get to what they want as quickly as possible. Our data shows that every step to get to content loses 20% of users. Rather than removing content, a more sensible option can be to choose different content. For images, this is called art direction, choosing different images or image crops. You can see an example of this in our Responsive Images video. You might even want to provide different text for different viewports, such as shorter headlines, but be careful not to assume mobile users want less content. For video, the general rule is to choose a smaller resolution for smaller viewports. This can result in massive reductions in byte size, playback performance, and streaming cost. The best way to do this is with adaptive streaming, Dash or HLS, not just media queries. You can find out more about adaptive streaming in the course materials, but just to reiterate, the key point here is that when you're delivering video to mobile, don't use resolutions larger than required. And talking about video content, don't forget to caption videos using the track element. It's really easy. Let's take a look at a relatively new technique for creating responsive layouts. CSS Flex provides flexible sizing and alignment, element reordering, and better performance than floats. CSS Flex is well supported and we strongly recommend it. Easy centering is the holy grail of CSS. Take a look at the code here. It's incredibly simple, and I still find that slightly thrilling. Anyway, by the way, the materials that accompany this video have links to lots of Flex examples, including the one shown here. So let's look at the CSS for the example. This uses CSS Flex for three different layouts, depending on the viewport width. Let's start with the defaults for smaller viewports. Remember, mobile first. The container is declared to use CSS Flex. The Flex Flow property means child elements can wrap rather than all being squashed onto the same line. You can also use inline flex. It's shorthand for flex direction and flex wrap properties. The default is row no wrap. 100% width for each div in the container, add a different layout for a slightly larger viewport, and different again once the width hits 800 pixels. The container is now a fixed width and centered horizontally using margins. So let's take a look at the example here. Once again, this uses CSS Flex for three different layouts, depending on the viewport width. And again, let's start with the defaults for smaller viewports. For viewports wider than 600 pixels, the order has changed. On smaller viewports, we give child one full width, but for a slightly larger viewport, we can put it next to child two. I could go on. CSS Flex and Grid have revolutionized layout and sizing on the web. Finally, two other properties I'd like to draw your attention to. Justify content, how items are packed, and align items, how items are aligned. CSS Grid is in some ways related to the old grid system concept, familiar to graphic designers. The pages thought of in terms of lines, tracks between lines, cells and areas. I won't go into the details here, but CSS Grid is now widely supported and it works really well in combination with CSS Flex. You'll find more information in the resources for this video. The accompanying lab exercises will help you get started with media queries, breakpoints, Flex and Grid. And you know, if you haven't used CSS for a while, you'll find that responsive positioning and sizing is much easier than it used to be. Thanks for watching.