Painting Painting With With the theWeb Web →Matthias Ott Beyond Tellerrand Düsseldorf 2025

! 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

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

The ultimate creative process. A constant conversation.

The Canvas

Photo: Brad Frost, 2012

viewports.fyi

We are still static painting pretty pictures of websites

We are still static painting pretty pictures of components websites

The Material

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 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?

Tim Berners-Lee

<HTML> HTML

<HTML>

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

Tim Berners-Lee

Tim Berners-Lee Håkon Wium Lie

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

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

h1.font.size = 24pt 100%

24pt 100%

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

Author control becomes shared author/user influence

head.space.above = 15pt list.space.left = 1cm list.space.first = 1cm

straying from the 4pt default above # extra indentation for all lists

window-wide settings AGE > 3d ? window.background = pale_yellow : window.background = white window.foreground = black window.width = 400px window.height = REAL_HEIGHT - 50px window.margin.left = 2cm window.margin.right = 2cm window.margin.above = 2cm

head.space.above = 15pt list.space.left = 1cm list.space.first = 1cm

straying from the 4pt default above # extra indentation for all lists

window-wide settings AGE > 3d ? window.background = pale_yellow : window.background = white window.foreground = black window.width = 400px window.height = REAL_HEIGHT - 50px window.margin.left = 2cm window.margin.right = 2cm window.margin.above = 2cm

The browser The user Web authors

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

Declarative Design Jeremy Keith Photo by Stefan Nitzsche

ARIA javascript() .css <html>

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

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

oklch.com

huetone.ardov.me

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

Relative Colors Baseline 2024 119 119 128 16.4

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

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

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

Layout

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

CSS Grid

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

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

Example: CSS Grid @jensimmons youtube.com/layoutland

https://labs.jensimmons.com/

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

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

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

Subgrid

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

Container Queries

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

Container Queries (Size) Baseline 2023 106 106 100 16

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

Let devs design

& Let devs design

& Let devs design Let designers code

Let devs design & Let designers code

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