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:
-
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] -
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
-
Chat
Here you can chat and ask questions.
Signal-Chat -
Dropbox
this is where we share files / you can find the library and the starter kits here
Dropbox -
Library
a collection of research material
Dropbox / Library -
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 -
Contact
Katharina Nejdl
katharina.nejdl@googlemail.com
0176 4342 8313
Monday
10:00–11:00 | Intro
- Course-Info
- Topic-Info
-
Getting to know each other (on paper / in the room)
Skill Buddies
Personalization History
- → The Filter Bubble by Eli Pariser - Introduction & Chapter 1
- [EFF: From Cookies to Device Fingerprinting]
- [History of Personalized Search]
- [A Brief History of Netflix Personalization]
- [The History and Evolution of Marketing]
11:00–11:30 | Setup
- Chat [Signal]
- Boilerplates / Starterkits [Dropbox]
- Codesandbox [HTML Boilerplate]
- Visual Studio Code [Download]
12:30–12:45 | Input “Individual Paths”
Showcases
- Hypertext Fiction: The Temple of No
- Sebastian Ly Serena
- Mitchell Barton
- When all of my friends are on at once
Reading List
- Podcast: HTML energy
- A Handmade Web – J.R. Carpenter
- Laurel Schwulst’s Decade in Internet – RHIZOME
12:45–15:00 | Coding Basics: HTML
- HTML Fundamentals [Codeacademy]
- Coding Support / Consultations [Sign Up]
12:45–15:00 | Collective Coding
- Individual Project
- Coding Support / Consultations [Sign Up]
Tuesday
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]
- How does the website look to you / me?
- How does the website look on mobile / desktop?
- Does the website react to something? Is it generative, interactive, participatory?
- Under what circumstances is the website available / unavailable, accessible / unaccessible?
-
→ One-Sentence-Concepts
11:30–12:00 | Setup
- Inspection
- VS Extensions [Live-Server]
13:00–15:00 | Coding Basics: CSS I
- CSS Introduction [Codeacademy]
- Coding Support / Consultations [Sign Up]
13:00–15:00 | Coding Basics: CSS II
- Responsive Design with CSS [Codeacademy]
- Coding Support / Consultations [Sign Up]
13:00–15:00 | Collective Coding
- Individual Project
- Coding Support / Consultations [Sign Up]
15:30–16:00 | Get Together
- Mood
- Show & Tell
16:00–16:45 | Input “Individualization & Interaction”
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
- JS Fundamentals [Codeacademy]
- Coding Support / Consultations [Sign Up]
16:45–18:00 | Collective Coding
- Individual Project
- Coding Support / Consultations [Sign Up]
Wednesday
10:00–10:30 | Intro “Themes & Customization” / “Responsive Design”
- Video [Dark Patterns]
Showcases
- The User Condition – Silvio Lorusso
- Office
- On Practices / Two
- Kunsthalle Osnabrück
- Click click click
- Your Digital Fingerprint – The Disconnect
- The School for Temporary Liveness
Customization & Agency
Personalization & User Data
Reading List
- 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 - TED: Beware online “filter bubbles”—Eli Pariser
- Web-Serie: Do Not Track
- The Disconnect: Your Digital Fingerprint
Customization & Agency
Personalization & User Data
10:30–12:00 | Coding Basics: JS II
- Continue with JS Fundamentals [Codeacademy]
- Coding Support / Consultations [Sign Up]
10:30–12:00 | Collective Coding
- Individual Project
- Coding Support / Consultations [Sign Up]
13:00–13:15 | Privacy Settings
- Private Search
- DuckDuckGo
- Anti-Tracking Add-On
- EFF Privacy Badger
- DuckDuckGo Extension & Mobile App
- Firefox Browser
- Download
- Settings
- More Tips
- Privacy Guides: Tools
- Digital Information World: Internet Tracking How & Why
- NY Times: 10 Tips for Internet Privacy
- Privacy International: Protect Yourself Online
13:15–15:00 | Collective Coding
- Individual Project
- Coding Support / Consultations [Sign Up]
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–10:05 | Intro
10:05–12:00 | Collective Coding
- Individual Project
- Coding Support / Consultations [Sign Up]
13:00–15:00 | Collective Coding
- Individual Project
- Coding Support / Consultations [Sign Up]
15:30–17:00 | Collective Coding
- Individual Project
- Coding Support / Consultations [Sign Up]
17:00–18:00 | Ending the Day
- Mood
- Show & Tell
Friday
10:00–10:30 | Upload
- Video [Web Accessibility]
- Upload Deadline [Dropbox / 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