A presentation at CSS Café by Matthias Ott
→Matthias Ott @ CSS Café Forging Links
👋 Matthias Ott User Experience Designer Design Engineer @matthiasott@mastodon.social @m_ott@twitter.com https://matthiasott.com
We have a problem…
Websites with detectable WCAG 2 failures: 96.8 % The WebAIM Million Report 2022
Growth in mobile page weight over 10 years: 594 % Web Almanac 2022 State of the Web Report
Percentage of Consumers Happy Shopping Online 15 % Contentsquare 2022 Digital Experience Benchmark Report
☹
“ If you use style sheets properly, to suggest the appearance of a page, not to control the appearance of a page, and you don’t rely on your style sheet to convey information, then your pages will work ne in any browser, past or future.” fi John Allsopp, “A Dao of Web Design”
Frank Chimero The Web’s Grain https://archive.org/details/vimeo-122880890
“ What would happen if we stopped treating the Web like a blank canvas to paint on, and started treating it like a material to build with?” Frank Chimero, “The Web’s Grain”
We are still painting pretty pictures of websites.
Design Engineering
What we all are designing and building. What the Web platform is capable of today.
Design Design System Engineering
Prototyping
Anything can be a prototype. Sketches Paper prototypes Sticky notes Personas User Flows Experience Maps Wireframes Animations CodePens Storyboards …
Charles und Ray Eames ffi Ray and Charles Eames selecting slides for the exhibition, “Photography & the City”, 1968. © 2011 Eames O ce, LLC.
https://www.loc.gov/exhibits/eames/images/vcf23a.jpg Prints & Photographs Division, Library of Congress
high Fidelity low narrow wide Scope
Design Engineering
Design Engineering
Design Engineering
Design Engineering Exploration Translation Contribution
Design Principles Variable Fonts Filters Layout Design Tokens Typography Animation / Motion Design HTML JavaScript CSS Contrast SVG Accessibility Interaction Design Performance Gestalt Theory Colo(u)r Responsive Images Browser APIs
Typography Layout
Typography Typography Typography Typography Typography
h1 { font-size: 3rem; } @media (min-width: 40em) { h1 { font-size: 5rem; } } @media (min-width: 60em) { h1 { font-size: 10rem; } }
fl https://www.smashingmagazine.com/2016/05/ uid-typography/
font-size: calc(16px + (24 - 16) * (100vw - 400px)/(800 - 400));
Width of the viewport – min viewport width u t ’ n Do ! e r o nym a s i h se t font-size: calc(16px + (24 - 16) * (100vw - 400px)/(800 - 400)); Min font-size Max font-size – min font-size Max viewport width – min viewport width
clamp(min, preferred, max)
font-size: clamp(3rem, calc(-3.1765rem + 20.5882vw), 10rem);
font-size: clamp(3rem, -3.1765rem + 20.5882vw, 10rem);
https://www.modularscale.com/
https://utopia.fyi/
https://utopia.fyi/
Layout
Tables with spacer GIFs Locigal properties Transforms Writing modes Alignment :has() Floats New sizing values Flexbox CSS Grid Object- t Multi-column layout Subgrid Aspect-ratio fi min(), max(), and clamp() Custom properties Clip-path Cascade layers Container queries
% 8 4 . 6 9
https://vasilis.nl/nerd/our-web-design-toolsare-holding-us-back/ https://www.oddbird.net/2022/11/11/platform-tools/
The majority of UI designers has no idea of what’s possible with CSS Grid.
Example: CSS Grid
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); Repeat this fi Add as many columns as t Min and max for the width of the columns
Example: CSS Grid @jensimmons youtube.com/layoutland
https://labs.jensimmons.com/ Example: CSS Grid
https://labs.jensimmons.com/ Example: CSS Grid
https://labs.jensimmons.com/
https://codepen.io/matthiasott/pen/oNyqMgp
https://cssgrid-generator.netlify.app
https://www.youtube.com/watch?v=8slZJrTK3nE
https://www.youtube.com/watch?v=tueTFd2TQUA
https://every-layout.dev
Thank you! 💚 👉 matthiasott.com 👈
We have a problem: modern web technology is getting ever more complex. As a result, teams are struggling to produce their best work and we are often failing the people we are building for. One reason for that: the infamous and ever-growing gaps between design and development. How can we overcome those divisions and deepen our common understanding of the material we are building with? And why is CSS one key component of all that? In this talk, we will look at possible solutions and practical examples that will enable us to forge links between the disciplines and to design and engineer better with the inherent flexibility of the Web – together.
for free. You
can too.