Use responsive breakpoints to design interfaces that work across devices. A max-width container prevents 100% width layouts from breaking on 4K screens. A cash-register app needed two vertical breakpoints to avoid cutting off content in landscape mode.
Chapters
How do you future-proof your designs for new screens? I think this is what breakpoints do. When you think about designs, right, like when you think about like how they're supposed to scale, they scale from, from zero to the next breakpoint. So if it's mobile, it's zero to the tablet size or to mobile landscape or to, you know, whatever the next adjustment of the layout is. And a lot of the times you know, when you get to big screens, I'm talking huge screens, right? Like we're talking 4K, right? The screen is huge. So if you continue to go like 100% or full width, that's where your, your design starts looking weird. So a lot of times, like, there's a max-width container that keeps it in a certain container size so that it's a certain length across. Now I think, um, that being said, there are sometimes it makes sense to have, sometimes it doesn't make sense to have. Sometimes there are certain sizes that should adjust based on the breakpoint. But I think that's how you future-proof it. I mean, I guess maybe there are— I've had some times where there— I've had a design for both horizontal sizing and vertical sizing, and that got a little challenging. It was like a cash register application where I did it on like a responsive thing, like I even coded it, and if it was too short like phone landscape, it got— too much would be covered. So I would— I designed for both X and Y axis and how they handled it. But after— there was only like 2 vertical breakpoints that I had to consider. After that, it was like regular. So I feel like the breakpoint system, and if you have that understanding of that development structure, right, how that works, then you're all good.
