Forging Links – Web Design Engineering and CSS

Slide 1

→Matthias Ott @ CSS Café Forging Links

Slide 2

👋 Matthias Ott User Experience Designer Design Engineer @matthiasott@mastodon.social @m_ott@twitter.com https://matthiasott.com

Slide 3

We have a problem…

Slide 4

Websites with detectable WCAG 2 failures: 96.8 % The WebAIM Million Report 2022

Slide 5

Growth in mobile page weight over 10 years: 594 % Web Almanac 2022 State of the Web Report

Slide 6

Percentage of Consumers Happy Shopping Online 15 % Contentsquare 2022 Digital Experience Benchmark Report

Slide 7

☹

Slide 8

Slide 9

“ 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”

Slide 10

Frank Chimero The Web’s Grain https://archive.org/details/vimeo-122880890

Slide 11

Slide 12

“ 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”

Slide 13

Slide 14

We are still painting pretty pictures of websites.

Slide 15

Design Engineering

Slide 16

What we all are designing and building. What the Web platform is capable of today.

Slide 17

Learn and teach

Slide 18

Learn and teach 2. Collaboration

Slide 19

Slide 20

Learn and teach 2. Collaboration

Slide 21

Learn and teach 2. Collaboration 3. Design Systems

Slide 22

Design Design System Engineering

Slide 23

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

Slide 24

Prototyping

Slide 25

Anything can be a prototype. Sketches Paper prototypes Sticky notes Personas User Flows Experience Maps Wireframes Animations CodePens Storyboards …

Slide 26

Slide 27

https://www.loc.gov/exhibits/eames/images/vcf23a.jpg Prints & Photographs Division, Library of Congress

Slide 28

Slide 29

high Fidelity low narrow wide Scope

Slide 30

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

Slide 31

Slide 32

Design Engineering

Slide 33

Design Engineering

Slide 34

Design Engineering

Slide 35

Design Engineering Exploration Translation Contribution

Slide 36

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

Slide 37

Typography Layout

Slide 38

Typography Typography Typography Typography Typography

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

h1 { font-size: 3rem; } @media (min-width: 40em) { h1 { font-size: 5rem; } } @media (min-width: 60em) { h1 { font-size: 10rem; } }

Slide 53

Slide 54

fl https://www.smashingmagazine.com/2016/05/ uid-typography/

Slide 55

font-size: calc(16px + (24 - 16) * (100vw - 400px)/(800 - 400));

Slide 56

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

Slide 57

clamp(min, preferred, max)

Slide 58

font-size: clamp(3rem, calc(-3.1765rem + 20.5882vw), 10rem);

Slide 59

font-size: clamp(3rem, -3.1765rem + 20.5882vw, 10rem);

Slide 60

Slide 61

Slide 62

https://www.modularscale.com/

Slide 63

https://utopia.fyi/

Slide 64

Slide 65

https://utopia.fyi/

Slide 66

Slide 67

Slide 68

Slide 69

Layout

Slide 70

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