Website Fabulations

This workshop was part of the Hacker & desiner summercamp 2024, communication about this workshop can be found on their website.

Ideas

Inspired by the notion of tactical design, we remix the web as a user-hacker, questionning our agency as individuals and collectivities on the web through story telling, commenting, critiquing, improving accessibilities, transforming websites into a poetic medium. It is an invitation to create cross-websites fictions applying new cascading stylesheets (CSS) simultaneously to every websites at once, or crafting your very own intimate browser extension.

User-customisation for web pages used to be part of collective spaces on the web (geocities, myspace, tumblr and handmade webpages and webrings) and is now homogenised and blocked off by corporations in the era of instagram, twitter and tiktok. An interesting approach persists: browser extensions that insert themselves in between the imposed design and its reception, allowing live modifications. But what does it say on a politcal level to fork from the mainstream usages, creating our own alternative bubble?

We will be working with scratch (named both after the practice of DJ scratching, and scratching the surface to reach the code of the webpage), a browser extension crafted for Declarations (a research on the materility of the CSS web-language). Scratch allows to append an etherpad as a CSS stylesheet on one or multiple websites. Those changes can be viewed by the users of the extension and if you have the extension installed, you can also edit the css on the pad. We'll create website fabulations that could be: a web where you see only one DOM element at time, a web where every interaction makes sounds, a web where the weather influences its looks, a web that scrolls in other directions than top to bottom, a web where images are all in one spot, etc.

When facing the task to redesign the web in a small group, we quickly realize that the challenge is more about ourselves as individuals than about code and programming. Creating an extension used by a group of lets say 10 persons is a bit like a co-housing situation. To handle our common space we need some rules, we need to learn about each others, I can't repaint the wall in pink and decide to sleep in the kitchen just because i want to.

We will be working with scratch, a browser extension crafted for Declarations.

Protocol

materials

• 1 computer per group is needed, however as 5 lines of CSS can remove all images or changes the interactions of the whole web,
• conversations are prioritized over writting intricate code on our screens.
• every groups need to pick a small space where they will discuss,
• as well a a common space to meet all together and share what we did.
• Paper and pens for the memory sharing moment

participants

• Some participants need to be able to write CSS, others just need the excitement about learning CSS. Every group can be between 4 and 6 persons.
• Young participants are more than welcome to join a group. The discussions of memory and fable on the web is meant to be nourrished by different generational experiences and usages! They can also declare their wishes for another type of web and together the groups will handle possible translations.

calendar

day 1

• introduction to the concept and tools
• exercice from past to present Individual drawing: what is you first encounter with a website, how was the website? try to draw it, describe it from memory, using adjectives and feelings. What did you liked about it, what scared you, what was surprising?
• exercice echoes of fabulations
  1. sit in a circle, everyone with their back facing the center
  2. we close our eyes
  3. we take turn to say a sentance that begins like "what if the web was ..."
     • it is impoant to not think too much about it
     • if you don't know what to say just think of someone you like, or a place you like, or an animal you like, and put an adjective that fits them
     • if you like something that one person said try to think of a similar idea and say it when it is your turn
  4. after 12 minutes we stop
• installing the extension, and free writing moment
• based on this sharing we make groups ( we also take in consideration the variety CSS-coding-knowledge, uses of the web and ages).

day 2

• creating extensions

Here is an incomplete list of fabulations that where explored at the summercamp

• 🌐 distant: shrinking relatively to server distance
• 🌸 mindfull: bluring if moving too fast, flowers grows as time passes
• 🎲 unordered: unordered list properly unordered (mess, dancing, randomised)
• 🪞 fractured: every link divide the page in two (previous, current) recursively, showing every timeline at once
• 😼 cat: a cat tries to reach your cursor, if it does it crash
• 🦷 biting: on each page one link is trapped, clicking it make the website bite you (and close the tab)
• 💭 remembered: websites disapears as they are visited but you get the contact of someone that was there
• ⏳ aging: websites rots, or ages, according to domain name registration date
• 🍪 bloated: when eating too much cookies your should wait to digest them
• 💡 shadow: only text-shadow and box-shadow, slightly moving with your light