Chapter 5. Responsive layouts
This chapter covers
- Using percentages to create fluid layouts
- Animating the off-canvas navigation pattern
- Adjusting the layout for varied screen sizes
Building a responsive layout is, quite possibly, the easiest task in building a responsive website. All a layout has to do is gracefully refactor at given breakpoints. In chapter 1, I showed you some media queries to enable this refactoring, and you saw how selectors can override each other when applied from within a media query. To build a responsive layout, you just need to apply this logic. An element in a small screen should be one width, and then another width in a larger screen. But despite how simple this sounds, things always find a way of getting more complicated.
Responsive layouts tend to get more complicated because layout is often still determined in fixed terms. When a layout is created in a graphics editing program, the sizing is specified using measurements like pixels. It’s easy to adjust sizes and share screen space when you’re using CSS, but doing it in graphics programs is a recipe for inconsistency and extraneous coding because there’s an inherent difference in the way these two technologies render their visual layers. That’s why it’s important to determine layout for a responsive site in the browser, not in a comp.