The Power of Intrinsic Web Design: Unlocking Art Direction on the Web
In 2018, Jen Simmons introduced the concept of Intrinsic Web Design, a collection of ideas that highlight the possibilities of modern CSS. This approach is not a framework or a set of rules, but rather a way of thinking about how to utilize CSS to create better layouts and art direction on the web. One of the key concepts in Intrinsic Web Design is the idea of “stages of squishiness,” which refers to the way elements on a web page can adapt and change as the viewport size changes.
Sizing Items with CSS
To understand how stages of squishiness work, we need to look at how browsers size elements on a web page. Each element has a set of CSS properties that determine its size, such as width and height. However, these properties are not always straightforward, and there are many factors that can influence the final size of an element. The CSS specification provides a detailed explanation of how elements are sized, including the concept of intrinsic and extrinsic sizing.
Intrinsic Sizing
Intrinsic sizing refers to the way an element’s size is determined by its contents, rather than by external factors such as the viewport size. This approach allows elements to adapt to their content, creating a more flexible and responsive layout. Intrinsic sizing is not a new concept, but it has become more important with the rise of responsive web design.
Extrinsic Sizing
Extrinsic sizing, on the other hand, refers to the way an element’s size is determined by external factors, such as the viewport size. This approach is often used in conjunction with media queries, which allow developers to specify different styles for different viewport sizes. However, extrinsic sizing can be limiting, as it does not take into account the content of the element.
Stages of Squishiness
The concept of stages of squishiness refers to the way elements can adapt and change as the viewport size changes. This can be achieved through the use of intrinsic sizing, as well as other techniques such as flexbox and grid. By allowing elements to adapt to their content and the viewport size, developers can create more flexible and responsive layouts.
Relative Sizing of Elements
One common design pattern for responsive design is to use relative sizing, where elements are sized relative to the viewport size. However, this approach can be limiting, as it does not take into account the content of the element. By using intrinsic sizing and stages of squishiness, developers can create more flexible and responsive layouts.
Sizing with Variable Rates of Change
Another technique for achieving stages of squishiness is to use variable rates of change, where elements are sized based on a combination of factors, such as the viewport size and the content of the element. This approach allows developers to create more complex and responsive layouts.
Better Responsive Art Direction
By using intrinsic sizing, stages of squishiness, and variable rates of change, developers can create more flexible and responsive layouts that adapt to the content and the viewport size. This approach allows for better art direction on the web, as elements can be sized and positioned in a way that takes into account the content and the context.
Conclusion
In conclusion, the concept of stages of squishiness is a powerful tool for creating more flexible and responsive layouts on the web. By using intrinsic sizing, stages of squishiness, and variable rates of change, developers can create more complex and responsive layouts that adapt to the content and the viewport size. This approach allows for better art direction on the web, and creates a more dynamic and engaging user experience.