Tech is Always Political User Unfriendly

slides.oddbird.net/unfriendly/cmd/

Miriam Suzanne @ Only Unofficial Pre-CSS Day Afternoon Event

June 4, 2025

The Scream painting by Edvard Munch, man on a bridge with hands to his face screaming in colorful expressionist twisted style - behind him a couple walking, and boats in the distance.

AI Slop Is a Brute Force Attack on the Algorithms That Control Reality from 404 Media

How Big Tech hides its outsourced African workforce

ICE Taps into Nationwide AI-Enabled Camera Network, Data Shows from 404 Media

Do Trans, Be Crimes

It’s very hard to think or act when you can’t tell if you’re about to lose your job, have your research killed off, have your healthcare terminated, witness unstoppable crimes, or just experience extended and apparently unescapable moral injury.

– Erin Kissane, Against Entropy

Gallery of pottery photos - some stacked shallow dishes, a trinket tray with off-kilter black-and white zig-zags, and a torn-edge red and black rim, a red-clay cortado mug with deep texture and an icy glazed rim, a bent-cone flower pot that sits in the neck of a dress form, giving it a head, a classical-shaped vase in splattered colors, a black clay mug with red arrows, two large bowls with galaxy blue glaze, a shelf of unfinished mugs and coffee power-overs and tea cups, a torn-edge tissue box cover in progress, and three large bowls behind two torn-edge platters all drying on a table.

Product label for Cascade, with sheeting action for virtually spotless dishes - subtitled 'Use the Cascade'

The ‘C’ in…

Cascading HTML style sheets -- a proposal, Håkon W Lie, 10 Oct 1994

The first world wide website in the WWW Hypermedia Browser/Editor, on the neXt desktop -- an exercise in global availability

The second browser, a text-only terminal with numbered links for keyboard control

Web for all. Web on everything.

– W3C Mission Statement

A zillion different devices of all sizes (original)

Google Home, Amazon Echo, and Apple HomePod

It is required that HTML be a common language between all platforms…

– WWW Project, HTML constraints

…This implies no device-specific markup, or anything which requires control over fonts or colors.

– WWW Project, HTML constraints

Sir Tim at a computer showing a badly photoshopped image of the previous slide

Web Design Will Never Happen

Technology Is Political

The problem is Authors Having Control

InDesign book-cover layout
for Riding SideSaddle,
my novel in a box

Same photo,
but with a badly overlaid cursor pointer
and three big scribbled red question marks

The fact we can control a paper page is really a limitation of that medium.

– John Allsopp, A Dao of Web Design

Web Styles Must Be Contextual

`@media` `min-width`

`@media` `hover`

`@supports` `container-type: inline-size`

We're Not Alone (in big block letters, in space)

`@media` `prefers-reduced-motion`

Same We're Not Alone, with browser logos on top

h1, h2, h3, h4 /* etc */ {
  font-weight: bold;
  font-size: something big I dunno; }
p { margin-block: 1em; }
a:link {
  color: blue;
  text-decoration: underline; }

Same We're Not Alone, with browser logos and a guy in construction clothes carrying a laptop

Same We're Not Alone, with browser logos, a guy in construction clothes carrying a laptop, and ET

Language and appearance preferences in Firefox include light/dark mode, colors, fonts, and zoom level

Early web… All Styles are Universal

The same on every website

Controlled by… User Preferences
& Browser Choice

We are all Web Users First

To understand CSS… Set Your Preferences

The web would have become a giant fax machine where pictures of text would be passed along.

– Håkon Lie, 2014 interview

… provide publishers with stylistic influence…

– Håkon Lie

… user should have the last word…

– Håkon Lie

… provides author and reader with the same notation for specifying style …

– Håkon Lie

Safari settings panel, advanced tab, with a red scribble highlighting a style sheet option, with none selected by default.

CSS Declarations

/* property: value; */
color: blue;

CSS Selectors

p {
  background: white;
  color: mediumVioletRed;
}

<link rel="stylesheet" href="styles.css">

An ordered list (cascade) of style sheets.

– Håkon Lie

💥🙈⁉️💥

<button style="color: teal" type="submit">…</button>

button { color: violet; }
[type=submit] { color: vibrant; }

On every html element
For every css property
We need exactly one value

Tina Turner as Aunty Entity in the Mad Max Thunderdome, with the law 'Two styles enter, one style leaves' in bold text

Cascade 🗺 Origins

🖥 User Agent (Browser) Defaults
👥 User Preferences

Cascade 🗺 Origins

🖥 User Agent Defaults
👥 User Preferences
🎨 Author Styles

Darth Vader choking a rebel soldier as storm troopers watch

If conflicts arise the user should have the last word…

– Håkon Lie

Kylo Ren and Rey standing in front of an entire star war with spaceships and lasers and AT-AT walkers

Why we have… ❗importance

🖥 User Agent Defaults
👥 User Preferences
🎨 Author Styles
❗🎨 Author Important
❗👥 User Important
❗🖥 User Agent Important

Searching firefox user agent styles for important with 26 results, three visible setting area display none and fullscreen iframes border none, parring unset

In the font preferences dialogue, a default-checked option: Allow pages to choose their own fonts, instead of your selections above

The purpose of… ❗importance

Authors 👎🏼 Override Styles

We probably wrote ourselves

Users 👍🏼 Protect Styles

From future origins

Often Isolated

…
…
🎨 Author Styles
❗🎨 Author Important
❗…
❗…

Developed Mosaic With Government Funding

Developed Mosaic At a University

The internal codename for the company’s browser was Mozilla, which stood for “Mosaic killer”… On August 9, 1995, Netscape made an extremely successful IPO.

– Wikipedia

<CENTER>This text is centered</CENTER>

<MULTICOL COLS="3" GUTTER="25">
  <P><FONT SIZE="4" COLOR="RED">…</FONT></P>
</MULTICOL>

Bootstrapping vs Plug-and-play

What is Friendly To a User?

Black and white youtube still of a man with text superimposed

Bootstrapping Augmenting Human Intellect

Providing the means for users to create better tools.

Any barrier that exists between the user and some part of the system will eventually be a barrier to creative expression.

– “Design Principles Behind Smalltalk” (Byte 1981)

“Open” or “Adaptable”

Plug-and-play It Just Works

“Intuitive” or “Invisible”

Easy for Who? To do What?

Sara Wachter-Boettcher

Technically Wrong

Who defines the “default”?

It is something of an amusing curiosity that some AI models were perplexed by a giraffe without spots. But it’s these same tools and paradigms that enshrine normativity of all kinds, “sanding away the unusual.”

– Ben Myers, I’m a Spotless Giraffe

Girl with a 'skin color' bandaid significantly lighter than her skin

Are you a man or a woman? man, woman, other

First Name / Last Name?

and that name never changes…

Old facebook dropdown for Gender
has 58 options to choose from

Under an increasing pressure to monetize the data they store, Facebook looks for ways to limit difference across the site.

– Ben Grosser, How the Technological Design of Facebook Homogenizes Identity and Limits Personal Representation

Make things easy With Machine Learning

Facebook Shows Bereaved Parents Their Year in Review

Twitter Apologizes for 'racist' image-cropping algorithm.
Users highlight examples of feature automatically focusing on
white faces over Black ones

The easiest fix for that biased cropping AI? No it’s not to build another AI - it’s to give people the power to select crop boundaries when posting a photo.

– Amy X Zhang, Sep 19, 2020

Users spend most of their time on other sites. This means that users prefer your website to work the same way as all the other sites they already know.

– Jakob Nielsen

Nils presenting one of the two websites
with a centered wrapper and white space on both sides

A young man collapsed on the ground,
clasping his sister's hand

Anne Bogart

A Director Prepares

You cannot create results.
You can only create conditions
in which something might happen.

…in which there is room for the audience to move around, imagine, and make associations.

– Anne Bogart

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

Not ease But Agency

Not ease But Access & Control

Users are all different

experiences, skills, limitations, goals

Design for Edge A Range Cases

Design for Stress Cases

Adapt to User Needs & Preferences

Do Trans, Be Crimes

The ‘C’ in…

Web Design Will Never Happen

Technology Is Political

The problem is Authors Having Control

Web Styles Must Be Contextual

@media min-width

@media hover

@supports container-type: inline-size

@media prefers-reduced-motion

Early web… All Styles are Universal

Controlled by… User Preferences & Browser Choice

We are all Web Users First

To understand CSS… Set Your Preferences

CSS Declarations

CSS Selectors

💥🙈⁉️💥

On every html element For every css property We need exactly one value

Cascade 🗺 Origins

Cascade 🗺 Origins

Why we have… ❗importance

The purpose of… ❗importance

Authors 👎🏼 Override Styles

Users 👍🏼 Protect Styles

Often Isolated

Developed Mosaic With Government Funding

Developed Mosaic At a University

Bootstrapping vs Plug-and-play

What is Friendly To a User?

Bootstrapping Augmenting Human Intellect

“Open” or “Adaptable”

Plug-and-play It Just Works

“Intuitive” or “Invisible”

Easy for Who? To do What?

Sara Wachter-Boettcher

Who defines the “default”?

First Name / Last Name?

Make things easy With Machine Learning

Anne Bogart

Not ease But Agency

Not ease But Access & Control

Users are all different

Design for Edge A Range Cases

Design for Stress Cases

Adapt to User Needs & Preferences

Please Just Let Me Think

Keep making Web Art

`@media` `min-width`

`@media` `hover`

`@supports` `container-type: inline-size`

`@media` `prefers-reduced-motion`

Controlled by… User Preferences
& Browser Choice

On every html element
For every css property
We need exactly one value