Intrinsic webdesign

I have been admiring Jen Simmons's work for many years now. The ideas and the engagement, as a member of the CSS working group An effort to improve the functionalities of the medium we struggling with and dealing with: web and web development. I both envy and appreciate also her eloquence in communicating ideas.

Her ideas and job attract me to her concept of "intrinsic web design".

Intrinsic web design is an approach to designing websites that prioritizes flexibility and adaptability to different devices, screen sizes, and user contexts. It aims to create a more seamless and user-friendly experience by designing with the inherent qualities of the web in mind, rather than forcing content into predetermined templates.

At its core, intrinsic web design is about creating a website that responds to the user's needs and the constraints of the device they are using, rather than imposing a fixed design that may not be optimized for all users. This approach allows designers to create websites that can adapt to a wide range of devices, from large desktop monitors to small mobile screens, without sacrificing usability or accessibility.

Intrinsic web design relies on flexible layouts and responsive typography, which allow content to flow and adapt to the available space. It also uses techniques such as progressive enhancement, which ensures that basic functionality is available to all users, regardless of their device or browser capabilities, while more advanced features are added for those who can support them.

Overall, intrinsic web design is a holistic approach that considers the entire user experience, from the content to the user's context and device and aims to create a more fluid and flexible web experience.

To demonstrate Jen's concepts with a practical example I can use Grid Css and Flex techniques, and code the style-sheet of a grid layout.

By default, Flex displays the flex-flow as a row with no-wrap feature. The effect is that when the screen size reduces, the single cards crimp due to the no-wrap line. Giving the card a minimum width to the items in the flex container, and changing the no-wrap to wrap to the self container, like that:

.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.flex-item {
min-width: 12rem;
}

we "intrinsic" obtain a fluid and flexible behavior between different screen sizes.

The same experience can we get with Grid Css. By designing the template columns in the right way we might achieve a fully responsive solution for the layout grid:

.grid {
width: 100%;
background-color: #f00;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 10px;
}
.grid-item {
background-color: #ff0;
padding: 1rem;
}

Other techniques, which involve dynamics sizing with percentage and viewport dimensions, give us opportunities to avoid many constraints of media queries and generate more and more intrinsic web design.