Five essential ingredients of a web that serves us all Hidde de Vries, Smashing Conf 9 September 2026 Slides on hidde.blog/slides

(here in personal capacity)

2004

2004

KILLBIE VOLUME 2

grand S ananur ag

T H I SI S FOR EVERYONE

What’s a web that serves us all?

We need it to be Sustainable

“Holding the increase in the global average temperature to well below 2°C” – Paris Agreement, 2.1.a (signed in 2016) https://eur-lex.europa.eu/legal-content/NL/TXT/?uri=CELEX:22016A1019(01)

ICT emissions > aviation emissions

“If the internet was a country it th would be the 13 largest emitter between Mexico and Brazil” – Sustainable Web Manifesto (based on CO2 emissions in Our World in Data vs IT emissions data from Green Web Foundation)

Middenmeer, the Netherlands 110 hectare / 271 acres

International Energy Agency,

International Energy Agency,

the web has a footprint, that we can reduce at work

t af Dr Web Sustainability Guidelines

t af Dr 6 principles 71 guidelines 196 success criteria 100+ contributors

User Experience Design Hosting, Infrastructure & Systems Web Development Business Strategy & Product Management

A Dutch City Total page size: 1,2 MB

A Dutch City Hero image: 367 KB (32%)

41KB

13.2MB and yes, I accepted cookies, so the number includes ads

website size is a choice

websitecarbon.com

thegreenwebfoundation.org

training.linuxfoundation.org/training/green-software-for-practitioners-lfc131

We need it to be Ethical

bbc.com/news/technology-56135817

“people in the Web development community [should] be ethically and morally aware of what they [are] doing” – Sir Tim Berners-Lee, in: Weaving the Web (1999)

w3.org/TR/ethical-web-principles

npm install ethics

npm install ethics

Ethics ? t c a o how t what to do?

Ethics what matters? ? s e u l a v e c n a l a b o t w ho

Ethical principles can be derived from universal human rights

As Ioana mentioned…

Ethical principles Respect for human dignity Explicability Harm prevention Fairness From fundamental rights ( EU Treaty, Charter of Fundamental Rights) to ethical principles. From: Ethics Guidelines for Trustworthy AI, door de High-Level Expert Group on Artificial Intelligence (2019).

We l c o m e t o IKEA Chat! We use Al technology to assist you with helpful information. These chats may be reviewed by both our team and Al technology to improve your support me, Vissle dark NEIDEN Bed frame, pine, 140x200 cm €59.99 ***1 MALM Bed frame, high, w 2 store white, 140x200 cm €209. (28) More options 2 slatted bed base types

* * *

experience. Please only provide t h e details n e c e s s a r y for your r e q u e s t . For m o r e information, r e a d o u r privacy statement. Please share your feedback after the chat experience to help us improve our chat services. (77) More options 3 sizes, 4 colours, 4 slatt base types _ Compare • Compare Top seller Top sell er S t a r tc h a t

Ethical principles Respect for human dignity Explicability Harm prevention Fairness From fundamental rights ( EU Treaty, Charter of Fundamental Rights) to ethical principles. From: Ethics Guidelines for Trustworthy AI, door de High-Level Expert Group on Artificial Intelligence (2019).

Welcome t o IKEA Chat! We use Al technology to assist you with helpful information. These chats may be reviewed by both our t e a m a n d Al technology t o improve your support I bed frame, Vissle dark 10 cm (18). Nel frame, pnie, 140x200mc €59.99 * * *1 experience. Please only provide t h e details necessary for MALM Bed frame, high, w 2 stor. y o u r request. For m o r e information, read o u r privacy white, 140x200 cm statement. Please share your feedback after the chat €209. ⾷（ 28） experience to help us improve our chat services. (77) 凸 More options 2 slatted bed base types More options 3 sizes, 4 colours, 4 slatt bas e types e • Compare To p s e ll e r _ Compare Top seller S t a r tc h a t

From: Guidelines on the implementation of the transparency obligations for certain AI systems under Article 50 of the AI Act (European Commission, 20/7/2026

Ethical principles Respect for human dignity Explicability Harm prevention Fairness From fundamental rights ( EU Treaty, Charter of Fundamental Rights) to ethical principles. From: Ethics Guidelines for Trustworthy AI, door de High-Level Expert Group on Artificial Intelligence (2019).

The web can be used to cause harm

opendemocracy.net/ai-chatbots-anti-abortion-investigation-chatgpt-gemini-claude…

The web can be used to discriminate

⼜ www.google.com/search?q=i+am+alone+with+a+brit&sca_es D Bookmarks G o o g le i a m alone with a brit Al Mode All Videos Images Short videos Forums News More ~ To o l s + Al Overview Offer them a cup of tea right now and say something about the weather to break the ice safely. This phrase is a famous reference to a viral internet discussion about artificial intelligence safety warnings. If you are actually sitting next to a British person, here is how you can

⼜ ⼜ www.google.com/search?q=i+am+alone+with+a+brit&sca_es L Bookma rks Google Al M o d e All i’m alone with an Indian Short v i d e o s Images News Videos Forums More ~ To o l s A l Overview If you feel unsafe or uncomfortable, leave the area right away or call emergency services. Being of any specific nationality does not change basic safety rules. Trust gut feelings and protect yourself.

The web is full of inexplicable content

✔ Do not not collect all my data

“Ethics aside…”

“Ethics aside…”

????

We need it to be Accessible

Still lots of inaccessibility

Websites with sticky elements that cover everything when zoomed aren’t accessible codepen.io/hidde/pen/PovjPYV

Websites with FAQs that aren’t reachable by just a keyboard aren’t accessible codepen.io/hidde/pen/ExzXVmb

Websites with important election results in an image with no alternatives aren’t accessible

// features that do some accessibility // semantics for you, like popover I am popover content <button popovertarget=”p”> Open popover </button> <div popover id=”p”> I am popover content </div>

// features that do some accessibility // semantics for you, like popover <button popovertarget=”p”> Open popover </button> <div popover id=”p”> I am popover content </div>

Chromium Blog, Updates to form controls and focus blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

Chromium Blog, Updates to form controls and focus blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

Contrast warnings in Gutenberg, for WordPress Checks in Editoria11y v2, for Drupal (Based on Sa11y)

Web Platform features Browsers CMSes us

Assume less

w3.org/WAI/people-use-web

Ac UX c e s s by M R i ichele e s b l e A.W e a illiam r s, Ph c h D

We need it to be Fun

Photo: Marc Thiele

巳 Hallo, waar ben je naar op zoek? NIEUW & TRENDING MERKEN PARFUM MAKE-UP GEZICHT LICHAAM HAAR GEZONDHEID LIFESTYLE COLLECTION ARMANI beauty homepage / Parfum / Damesparfum / Damesgeuren / Armani Stronger With You Pc > NIEUW S T R O N G E R WITH Y O U P O W E R O F YOU Eau de parfum 3 0 ml ***** 4.3(81) €71,89 Spaar 71 Beauty Points @50 ml Spaar 80 Beauty Points 9 0 ml POWER O F YOU EMPORION ARMANI BESTE PRIJS Spaar 105 Beauty Points • Online: Op voorraad 6 0 G r a t i s verzending. Nu besteld, za, 18.04.2026 in huis. Adviesprijs* €101,00 €80,80 Dit is 20% lager dan de adviesprijs Adviesprijs* €132,00 € 105,60 Dit is 20% lager dan de adviesprijs

$ - US (EN) ~ Store Locator Customer S e r v i c e C h a t With

• Loyaytl. Us BESTSELLERS MAKEUP FRAGRANCES SKINCARE GIFTS &SETS SERVICES EXCLUSIVE OFFERS N y cart (0) f & Search… LOYALTY Home › Fragrances › Men’s Cologne > Stronger With You > Stronger With You Powerfully Eau De Parfum STRONGER WITH YOU NEW POWERFULLY EAU DE PA R F U M $105.00 A warm and spicy fragrance for men
• • • • • 18(1099) Write aroveiw Average rating includes incentivized reviews 1.7 oz. / 50 mL $105.00 3.4 oz. / 100 mL $130.00 Complimentary 3-piece gift on orders $150+ S T R O N G E RW I T H Y O U • One-time purchase O Save 10% +Free Shipping ® N e v e r r u n o u t o f y o u r favorite products.

Zoek in d e webshop… MERKEN ‹ PARFUM HUIDVERZORGING MAKE-UP TREATMENT BOEKEN NIEUW SETS PROMOTIES SALE Armani ARMANI nieuw ARMANI ⼤青⼤⼤1 Stronger With You Powerfully - Eau de Parfum 5 reviews Aanbevolen verkoopprijs fabrikant €103,00 50 ml +5 voorradig €65,67 Aanbevolen verkoopprijs fabrikant € 135,00 100 m l STRONGER WITH YOU €89,97 +5 voorr adig POWERFULLY V Favoriet C In winkelmandje EMPORIONE ARMANI 4,9/5 uit 19.000+ klantbeoordelingen

20 Z o e ke e np r o d u c to fmerk… Inloggen Moederdag Home › Merken Parfum › Parfum Gezicht Herengeuren › Geuren › Make-Up Haar Home Lichaam Promoties S u n & Tan SALE Nieuw Wi s h l i s t Mandje More Beauty EAU DE TOILETTE MANNEN Armani Stronger Wi t h You Kies je formaat: 100 M L V O p voorraad Eau d e t o i l e t t e m a n n e n

• • • • • 5.0 Bekijk 10 reviews | 18 Beauty Member 50 M L 3 0 ML Punetn ® €72,80 €91,00 * €61,60 €77,00* 150 M L €129,60 €162,00 * € 81,25 DEAL *Aanbevolen verkoopprijs fabrikant €125,00 I N WINKELMAND I A u s v i n e c o n k r i e I 100 ML €81,25 €125,00 *

squoosh.app

wakamaifondue.com

You may have fun on the web

We need it to be Ours

Too much of the web belongs to corporations

⼜ → ■ Bookmar ks XA • https://www.youtube.com G 䒑 ★ 之 Yo u T u b e Premium NL Alles Muziek Zoeken Ni eu ws Mixen

• Hiphop Sketchcomedy Rappen For y o u ~ Kookprogramma’s Home NOS laatstenieuws Your story jayahadadream aliwoodsgigs o (l) Made with Edil Shorts Einde Orbán-tijdperk, winst Magyar, en nu? Abonnement.. 四 四⼜ n i c u w e Einde Orbán-tijdperk, winst Magyar, en e n teruggenomen NOS 0:50 1:19 Magyar geeft overwinningsspeech, Orbán n u ? | RTL Nieuws erkent nederlaag RTL Nieuws 0 NOS O 7K weergaven • 2 uur geleden 4,5K weergaven • 1 uur geleden Follow ’ We h e b b e n o n s land bevrijd 3:02 Jij burgemeestero nubya_garcia T h o mYo r k e You can join literally thousands

Can I use the C-word?

401(K) 2012 on flickr

“[capitalism] is the only system consonant with man’s rational nature,” — Ayn Rand

“[capitalism] is the only system consonant with man’s rational nature,” — Ayn Rand “technological progress therefore leads to material abundance for everyone” — Marc Andreessen

“[capitalism] is the only system consonant with man’s rational nature,” — Ayn Rand “Leave the EU to “liberate” the economy” — James Dyson “technological progress therefore leads to material abundance for everyone” — Marc Andreessen

“Touch grass!” — Fitaly Vriedman

400 300 Invention of algorithmic timelines 200 100 0 How reasonable human beings are, over time

polarisation

“While the Myanmar military was committing crimes against humanity against the Rohingya, Meta was profiting from the echo chamber of hatred created by its hate-spiralling algorithms.” — Agnès Callamard, Amnesty International Secretary General

They decide the features

I like to link places

i n Search Hidde d e Vr i e s + Post t o Anyone Smashing Conference is gonna be great! Join us H i d d ed eVr i e so W e bstandards+ t e c hethics specialist / W3C Advisory Boar. Rotterdam, South Holland L o g iu s P r o fi l e v i e w e r s P o s t impressions 3 5 3,23

i n Search Hidde d e Vr i e s + Post t o Anyone Smashing Conference is gonna be great! Join us H i d d ed eVr i e so W e bstandards+ t e c hethics specialist / W3C Advisory Boar. Rotterdam, South Holland L o g iu s P r o fi l e v i e w e r s P o s t impressions 3 5 3,23 (https://Inkd.in/ewnG2-ua)

D +→ C • ⽬ 8 https://www.rfc-editor.org/rfc/rfc1866#section-7 120% Bookmark s [RFC Homel [TEXT|PDF|HTML] [Tracker] [IPR] [Erratal [Info pagel HISTORIC Obsoleted b y : 2854 Errata Exist Network Working Group T . Berners-Lee Category: Standards Track D . Connolly November 1995 MIT/W3C R e q u e s t f o r Comments: 1866 Hypertext Markup Language - 2 . 0 S t a t u s o f t h i s Memo This document specifies an Internet standards track protocol f o r the I n t e r n e t community, a n d r e q u e s t s d i s c u s s i o n a n d s u g g e s t i o n s f o r improvements. P l e a s e r e f e r t o t h e c u r r e n t e d i t i o n o f t h e ” I n t e r n e t O f fi c i a l P r o t o c o l S t a n d a r d s ” (STD 1 ) f o r t h e s t a n d a r d i z a t i o n s t a t e and status of t h i s protocol. Distribution of this memo i s unlimited. Abstract The H y p e r t e x t Markup Language (HTML) i s a s i m p l e markup language used t o c r e a t e h y p e r t e x t d o c u m e n t s t h a t a r e p l a t f o r m i n d e p e n d e n t . HTML d a c u m a n t aa n a C A M I d a c u m a n ta w i t hc a n a r i cc o m a n t i c at h a ta r o ⼭ ⼭

⽬ • & https://www.rfc-editor.org/rfc/rfc1866#section-7 1 2 0 %남 다 0 Bookmarks [RFC Homel [TEXT|PDF|HTML] [Tracker] [IPR] [ E r r a t a l [Info pagel HISTORIC O b s o l e t e d b y : 2854 Errata Exist N e t w o r k Wo r k i n g G r o u p R e q u e s t f o r Comments: 1866 C a t e g o r y : S t a n d a r d s Track T . Berners-Lee MIT/W3C D . Conno lly November 1995 7 . Hyperlinks I n addition to general purpose elements such a s paragraphs and lists, hyperlinks. An HTML u s e r a g e n t a l l o w s t h e HTML d o c u m e n t s c a n e x p r e s s user to navigate these hyperlinks. improvements. Please refer to the current edition of the “Internet O f fi c i a l P r o t o c o l S t a n d a r d s ” (STD 1 ) f o r t h e s t a n d a r d i z a t i o n s t a t e and status of t h i s protocol. Distribution of this memo i s unlimited. Abstract The Hypertext Markup Language (HTML) i s a s i m p l e markup language u s e d t o c r e a t e h y p e r t e x t documents t h a t a r e p l a t f o r m i n d e p e n d e n t . HTML d a c u m a n t aa n a C A M I d a c u m a n ta w i t hc a n a r i cc o m a n t i c at h a ta r o ⼭

+→ C D • & https://www.rfc-editor.org/rfc/rfc1866#section-7 ⽬ 1 20% 出 你 0т ⼭ • Bookmarks [RFC Homel [TEXT|PDF|HTML] [Tracker] [IPR] [ E r r a t a l [Info pagel Obse a c h o Netv f t h e f o l l o w i n a m a r k u p c o n s t r u c t s i n d i c a t e s t h e t a l l a n c h o r o t a hyperlink o r s e t o f hyperlinks:

• <A> elements with HREF present. * <LINK> e l e m e n t s . Stai
• <IMG> e l e m e n t s .
• <INPUT> e l e m e n t s w i t h t h e SRC a t t r i b u t e p r e s e n t . * <ISINDEX> e l e m e n t s . Abs1
• <FORM> elements with M ’ ETHOD=GET.’

The Hypertext Markup Language (HTML) i s a s i m p l e markup language used t o c r e a t e h y p e r t e x t d o c u m e n t s t h a t a r e p l a t f o r m i n d e p e n d e n t . HTML d o c u m a n t ew i t h m a n a r i cc o m a n t i c a ⼭

@robertglasper Robert Glasper TICKETS Robert Glasper on His 16th Grammy Nomination, Trusting the Universe and Growing Up with Norah… Limited Edition Colored Vinyl Rhythm Roulette: Robert Glasper & Riley Glasper | M a s s Appeal Vi e w o n m o b i l e

They give in r e d l o h e r a h s value because 31 August 2026

They spy

vk.nl

vk.nl

github.blog/news-insights/company-news/no-cookie-for-you

They can force their values

More lobby than energy + pharma combined Money spent yearly on Brussels lobby in euros. Source: The EU’s Lobby League Table (Corporate Europe)

Ti m Cook Satya Nadella Apple The President Microsoft| Jeff B e z o s Amazon

Satya Nadella The President Microsoft Jeff B e z o s Amazon

“It’s incredible to be among everyone here, particularly you and the first lady.

Satya Nadella The President Microsoft Jeff B e z o s Amazon

a Ladella The President osoft Jeff Bezos Amazon

They remove the incentive to have your own websites

100% 75% 50% 25% 0% People who have something y a s o t g in t s e r e t in

100% 75% 50% 25% 0% People who know how to post content on their own site

We need easier ways to publish on the web

Publish on your own site first

Vi r t u o u s Circ le I write a I link to great blog great others decide t o blog blogs People link t o m y blog People read my log!

hidde.blog

Prioritise the fediverse

Prioritise the fediverse and the ATmosphere

What’s a web that serves us all?

We must make and keep the web Sustainable Ethical Accessible Fun Ours

Slides on hidde.blog/slides Thank you! Fonts: Bild and Bungee by David Jonathan Ross. Inspiration: Emily Bender, Karen Hao, Timnit Gebru, Tim Berners-Lee, Bruce Lawson.