Ich sehe was, was du nicht siehst *

“Ich sehe was, was du nicht siehst” (eng.: “I spy with my little eye” or literally translated “I see what you don’t see”) is a guessing game where one player chooses an object within sight and announces to the other players that “I spy with my little eye something beginning with...“, naming the first letter, the color or a different attribute of the object. Other players attempt to guess this object.

The Personalized Web

Coding Workshop, HFBK Hamburg, Mai 2023

Personalize this workshop:

I know basic:
Color:
Font:
Border:
About

We can visit the same website but see different things. Through personalization, individualization and customization your web-experience becomes as unique as your fingerprint. Websites constantly change their shape depending on the user: The layout transforms responsively when you open it on the phone, personal preferences are manifested in the light or dark mode, location-tracking and as user profiling tailors our feeds as well as the ads in it.

Filter bubbles, opaque feed algorithms and privacy concerns are one aspect of personalization on the Internet. Furthermore, what does personalization mean from a design and development point of view? What challenges does the responsive nature of the web pose for its design? How can the user’s influence on a website be made visible? Customization or personalization—what agency do we give the user?

We want to explore how we can design and develop websites that adapt to the user. What data can you collect from users to make a website more personal—and should you? Interactive user experiences allow for personal styles, conditional availabilities and different levels of authorship. The user can rewrite the narration depending on the links they click. Design variables can be made dependent on the user’s data, whether it is the mouse position or the time of day. We can even delegated our design decisions through customization options.

The workshop consists of an introduction to the basics of HTML, CSS and JS, includes inputs, coding sessions and consultations. The task is to design and code small web experiments individually or in groups that look differently to the one user than to the other. The websites will be published at the end of the week. No coding skills are required. Students without prior programming experience are especially encouraged to attend and there will be different entry points for different experience levels.

This workshop is a variation of the digital editorial course The Internet of Me at Burg Halle WS 22/23.
Assignment

Workshop: 22.–26.05. | 10–18:00
Deadline / Upload: Friday, 26.05. 10:00
Presentation & Brunch: Friday, 26.05. 11:00–13:00

Create a website that looks different to me than it does to you.

Where to start

Depending on your experience and preference, there are different points to start from:

  1. HTML Boilerplate
    if you want to start an entry from scratch, start with this empty HTML / CSS / JS files
    [Github: HTML Boilerplate]
    [Codesandbox: HTML Boilerplate]

  2. Starter Kits
    if you want to start from modifying existing code, choose one of the coding starter kits
    [Github: All Starter Kits]
    [Codesandbox: 01. Individual Paths / HTML]
    [Codesandbox: 02. Themes & Custom Styling / CSS]
    [Codesandbox: 03. Responsive Design / CSS]
    [Codesandbox: 04. Clickability Cue / JS]
    [Codesandbox: 05. Agency / JS]
    [Codesandbox: 06. Personalization / JS]
Contact
  1. Chat
    Here you can chat and ask questions.
    Signal-Chat
  2. Dropbox
    this is where we share files / you can find the library and the starter kits here
    Dropbox
  3. Library
    a collection of research material
    Dropbox / Library
  4. Sign-Up for Coding Support / Consultations
    consultations in case you need support with a coding problem or want to talk about your concept a bit longer
    GoogleDoc
  5. Contact
    Katharina Nejdl
    katharina.nejdl@googlemail.com
    0176 4342 8313
Monday
Schedule subject to change, depending on group vibe. We can also agree on shorter days or cut some inputs. Let’s discuss!
10:00–11:30
10:00–11:00 | Intro
  • Course-Info
  • Topic-Info
  • Getting to know each other (on paper / in the room)
    Skill Buddies

Personalization History
11:00–11:30 | Setup
12:30–15:00
12:30–12:45 | Input “Individual Paths”
12:45–15:00 | Coding Basics: HTML
12:45–15:00 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
15:30–18:00
16:00–17:00 | Vortrag
17:00–17:30 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
17:30–18:00 | Ending the Day
  • Mood
  • Favorite HTML / CSS elements
  • A game of “Ich sehe was, was du nicht siehst”?
Tuesday
10:00–12:00
10:00–10:30 | Intro

Starterkit [Codesandbox: 02. Themes & Custom Styling / CSS]
[Codesandbox: 03. Responsive Design / CSS]

Showcases
Rafaël Rozendaal: Almost Calm
Sally Thurer
MARCD
On Practices / One

“Pixel” – Responsive Illustrations
Ralph Tharayils Website by ungroup
Little Fragments

Reading List

“There’s a difference between choice and decision for. Choice is an option. Decision is a burden.”

Difference Between Choice and Decision – Techpinions

“The upside of customization is that each user can get exactly what they want, because they are in control. The downside is that many users don’t know what they actually need and that most users are not interested in doing the work required to tweak the user interface to match their preferences.”

Customization vs. Personalization in the User Experience
– NN Group

Dark Mode vs. Light Mode: Which Is Better? – NN Group
Settings are not a design failure – Linear



Painting with Pure CSS – on browser (un-)compatibility

“In 2019, 53% of the total web traffic came from mobile users.”

Mobile vs. Desktop Usage – Research.com
10:30–11:00 | Wireframing
Draw a wireframe of a website, that looks different to me than it does to you. [5min for each round]

  1. How does the website look to you / me?
  2. How does the website look on mobile / desktop?
  3. Does the website react to something? Is it generative, interactive, participatory?
  4. Under what circumstances is the website available / unavailable, accessible / unaccessible?

→ One-Sentence-Concepts
11:30–12:00 | Setup
13:00–15:00
13:00–15:00 | Coding Basics: CSS I
13:00–15:00 | Coding Basics: CSS II
13:00–15:00 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
15:30–18:00
15:30–16:00 | Get Together
  • Mood
  • Show & Tell
16:00–16:45 | Input “Individualization & Interaction”
Starterkit
[Codesandbox: 04. Clickability Cue / JS]

Showcases
Individualization
The Overview Effect – aCCeSsions No.2
Hallo Festspiele 2017
Times New Arial
Re-Flect Studiengangwahl-Tester mit individuell generiertem Avatar

Interaction
Pedagogy and Computation – Parsons Symposium
Nam Huynh
Talia Cotton

Reading List
Exclusive Design – Vasilis van Gemert
The Promise of Empathy – Design, Disability, and Knowing the “Other”
Interaction States – Material Design
16:45–18:00 | Coding Basics: JS I
16:45–18:00 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
Wednesday
10:00–12:00
10:00–10:30 | Intro “Themes & Customization” / “Responsive Design”

Starterkits
[Codesandbox: 05. Agency / JS]
[Codesandbox: 06. Personalization / JS]

Showcases

Customization & Agency
The User Condition – Silvio Lorusso
Office
On Practices / Two
Kunsthalle Osnabrück

Personalization & User Data
Click click click
Your Digital Fingerprint – The Disconnect
The School for Temporary Liveness

Reading List

Customization & Agency
The User Condition – Silvio Lorusso
Reducing Cognitive Overload – Smashing Magazine

“The upside of customization is that each user can get exactly what they want, because they are in control. The downside is that many users don’t know what they actually need and that most users are not interested in doing the work required to tweak the user interface to match their preferences.”

Customization vs. Personalization in the User Experience
– NN Group

Personalization & User Data
TED: Beware online “filter bubbles”—Eli Pariser
Web-Serie: Do Not Track
The Disconnect: Your Digital Fingerprint
10:30–12:00 | Coding Basics: JS II
10:30–12:00 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
13:00–15:00
13:00–13:15 | Privacy Settings
13:15–15:00 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
15:30–18:00
15:30–17:00 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
17:00–18:00 | Ending the Day
  • Mood
  • Show & Tell
Thursday
10:00–12:00
10:00–10:05 | Intro
10:05–12:00 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
13:00–15:00
13:00–15:00 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
15:30–18:00
15:30–17:00 | Collective Coding
  • Individual Project
  • Coding Support / Consultations [Sign Up]
17:00–18:00 | Ending the Day
  • Mood
  • Show & Tell
Friday
All web experiments / projects should be uploaded by Friday 10:00.
10:00–13:30
10:00–10:30 | Upload
10:30–11:00 | Brunch Preparations
  • Brunch Preparations
11:00–13:00 | Presentation & Brunch
  • Presentation
  • Brunch
13:00–13:30 | End of Workshop
  • Mood
  • Feedback