A presentation at Kirby Konf 2026 in in Mainz, Germany by Matthias Ott
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
We are all makers. Making is how we learn and grow. You shape a thing, and it reacts, it pushes back, and that’s how you find out what it’s made of. Nowhere is this more true than on the Web. You only learn how to design and build for this fluid, unpredictable, edgeless medium by making things with it. You write a line of CSS, the material answers – immediately, honestly, in the browser – and you know something you didn’t know a minute ago. Do that for years and you have judgment: you can tell whether something merely works or is actually good.
Now we’re told that coding is solved and that the models can design. That we’re the human in the loop now. But what does our work become when we stop touching it? What does the Web we make become? And what do we become?
for free. You
can too.