The Web We Make

A presentation at Kirby Konf 2026 in September 2026 in Mainz, Germany by Matthias Ott

Slide 1

The Web We Make →Matthias Ott Kirby Konf 2026

Slide 2

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

Slide 3

ow n e t i s . b e w r yo u

Slide 4

Slide 5

Slide 6

Anni Albers 1899–1994

Slide 7

Slide 8

Slide 9

Slide 10

Things take shape in material “ and in the process of working it, and no imagination is great enough to know before the works are done what they will be like.” Anni Albers, “One Aspect of Art Work” https://www.albersfoundation.org/alberses/teaching/anni-albers/one-aspect-of-art-work

Slide 11

Charles and Ray Eames

Slide 12

Prints & Photographs Division, Library of Congress

Slide 13

Slide 14

We are still making pretty static pictures of websites

Slide 15

We are still making pretty static pictures of components websites

Slide 16

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

Slide 17

Slide 18

Slide 19

We have a broken relationship with the material

Slide 20

We are breaking the feedback loop

Slide 21

: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 22

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

Slide 23

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

Slide 24

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

Slide 25

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

The Web as a design material?

Slide 27

ARIA javascript() .css <html>

Slide 28

Content URLs and links Fonts and Media Network The browser The screen The user’s context and preferences Time

Slide 29

Slide 30

CSS display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: clamp(1rem, 5cqi, 3rem);

Slide 31

Declarative Design Jeremy Keith Photo by Stefan Nitzsche

Slide 32

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

Typo graphy

Slide 34

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

Slide 35

Fluid Web Typography

Slide 36

Slide 37

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

Slide 38

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 39

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 40

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 41

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

Slide 42

utopia.fyi

Slide 43

utopia.fyi

Slide 44

Interpolation between two typographic scales by viewport width

Slide 45

sin(x)

Slide 46

1 sin(x) 0 min max

Slide 47

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

Slide 48

@property —100vw { syntax: “<length>”; initial-value: 0px; inherits: false; } :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 49

Slide 50

Painting always has reality Portrait Painting always has reality Landscape

Slide 51

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

Slide 52

Painting always has reality vw vh

Slide 53

Slide 54

Slide 55

Color

Slide 56

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 57

CIE 1931

Slide 58

CIE 1931 sRGB

Slide 59

CIE 1931 P3 sRGB

Slide 60

Slide 61

oklch

Slide 62

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

Slide 63

: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 64

Slide 65

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

Slide 66

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

Slide 67

—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 68

Slide 69

Layout

Slide 70

Tables with spacer GIFs Writing modes Locigal properties Transforms 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 71

Slide 72

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

Slide 73

Example: CSS Grid @jensimmons youtube.com/layoutland

Slide 74

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

Slide 75

Slide 76

Subgrid

Slide 77

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

Slide 78

Container Queries

Slide 79

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

Slide 80

Accessibility Forms Interactivity Responsiveness Animation Performance

Slide 81

What is our toolset?

Slide 82

Use HTML and CSS much earlier in the process

Slide 83

Prototyping

Slide 84

high Fidelity low narrow Scope wide

Slide 85

Decide in the browser

Slide 86

Design Engineering

Slide 87

Design Engineering

Slide 88

Web Design Engineering

Slide 89

Slide 90

Coding is solved!

Slide 91

Human in the loop

Slide 92

Slide 93

Does AI really make us faster and more productive?

Slide 94

Does AI Actually Boost Developer Productivity? (100k Devs Study) Yegor Denisov-Blanch, Stanford https://www.youtube.com/watch?v=tbDDYKRFjhk

Slide 95

How AI Impacts Skill Formation, Judy Hanwen Shen, Alex Tamkin (arXiv:2601.20245) https://www.anthropic.com/research/AI-assistance-coding-skills

Slide 96

Douglas Engelbart 1968

Slide 97

Slide 98

Slide 99

Can AI replace this task?

Slide 100

What should the machine make possible for the human?

Slide 101

“We can know more than we can tell.” Michael Polanyi The Tacit Dimension, 1966

Slide 102

Slide 103

Slide 104

What are we no longer doing because AI does it for us, and what happens to us when we stop doing it?

Slide 105

“ The human monitor has been given an impossible task” Ironies of Automation Lisanne Bainbridge 1983

Slide 106

Slide 107

When more of the process is automated, the parts that remain human become more important.

Slide 108

Make the things you care about

Slide 109

We need more people who understand how the Web works.

Slide 110

COMING 2027

Slide 111

Slide 112

Slide 113

Slide 114

Slide 115

Slide 116

Slide 117

Slide 118

Thank you! ! ” ownyourweb.site # matthiasott.com Typefaces: Tausend by Christoph Koeberlin, NaN Tresor by Christoph Koeberlin, NaN Tragedy by Jean-Baptiste Morizot, Input Mono by David Jonathan Ross