The Web We Make →Matthias Ott Kirby Konf 2026

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

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

Anni Albers 1899–1994

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

Charles and Ray Eames

Prints & Photographs Division, Library of Congress

We are still making pretty static pictures of websites

We are still making pretty static pictures of components websites

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

We have a broken relationship with the material

We are breaking the feedback loop

: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

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

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

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

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

The Web as a design material?

ARIA javascript() .css <html>

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

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

Declarative Design Jeremy Keith Photo by Stefan Nitzsche

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

Typo graphy

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

Fluid Web Typography

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

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

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

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

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

utopia.fyi

utopia.fyi

Interpolation between two typographic scales by viewport width

sin(x)

1 sin(x) 0 min max

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

@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)); }

Painting always has reality Portrait Painting always has reality Landscape

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

Painting always has reality vw vh

Color

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%)

CIE 1931

CIE 1931 sRGB

CIE 1931 P3 sRGB

oklch

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

: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); }

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

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

—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);

Layout

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

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

Example: CSS Grid @jensimmons youtube.com/layoutland

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

Subgrid

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

Container Queries

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

Accessibility Forms Interactivity Responsiveness Animation Performance

What is our toolset?

Use HTML and CSS much earlier in the process

Prototyping

high Fidelity low narrow Scope wide

Decide in the browser

Design Engineering

Design Engineering

Web Design Engineering

Coding is solved!

Human in the loop

Does AI really make us faster and more productive?

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

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

Douglas Engelbart 1968

Can AI replace this task?

What should the machine make possible for the human?

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

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

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

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

Make the things you care about

We need more people who understand how the Web works.

COMING 2027

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