The GUI itself is a systematic illusion.
Jay David Bolter und Diane Gromala, 2005
V O R T R A G
How Facebook’s News Feed Changed the Internet
* Jacob Hurwitz-Goodman
Durch Design werden Beziehungen verdinglicht, sie gerinnen zur gesellschaftlichen Ordnung, zur Bedingung für den Alltag. Design ermöglicht – oder erschwert – menschliches Zusammenleben.
Friedrich von Borries (Architektur- und Designtheoretiker), 2016
T H E O R I E
Fokus
- 🏢 HTML
- 💅🏾 CSS
- 💃 JavaScript
Responsive Design
Ziel ist ein automatisches Anpassen an die verschiedensten Gerätegrößen um sicherzustellen, dass alle Inhalte den Kontexten entsprechend les- und benutzbar bleiben.
Breakpoints
Die Grundlage dafür bilden Mittelwerte (Breakpoints) der aktuell am weitest verbreitetsten Bildschirmgrößen, um möglichst viele Geräte miteinzubeziehen.
- 1400px (Desktop)
- 1200px (Laptop)
- 992px (Tablet, Landscape)
- 768px (Tablet, Portrait)
- 576px (Phone)
P R A X I S
Übung anlegen
- Ordner „html-3“ kopieren, in „html-4“ umbenennen und in VS Code öffnen
- Datei „vorname.html“ im Chrome-Browser öffnen
Größe
Die Dimensionen eines Elements (zB. Bild) definieren.
Spitznamen
Elemente mit IDs ansprechen. IDs sind einzigartige und frei wählbare Namen, die nur ein einziges mal im jeweiligen HTML-Dokument vorkommen dürfen. Dadurch wird es möglich, Elemente gezielt zu identifizieren und zu verändern. Beispiel: Nur der Titel des allerneuesten Videos soll hervorgehoben werden.
Klassen
Elemente mit Klassen ansprechen. Klassen sind wiederverwendbare und frei wählbare Namen, die beliebig oft im jeweiligen HTML-Dokument vorkommen dürfen. Dadurch wird es möglich, sich wiederholende Elemente gezielt zu identifizieren und zu verändern. Beispiel: Nur die Video-Sektionen sollen über eine Hintergrundfarbe besonders hervorgehoben werden.
Padding
Den inneren Abstand eines Elements (zB. Gruppe) verändern.
Margin
Den äußeren Abstand eines Elements (zB. Headline) verändern.
Den äußeren Abstand der kompletten Website oder aller Elemente verändern.
Breakpoints
Element abhängig von der Fenstergröße verändern. Auch die Orientierung (Portrait, Landscape) oder das Zielmedium (Screen, Print) können als beeinflussende Faktoren herangezogen werden.
Übung abschließen
Übung so gut wie möglich fertig machen (vollständig und sauber) und bis zum nächsten Termin per Slack DM abgeben.
📂 → 🗜️ → 🎁 → 💬 → ✅