→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.

  1. Learn and teach

  1. Learn and teach 2. Collaboration

  1. Learn and teach 2. Collaboration

  1. Learn and teach 2. Collaboration 3. Design Systems

Design Design System Engineering

  1. Learn and teach 2. Collaboration 3. Design Systems 4. Prototyping

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

  1. Learn and teach 2. Collaboration 3. Design Systems 4. Prototyping

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 👈