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.

Screenshot der Desktop-Website — Desktop-Version der Startseite

Screenshot der Mobile-Website — Mobile-Version der Startseite

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.

…
  <section>
    <h2>Meine Überschrift</h2>
    <img src="media/beispiel-grafik.png">
  </section>
…

HTML

section {
  width: 80%;
  height: 500px;
  background: #cdbb00;
}

img {
  width: 100px;
  height: 200px;
}

CSS

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.

…
  <div id="neu">
    <video src="media/beispiel-video.mp4" autoplay muted loop>🥵 Oje</video>
    <h3>Video Projekt Titel</h3>
  </div>
…

HTML

#neu {
  color: red;
  background: yellow;
}

CSS

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.

…
  <div class="thumbnail">
    <video src="media/beispiel-video.mp4" autoplay muted loop>🥵 Oje</video>
    <h3>Video Projekt Titel</h3>
  </div>

  <div class="thumbnail">
    <video src="media/beispiel-video.mp4" autoplay muted loop>🥵 Oje</video>
    <h3>Anderer Video Projekt Titel</h3>
  </div>
…

HTML

.thumbnail {
  border: 2px dotted orange;
  background: plum;
}

CSS

Padding

Den inneren Abstand eines Elements (zB. Gruppe) verändern.

…
  <div class="thumbnail">
    <video src="media/beispiel-video.mp4" autoplay muted loop>🥵 Oje</video>
    <h3>Video Projekt Titel</h3>
  </div>
…

HTML

.thumbnail {
  …
  padding: 20px 40px 50px 40px;
  padding-top: 20px;
}

CSS

Margin

Den äußeren Abstand eines Elements (zB. Headline) verändern.

…
  <div class="thumbnail">
    <video src="media/beispiel-video.mp4" autoplay muted loop>🥵 Oje</video>
    <h3>Video Projekt Titel</h3>
  </div>
…

HTML

.thumbnail h3 {
  …
  margin: 14px 36px 72px 36px;
  margin-top: 84px;
}

CSS

Den äußeren Abstand der kompletten Website oder aller Elemente verändern.

<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Meine erste Website</title>
    <link href="styles/vorname.css" rel="stylesheet">
  </head>
  <body>
    …
  </body>
</html>

HTML

body {
  margin: 0;
}

* {
  margin: 0;
  padding: 0;
}

CSS

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.

…
  <div class="thumbnail">
    <video src="media/beispiel-video.mp4" autoplay muted loop>🥵 Oje</video>
    <h3>Video Projekt Titel</h3>
  </div>
…

HTML

@media (min-width: 768px) {
  .thumbnail {
    …
    background: green;
  }
}

CSS

Ü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.

📂 → 🗜️ → 🎁 → 💬 → ✅