Painting With the Web

A presentation at SmashingConf Freiburg in September 2025 in Freiburg, Germany by Matthias Ott

Slide 1

Painting With the Web Matthias Ott Smashing Conference Freiburg 2025

Slide 2

Matthias Ott User Experience Designer Web Design Engineer Teacher for Interface Prototyping, Muthesius University of Fine Arts and Design @matthiasott@mastodon.social https://matthiasott.com

Slide 3

Own Your Web https://ownyourweb.site

Slide 4

Slide 5

Slide 6

The ultimate creative process. A constant conversation.

Slide 7

The Canvas

Slide 8

Photo: Brad Frost, 2012

Slide 9

Slide 10

viewports.fyi

Slide 11

Slide 12

Slide 13

https://alistapart.com/article/responsive-web-design/

Slide 14

We are still static painting pretty pictures of websites

Slide 15

We are still static painting pretty pictures of components websites

Slide 16

The Material

Slide 17

We have a broken relationship with the material

Slide 18

We are breaking the feedback loop

Slide 19

Slide 20

:has() Container Queries min(), max(), clamp() Custom Properties Intrinsic Sizing Keywords Trigonometric Functions Subgrid ViewTransitions Blend Modes Logical Properties CSS Filter Effects Popover API aspect-ratio :is() and :where() @property conic-gradient() Animation-start linear() Easing Function CSS Motion Path Anchor Positioning color() color-mix() Scroll Snap CSS Nesting light-dark() overscroll-behavior touch-action scroll-behavior scrollbar-gutter Variable Fonts font-palette text-wrap: balance

Slide 21

CSS is now CSS is now the most powerful the most powerful design tool design tool for the Web. for the Web.

Slide 22

What designers design What’s possible with the Web platform today

Slide 23

What designers design What’s possible with the Web platform today

Slide 24

“ 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” https://frankchimero.com/blog/2015/the-webs-grain/

Slide 25

The Web as a design material?

Slide 26

Tim Berners-Lee

Slide 27

Slide 28

Slide 29

<HTML> HTML

Slide 30

<HTML>

Slide 31

Tim Berners-Lee We should work toward a universal linked information system, in which generality and portability are more important than fancy graphics techniques and complex extra facilities. Information Management: A Proposal, 1989

Slide 32

Slide 33

Tim Berners-Lee

Slide 34

Tim Berners-Lee Håkon Wium Lie

Slide 35

https://www.w3.org/People/howcome/p/cascade.html

Slide 36

“Negotiating between the needs and wishes of readers and authors was one of the main ambitions of CSS. If successful, authors would get their fair share of influence over the presentation and would not feel compelled to use presentational HTML and other tricks. Readers, on the other hand, would be served documents in a form in which they could choose between accepting the author’s suggested presentation or specify their own.” Håkon Wium Lie Cascading Style Sheets (PhD Thesis) https://www.wiumlie.no/2006/phd/

Slide 37

h1.font.size = 24pt 100%

Slide 38

24pt 100%

Slide 39

User Author Font o——-x———————o Color o-x—————————o Margin o——————-x———o Volume o————-x—————o 64% 90% 37% 50%

Slide 40

Slide 41

Author control becomes shared author/user influence

Slide 42

The browser The user Web authors

Slide 43

“ 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 fine in any browser, past or future.” John Allsopp, “A Dao of Web Design” https://alistapart.com/article/dao/

Slide 44

Slide 45

Declarative Design Jeremy Keith Photo by Stefan Nitzsche

Slide 46

ARIA javascript() .css <html>

Slide 47

Typo graphy

Slide 48

font-family: Tausend, Helvetica, Arial, sans-serif;

Slide 49

Fluid Web Typography

Slide 50

Slide 51

font-size: clamp(1rem, 0.6522rem + 1.7391vw, 2rem); min preferred max

Slide 52

a a a a a a a a a a a a aa aaaaa 6 7 8 9 10 11 12 14 16 18 20 22 24 28 32 36 40 44 48 aaaaa 56 64 72 80 88 a 96

Slide 53

Octave a a a a a a a a a a a a aa aaaaa 6 7 8 9 10 11 12 14 16 18 20 22 24 28 32 ×2 ×2 36 40 44 48 ×2 aaaaa 56 64 72 80 88 a 96

Slide 54

Perfect Fifth a a a a a a a a a a a a aa aaaaa 6 7 8 9 10 11 12 14 16 18 20 22 24 28 32 × 1.5 × 1.5 × 1.5 × 1.5 36 40 44 × 1.5 48 aaaa 54 64 72 × 1.5 81 aa 88 96

Slide 55

Interpolation between two typographic scales by viewport width Source: Utopia.fyi

Slide 56

utopia.fyi

Slide 57

utopia.fyi

Slide 58

Interpolation between two typographic scales by viewport width

Slide 59

sin(x)

Slide 60

1 sin(x) 0 min max

Slide 61

sin(), cos(), tan(), asin(), acos(), atan(), and atan2() Baseline 2023 111 111 108 15.4

Slide 62

:root { —minWidth: 320; —maxWidth: 1600; —100vw: 100vw; —font-size-min: 1rem; —font-size-max: 1.5rem; /* Current viewport width in pixels without a unit / —currentWidth: tan(atan2(var(—100vw), 1px)); / This normalizes the value between 0 and 1 / —x: clamp(0, calc((var(—currentWidth) - var(—minWidth)) / (var(—maxWidth) - var(—minWidth))), 1); / Now we can put our x into the sine function / —easeOutSine: sin(var(—x) * pi) / 2); / And calculate our font-size */ —fluid-font-size: clamp(var(—font-size-min), var(—font-size-min) + ( var(—easeOutSine) * (var(—font-size-max) - var(—font-size-min)) ), var(—font-size-max)); }

Slide 63

Slide 64

Painting always has reality Portrait Painting always has reality Landscape

Slide 65

Painting always has reality vw vh sqrt(100vw * 100vh)

Slide 66

Painting always has reality vw vh

Slide 67

Slide 68

Slide 69

Color

Slide 70

rebeccapurple #E646AE rgb(230 70 174) rgba(0.6 153 153 / 0.9) hsl(233.16deg 100% 69.2%) hwb(35.05deg 36.4% 0%)

Slide 71

CIE 1931

Slide 72

CIE 1931 sRGB

Slide 73

CIE 1931 P3 sRGB

Slide 74

Slide 75

oklch

Slide 76

oklch(0.7 0.3357 340.8854) oklch(0.7 0.3357 340.8854 / 50%)

Slide 77

:root { —pink: rgb(255 26 211); } @supports (color: oklch(0.7 0.3357 340.8854)) { :root { —pink: oklch(0.7 0.3357 340.8854); } } .pool { —background-color: var(—pink); }

Slide 78

Slide 79

oklch.com

Slide 80

Slide 81

atmos.style https://huetone.ardov.me/

Slide 82

Relative Colors Baseline 2024 119 119 128 16.4

Slide 83

oklch(from var(—indigo) l c h); oklch(from var(—indigo) l c h / 50%);

Slide 84

—indigo: oklch(56.6% 0.27 274); —indigo-10: —indigo-20: —indigo-30: —indigo-40: —indigo-50: —indigo-60: —indigo-70: —indigo-80: —indigo-90: —indigo-100: oklch(from oklch(from oklch(from oklch(from oklch(from oklch(from oklch(from oklch(from oklch(from oklch(from var(—indigo) var(—indigo) var(—indigo) var(—indigo) var(—indigo) var(—indigo) var(—indigo) var(—indigo) var(—indigo) var(—indigo) 10% c h); 20% c h); 30% c h); 40% c h); 50% c h); 60% c h); 70% c h); 80% c h); 90% c h); 100% c h);

Slide 85

Slide 86

Slide 87

https://ericportis.com/posts/2024/okay-color-spaces/

Slide 88

https://ericportis.com/posts/2024/okay-color-spaces/

Slide 89

Layout

Slide 90

Tables with spacer GIFs Writing modes Transforms Locigal properties Alignment :has() Floats Flexbox Multi-column layout Aspect-ratio min(), max(), and clamp() Custom properties New sizing values CSS Grid Subgrid Clip-path Cascade layers Object-fit Container queries

Slide 91

CSS Grid

Slide 92

The majority of designers still has no idea of what’s possible with CSS Grid.

Slide 93

Slide 94

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Slide 95

Example: CSS Grid @jensimmons youtube.com/layoutland

Slide 96

https://labs.jensimmons.com/

Slide 97

https://labs.jensimmons.com/ Example: CSS Grid

Slide 98

https://codepen.io/matthiasott/pen/oNyqMgp

Slide 99

Slide 100

CSS Grid 99.63 % https://caniuse.com/css-grid

Slide 101

Subgrid

Slide 102

https://codepen.io/matthiasott/pen/JjqNPEN

Slide 103

Container Queries

Slide 104

https://codepen.io/matthiasott/pen/pomNgKJ

Slide 105

Accessibility Forms Interactivity Responsiveness Animation Performance

Slide 106

What is our toolset?

Slide 107

Use HTML and CSS much earlier in the process

Slide 108

Prototyping

Slide 109

high Fidelity low narrow Scope wide

Slide 110

Decide in the browser

Slide 111

Design Engineering

Slide 112

Design Engineering

Slide 113

Web Design Engineering

Slide 114

& Let devs design Let designers code

Slide 115

Let devs design & Let designers code

Slide 116

Slide 117

Slide 118

Slide 119

Thank you! Slides: https://noti.st/matthiasott/ZXgFeg ! ownyourweb.site ” Typefaces: Tausend by Christoph Koeberlin, NaN Tresor by Christoph Koeberlin, NaN Tragedy by Jean-Baptiste Morizot, Input Mono by David Jonathan Ross